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
Till now, we have used different selectors individually, but now we are going to use them together. The only reason why we are combining selectors is to become much more specific about our elements.
Suppose we want to select all the paragraph element having the class attribute as dog and set the colour of their background to brown. But then if we face a paragraph with the class attribute as mustard, we need to set that background colour to yellow.
Our code will look like this.
Whenever selectors comes one after the other, they are read from right to left. The selector that is placed to the farthest point just before the opening curly braces is known as 'Key Selector'.
The 'Key selector' helps in identifying that in which element the styles need to be applied.
The selector that is located left to the key selector works as a pre-qualifier.
In the above code, ‘.dog p’ is the 1st combined selector. It has a Class and a Type selector, respectively. Both of them are separated using a single space. Here the Key selector is the Type selector which is targeting the paragraph element. As this Type selector is pre-qualified with a Class selector of 'dog', the paragraph element that comes within the element with class attribute value as 'dog' will only be selected.
The 2nd combined selector is the '.dog p .mustart'. It consists of 3 selectors, 2 Class and 1 Type selector. The only difference between the 1st and the 2nd selector is the adding up of the 'mustard' class at the end. As 'mustard' is to the right, it is the Key selector and all the selectors before it is pre-qualifiers.
Many types of selectors can be joined to target any element on the web page. As we will be using different of them, we will be getting accustomed to their power. But before that, let's have a check on how combining these selectors affect the specificity weight of a selector.
Specificity within Combined Selectors
When selectors get combined, so are the selector's specificity weight of each one. The specificity weights can be determined by counting different type of selector present within a combined selector.
In the above code, we had .dog p as our 1st combined selector. It consisted of a class selector as well as a type selector. We know that the point value of the Class selector is 0-1-0 and that of the Type selector is 0-0-1. Thus the total point value of the combined selector is 0-1-1, which can be formed by adding them up.
In the 2nd combined selector, i.e. .dog p .mustard, there are 2 class selectors and 1 Type selector. When the point value of both of them are combined, we get 0-2-1. The first 0 specifies for zero ID selector, the 2 specifies two Class selectors, and 1 says about one Type selector.
When we compare both the selectors, then we can find that the 2nd selector has a higher point value as well as specificity weight. Thus, it will get preceded in the cascade. Therefore if we are flipping the order of placement of the selectors, then it would not affect its display.
Always keep in mind to have an eye on the selector's specificity weight. Higher is the specificity weight, higher the chance for a break in the cascade.
Don't miss out!
Study Material