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
Initially, the 'float' property was created to make the content to wrap around the images. An image was made to float, and all the contents that used to surround the image could then normally stream around it. Although the ‘float’ used to work great for the 
element, it was never really expected to be utilized for design and situating purposes. Hence, it accompanies a couple of pitfalls.
One of that pitfall is that every so often, the best possible styles won't render on an element that it is sitting by or is a parent element of a floated element. As we all know that when an element is floated, it is taken away from the original flow of the HTML page. This element's design around that floated element can be impacted negatively.
Often the value of the ‘padding’ and the ‘margin’ property aren't translated effectively, making them mix into the floated element; different properties can be influenced, as well.
Another major pitfall is that sometimes undesirable content starts to fold over a floated element. Getting rid of an element from the HTML document's flow offers all other element presents around the floated element to fold over and take up the available space around the floated element, which is often not needed.
In our previous example of 2 columns, after floating the 
as well as the 
elements, and before providing the ‘width’ property value on both of them, the content that is present in the footer element would have enclosed in between the two floated element above it, occupying in any accessible space. Meanwhile the 
element would have been placed in the trash between the and elements, taking up the space available.
To prevent content from folding over floated elements, we have to contain, or clear, those floats and set back the page to its ordinary stream.
Clearing Floats
One can use the 'clear' property to accomplish Clearing floats. It takes in values like: right, left, and both.
div {
clear: left;
}
The 'right' value will clear the right floats, and the 'left' value will clear the left float. 'Both' can clear right as well as the left floatsand is regarded as the most ideal value.
In the previous example, if we are using the property of 'clear' with the value of 'both' on the footer, then we can clear the floats.
footer {
clear: both;
}
Containing Floats
Apart from clearing floats, one more choice is to contain the floats. The result of clearing the floats as well as containing floats are almost the same; but, containing floats makes it sure that all styles will be properly rendered.
It is to be noted that the floated element must be placed within a parent element. Here the parent element will be acting as a container, leaving the progression of the archive typical outside of it. For that parent element, the CSS will be defined by the 'group' class, as shown below.
.group:before,
.group:after {
content: "";
display: table;
}
.group:after {
clear: both;
}
.group {
clear: both;
*zoom: 1;
}
The:after and :before are pseudo-elements that are generated dynamically above and below the element with the 'group' class. Those elements do not contain any content and are viewed as table-level elements. It is much similar to block-level elements. The elements that are generated dynamically after the element with the 'group' class is clearing the floats inside the element with the 'group' class. In addition to that, the element having the 'group' class also clears any floats that are appearing above it.
CSS
.group:before,
.group:after {
content: "";
display: table;
}
.group:after {
clear: both;
}
.group {
clear: both;
*zoom: 1;
}
section {
float: left;
margin: 0 1.5%;
width: 63%;
}
aside {
float: right;
margin: 0 1.5%;
width: 30%;
}
The procedure shown above for containing elements is known to be “clearfix” and can frequently be found in different sites with the class name of cf or clearfix.
Don't miss out!
Study Material