What Do You Mean By HTML and CSS?
Common HTML Terms
Creating HTML Document Structure
Common CSS Terms
Selectors
Referencing CSS
CSS Resets
Getting to Know HTML And Semantics Overview
Identifying Divisions and Spans
Using Text Based Element
Building Structure
Creating Hyperlinks
Getting to Know CSS :The Cascade
Calculating Specificity
Combining Selectors
Layering Styles With Multiple Classes
Common CSS Properties
CSS Aural Media/Style Sheets
CSS Pagination
CSS Overflow
CSS White Space
CSS Word Wrap
CSS Outline
CSS Visibility
CSS Counters
CSS Animation
CSS Transition
CSS Tooltips
CSS Tooltip Animation
CSS Arrow
CSS Flexbox
CSS Media Queries
CSS 2D Transforms
CSS 3D Transforms
How are Elements Displayed?
Display Property Controls And Box Model?
Working With Box Model
Width and Height
Margins and Padding
Borders, Individual Border Sides, Border Radius, Box Sizing, Content Box and Padding Box
Developer Tools
Removing Spaces between Inline-Block Elements
Positioning With Floats
Floats in Practice
Positioning With Inline-Block
Clearing and Containing Floats
Creating Reusable Layouts
Uniquely Positioning Layouts
Adding Colour To Text
Changing Font Properties
Font Family
Font Size, Font Style, Font Variant, Font Weight And Line Height
Shorthand Font Properties
Applying Text Properties
Text Properties All Together
Using Web-Safe Fonts
Including Citation And Quotes
Adding A Background Colour
Adding a Background Image and Background Repeat
Background Position and Shorthand Background Image Values
Designing Gradient Backgrounds
Changing the Direction of a Gradient Background
Using Multiple Background Images
Exploring New Background Properties
Unordered Lists
Ordered Lists
Description Lists
Nested Lists
List Item Styling
List Style Type Values
List Style Position Property
Adding Media And Adding Images
Sizing Images
Positioning Images, Inline Positioning Images, Blocking Positioning Images , Positioning Images Flush Left or Right
Adding Audio
Adding Videos
Adding Inline Frames
Semantically Identifying Figures And Captions
Building Forms And Initializing a Form
Text Fields And Text Areas
Multiple Choice Inputs And Menus
Form Buttons
Other Inputs
Organizing Form Element
Form And Input Attributes
Login Form Example
Organizing Data with Tables
Creating A Table
Table Header
Table Structure
Table Head, Body and Foot
Combining Multiple Cells
Table Borders
Table Striping
Aligning Text
Completely Styled Table
HTML Coding Practices
Use the Proper Document Structure
Keeping the Syntax Organized
Use Practical ID and Class Values
CSS Coding Practices
Write CSS Using Multiple Lines and Spaces
Use Proper Class Names
Build Proficient Selectors
Use Desired Classes When Needed
Use Shorthand Hexadecimal Color Values
Drop Units Zero Values
HTML abbr tag
HTML acronym tag (Not for HTML 5)
HTML area tag
HTML basefont tag
HTML blockquote tag
HTML datalist tag
HTML Description List
HTML ins tag
Marquee HTML Tag
HTML object tag
HTML picture tag
HTML SVG
Plain text document that has a .html extension (not .txt) are known as an HTML document. To start writing the HTML code, one needs to have a text editor with which the individual is comfortable. Unfortunately, this does exclude Microsoft Word. For writing HTML and CSS codes, 2 of the most popular ones are Sublime and Dreamweaver. Free options likewise incorporateTextWrangler for Mac and Notepad++ for Windows.
Every HTML documents consists of the below mentioned elements and declaration
The 
or the Document Type declaration is kept at the start of the HTML document. Its main function is to make the web browsers accustomed with the HTML version. After the Document Type declaration comes the 
element which marks the start of the document.
The top of the document is identified by 
element which is placed inside the element. The head contains the metadata (accompanying data regarding the page). Contents that are located inside the element is not shown on the web page. Apart from that, the element consists of links to any outside documents, the 
element which contains the title of the document (the name that is shown on the title bar of your browser), etc.
Contents that you can see on the web page is written inside the 
element. Have a look at the code below to get a clearer picture of the things described above.
The above code says the web browser about the start of the document by 
(document type declaration), succeeded by element. The and the
elements are enclosed inside the element. The element consist of 
tag, character encoding of the web page, and the , the title of the document which appears in the title bar. Now inside the body element there are 2 things i.e. 
and 
. is used for headings and is used for paragraph. As both the elements are present within the body element, they are appeared on the web page.
When an element is placed within another element, it is called a nested element. It is a smart thought to indent that component to keep the document structure efficient and decipherable. Thus looking through the above code we can say that and 
element are the nested element present inside the element. The method of indenting elements proceeds as new elements are included within the and components.
Self-Closing Elements
We hope that you have noticed one thing a bit different in the above code. Except for the 
element, all tags consisted of a closing tag. Don't worry; we have not done it intentionally. We just wanted to conclude that not every element which you are going to come through in HTML need to have an opening and a closing tag. Some elements are okay with a single tag, and the is categorized as one of them. Some other examples of self-closing elements are as follows:-
Don't miss out!
Study Material
