CSS is made up of rules that define how HTML elements should be styled. A CSS rule consists of two main parts: a selector and a declaration block.
selector {
property: value;
}
For example:
h1 {
color: blue;
font-size: 24px;
}
This will style the h1 tag with a blue color and font size of 24px.
Element selectors, also called type selectors, are used in CSS to target and style all HTML elements of a specific type.
You simply write the name of the HTML element you want to style — no class (.) or ID (#) needed.
p {
color: red;
}
This is a paragraph that will turn red due to the element selector.
Class selectors in CSS are used to target and style one or more HTML elements that share the same class name.
You use a dot (.) followed by the class name to define the style.
.intro {
font-size: 18px;
color: green;
}
This is an intro paragraph.
ID selectors in CSS are used to style a single, unique HTML element. Each ID must be unique within a page.
You use a hash symbol (#) followed by the ID name to define the style.
#main-header {
background-color: #333;
color: white;
}
Attribute selectors in CSS allow you to target HTML elements based on the presence or value of their attributes.
You use square brackets [] to select elements with specific attributes or attribute values.
a[target="_blank"] {
color: red;
}
Pseudo-class selectors in CSS are used to define a special state of an element, such as when a user hovers over it, visits a link, or selects a form field.
Pseudo-classes start with a colon (:) followed by the pseudo-class name.
a:hover {
color: orange;
}
Specificity is a measure of how specific a CSS rule is. The more specific the selector, the higher priority it gets.
Specificity levels (from low to high):
p, h1) – low specificity.btn, [type="text"], :hover) – medium specificity#header) – high specificitystyle="color: red;") – highest specificityh1 {
color: blue;
}
#header {
color: red;
}
The text in the element with id="header" will be red due to the higher specificity of the ID selector.
Inheritance in CSS means that some properties applied to a parent element are automatically passed down to its child elements.
Not all CSS properties are inherited. Mostly, text-related properties like color, font-family, and line-height are inherited by default.
div {
color: red;
}
p {
font-size: 16px;
}
This is a paragraph inside a div. The text will be red due to inheritance from the div.
In CSS, non-inherited properties are those that do not automatically pass from a parent element to its child elements.
These properties usually affect the layout, box model, positioning, or visual appearance of an element, and must be set individually if needed on each element.
marginpaddingborderwidth and heightdisplaypositionbackgroundbox-shadowflex or grid propertiesdiv {
margin: 20px;
}
p {
margin: 10px;
}
Sometimes, you may want to override inherited properties in CSS. You can do this by specifying the property again in a child element's style.
p {
color: green;
}
This is a paragraph where the color is overridden by the child selector, making it green.