CSS Syntax
CSS syntax consists of style rules that are interpreted by the browser (or any other rendering engine) and applied to the selected elements in the HTML document.
A style rule consist of three parts:
- Selector − selects the tag or group of tags to be styled.
- Property – the tag property targeted by the CSS rule.
- Values – the values are assigned to the targeted properties.
The general CSS rule syntax is like:
Selector { Property : Values ; }
For example, lets say we want to style the border of every table in the document we create the CSS rules as follows:
table { border :5px solid #230387; }
From the example above:
tableis the Selector because we are styling<table>element.borderis the Property because we are styling the border of the<table>element.5px solid #230387are the values we are assigning to border of the<table>. Which means our table is going to have a solid border of width 5px and color #230387.
For now, the full example would be something like:
<!DOCTYPE html>
<html>
<head>
<style>
table { border :5px solid #230387; }
</style>
</head>
<body>
<table>
<thead>
<tr><th>Subject</th><th>Mark</th><th>Grade</th></tr>
</thead>
<tbody>
<tr><td>Maths</td><td>80%</td><td>A</td></tr>
<tr><td>Physics</td><td>75%</td><td>A</td></tr>
<tr><td>Chemistry</td><td>50%</td><td>C</td></tr>
</tbody>
</table>
</body>
</html>
Output
There are different types of CSS selectors as we shall see.
Tag type Selector
This type of selector selects an element based on it tag type. For example:
To change the color of all <h1> tags to red we use:
h1 {
color: red ;
}
Universal Selector
This type of selector is used to style everything on the webpage. For example:
* {
color: #230387;
}
Descendant Selector
This type of selector is used to style the selected descendants of the specified element. For example, the following rule will style the <span> element only if its inside the <ol> element:
ol span {
color: #000000;
}
For example:
<!DOCTYPE html>
<html>
<head>
<style>
ul span {
color: red;
}
ol span {
color:blue;
}
</style>
</head>
<body>
<ul><li>My <span>name</span> is...</li></ul>
<ol><li>My <span>name</span> is...</li></ol>
</body>
</html>
Output
Child Selector
Child selector picks the direct descendant of an element unlike the descendant selector which picks the whole generation of descendants of an element. To render blue a paragraph that is a direct descendant of <body>:
body > p {
color: blue;
}
Class Selector
Selects all elements with the mentioned class as an attribute. For example, the following code sets a blue color to all elements that have class = "linked" attribute.
.linked {
color: blue;
}
Full example:
<!DOCTYPE html>
<html>
<head>
<style>
.linked {
color: blue;
}
.disabled {
color:gray;
}
</style>
</head>
<body>
<ul>
<li class = "linked">My name is...</li>
<li class ="disabled">My name is...</li>
<li>My name is...</li>
</ul>
</body>
</html>
Take note that the class selector starts with a dot.
The class selector can be made to be more specific. For example:
h1.centered {
color: #000000;
}
The code above will select an <h1> element only if it has the class “centered”.
ID Selector
The ID selector sets style rules based on the id attribute of an element. For example, to set blue color to an element with id = "blue" we use the following:
#blue {
color: blue;
}
We can make it a bit more specific. For example:
h1#blue {
color: blue;
}
This now renders the content blue only for <h1> elements with id = "blue".
Attribute Selector
Applies styles to elements with selected attributes. For example, to render blue any <p> element that has attribute width = "50px":
p[width ="50px"] {
color: blue;
}
More ways you can use the attribute selector:
- div[width] – Selects all
<div>elements with awidthattribute. - div[width=”50%”] – Selects all
<div>elements whosewidthattribute is set to 50%. - div[width~=”px”] – Selects all
<div>elements whosewidthattribute value contains “px”. - img[src|=”hom”] – Selects all
<img>elements whosesrcattribute values are exactly “hom”, or begin with “hom-“.
Grouped Selectors
Applies the same rules to different selected elements:
h1, h2, h3 {
color: blue;
}