1 - Tag selector & general syntax of a CSS code
Before we talk about the properties of a selector, let's take a simple example:
Example
to put the title tag h1 in red we use the code:
h1 {color: # FF0000; }
In this example:
- h1 : represent the selected tag by the tag selector,
- color : indicates here the property of the selector which it's value in this case is red.
From this example, we can deduce the general syntax of a CSS code:
Tag selector {property: values;}
2 - Selector properties
The properties of a selector are very numerous, we can cite some of the most used:
- background: set the background color or image
- border: define the properties linked to the border.
- color: defines the color of the selector
- content: used with the :: before and :: after pseudo-elements in order to generate the content of an element.
- font: property allowing to use a system font for the font of an element thanks to certain specific keywords
- height: defines the height of a content box element
- margin: defines the size of the margins on the four sides of the element
- mask: allows to hide an element partially or completely
- padding: allows to define the different filling gaps on the four sides of an element
- scale: allows scaling
- text: acts on the selector text
- width: allows to define the width of the box of the content of an element
Note
We will see in detail on examples, each of these properties in the next tutorials 3 - Example of CSS tag selectors
Example: If for example we want the title tags to be in red with the size 22px, and the subtitle tags to be in blue for the size 18px, we use the CSS code:
h1 {color: red;
}
h2 {color: blue;
}
Here is the full code for the web page:
<html>
<head>
<style>
h1 {color: red;
}
h2
{color: blue;
}
</style>
<title> Tag selector </title>
</head>
<body>
<h1> Here is the title in red! </h1>
<h2> Here is the subtitle in blue! </h2>
</body>
</html>
And here is the overview of the page:
Younes Derfoufi
my-courses.net
my-courses.net
