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
The styling of elements in a web page is done using CSS. A selector assigns precisely which element or elements inside our HTML to target and apply styles like position, colour and size. Selectors may incorporate a mix of various qualifiers to choose remarkable components, all relying upon how explicit we wish to be. Like, think it as we may sometime want to choose either all the paragraph present on the web page or only some specific paragraph on the page.
Selectors commonly target the element, like 
or an attribute value like class or id value. Inside CSS, selectors are pursued with wavy sections (curly braces), {}, which include the styles to be applied to the chosenelement.Example – h1 {………….} - > Here the selector is focusing on all 
element
Properties
As soon as the element gets selected, a property helps in specifying the styles needed for that element. Property names are written in the CSS code just after the selectors and enclosed within the curly braces. A colon precedes them. There are several properties linked with the elements, like colour, background, height, width, font-size etc.
Example – p {
background: ………;
font-size: ……..;
}
In the above code, two properties i.e. background and font size is applied to all the 
element.
Values
Till now, we have known the method to select an element and then determine the style for it using a property. A property without its behaviour is incomplete in CSS. Thus, to specify a behaviour, a value must be added to the property. Values are text that are present between the semicolon and the colon after the property name.
Example – p {
background: Blue;
font-size: 10px;
}
Here all 
elements are selected and the value of background property is set to blue and that of the font-size is set to 10px.
Thus, the CSS Syntax is:
p {
background: Blue;
font-size: 10px;
}
p – Selector
Blue – Value
background – Property
Realizing a couple of standard terms and the general sentence structure of CSS is an extraordinary beginning, yet we have a couple of more things to learn before bouncing in too far. We must take a much more in-depth look at the working process of selectors in CSS.
Working with Selectors
As said earlier, Selectors in CSS helps in identifying which HTML elements needs styling. It is essential to get into the ways to use selectors as well as how to leverage them. The 1st thing that we should start with is by familiarizing with different kinds of selectors.
Let's start with some of the most common types: type, class and ID selectors.
Type Selectors
Type selectors in CSS help in targeting elements with their element type. For example, if we want to target all paragraph element,
.
Class Selectors
Class Selectors helps us in choosing the element based on the value of the class attribute it contains. Class selectors are much more precise and specific in selecting the elements. It does not select all identical elements but chooses only a particular group of the element having the same class attribute value.
Inside CSS, the class attribute value is preceded by a period (.).
then we will use p type selector
Example – p { ………….. }
In the above code, the class selector will select all the element having the class attribute value as firstclass, including paragraph and division elements.
ID Selectors
ID Selectors are much more specific and precise than class selectors. They focus mainly on a unique element at a time. As the class selectors take the help of class attribute value of an element, the ID selectors use the id attribute value of the element as a selector.
Note that id attribute values can only be used one time on a page. In CSS, a hash sign (#) precedes the id attribute value.
In the above code, the ID selector will provide CSS styling only to that element whose id attribute value is firstid.
Now we guess that everything is coming together. We have leant the steps to add elements to the HTML page. We are also well accustomed with the technique of providing style to it using CSS. Now it’s time to connect both these languages such that they work together hand in hand.
Don't miss out!
Study Material