Cascading Style Sheets(CSS) is a stylesheet language we use to style an HTML document. CSS describes how elements should be rendered on screen, on paper, in speech, or on other media.
CSS ruleset
CSS rules is composed of a selector and a declaration block. The declaration block can have one or multiple declarations. Each declaration has a property and its value.
Selector
This is used to select the element(s) you want to style. In this example, we are selecting all the <p> elements in the HTML document.
Declaration Block
A selector is followed by a declaration block. The curly braces { } defines the beginning and ending of a declaration block.
Declaration
Declarations should be put Inside the curly braces. They can define how the selected HTML element will be displayed. Each declaration ends with a semicolon ;.
Properties
The first part of a declaration(before the colon : ) defines which property of the selected element you want to style. In this example, we are changing the color of all the <p> elements.
To the right of the property(after the colon : ) is the property value. This chooses one out of many possible appearances for a given property. In this example, the color of the <p> elements will be displayed red, which is one of the many values that can be applied to the color property.
Comments
Comments in CSS should be put in the characters /* and */. For example:
p {
color: red; /* the text color is red */
}
CSS Selectors
In CSS, there are many different types of selectors that allows us to specify what element(s) we want to select.
Basic selectors
Universal selector
The universal selector * is used to select all the elements.
* {
color: red;
}
Type Selector
In the example we mentioned before, the selector p is a Type Selector. It uses the element name p to select all the <p> elements in your HTML document.
p {
color: red;
}
Class selector
A class selector starts with a dot. It selects all the elements that has this class name.
What is CSS?
CSS ruleset
Selector
Declaration Block
Declaration
Properties
Property Value
Comments
p { color: red; /* the text color is red */}CSS Selectors
Basic selectors
* { color: red;}p { color: red;}.red { color: red;