Bootcamp
Search…
📅
Course Schedule
0: Language and Tooling Teaching Guide
1: Frontend Basics Teaching Guide
2: Backend Basics Teaching Guide
3: Backend Applications Teaching Guide
4: Backend Structure Teaching Guide
5: Full-Stack Applications Teaching Guide
6: Frontend Infrastructure Teaching Guide
7: React Teaching Guide
8: Advanced React Teaching Guide
9: Advanced Topics Teaching Guide
🧮
Algorithms Teaching Guide
💼
Interview Prep Teaching Guide
☺
User Experience Teaching Guide
CSS 1.2 CSS Classes, Id's and Inheritance
Applying classes and id's to HTML elements and styling them with CSS

Classes

Classes are used in CSS when different types of elements need the same styling but only in certain cases and not across the board. A class is written as an attribute-value pair inside the opening tag of an element.
1
<h2 class="special">This h2 has a class of special </h2>
2
<p class="special" > This paragraph has a class of special </p>
Copied!
Here is the CSS styling for the special class:
1
.special{
2
background-color: green;
3
color: white:
4
}
Copied!
The h2 and the p tag text would have a background-color of green and text color of white, regardless of the background-color or color rules applied to all p or h2 tags initially.
Also rules that were applied to all p and h2 tags that were not overwritten in the special class would still be applied to the p and h2 tags with the special class. For instance the font-size should stay the same for the h2 because the special class did not overwrite that rule.

IDs

An ID used on one and only one element. Just like each person has their own driver's license or SS number unique to them. An ID should have the same trait. An ID is written as an attribute-value pair inside the opening tag of an element:
1
<p> This is a regular p tag </p>
2
<p id="unique" > This paragraph is unique in its styling </p>
Copied!
This is how to style an ID in CSS
1
#unique{
2
color: green;
3
font-size: 25px;
4
}
Copied!
The font size of this paragraph with id "unique" will be 25px and its text will be color green.

Inheritance

Inheritance describes how descendant elements inherit certain properties from its parent element. For example, for CSS to style the color of the text and the font-size of all elements on the page, adding these rules to the body selector should do the trick since all other elements are descendants of body in the DOM.
1
body {
2
color: white;
3
font-size: 20px;
4
}
Copied!
However, tags that have a set font-size in the browser styles like h1, won't inherit that style since that specific rule is written in the h1 rule and is thus more specific.
​
Last modified 1mo ago
Copy link