Syntax and Selectors
CSS Syntax
- A CSS rule-set comprises of a selector and an announcement block.
- The selector points to the HTML component you need to style.
- The declaration block contains one or more declarations separated by semicolons.
- Every declaration includes a CSS property name and a value, separated by a colon.
- Multiple CSS declarations are separated with semicolons, and declaration blocks are surrounded by curly braces.
Example:
h1 {
font-size:12px;
}Example Explained:
h1 is the selector in this CSS .
{ font-size:12px } is declared in this CSS.
font-size is a property, and 12px is the property value.
CSS Selectors
CSS selectors are used to “find” (or select) the HTML components you need to style. They are are divided into five categories:
- Simple selectors
Selects elements based on name, id or class. - Combinator selectors
A combinator is something that clarifies the connection between the selectors. - Pseudo-class selectors
A pseudo-class is used to define a special state of an element. - Pseudo-element selectors
A CSS pseudo-element is used to style specified parts of an element. - Attribute selectors
The attribute selector is used to select elements with a specified attribute.
1. Simple Selectors
a) Element selector
The element selector chooses HTML elements dependent on the element name.
Example:
Here, <h1> element on the page is center-aligned, with a blue text color.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS Element selectors</title>
<style>
h1{
text-align: center;
color: blue;
}
</style>
</head>
<body>
<h1>CSS element Selector</h1>
</body>
</html>b) ID Selector
The id selector utilizes the id attribute of a HTML element to choose a particular element. The id of an element is special within a page, so the id selector is used to choose one of a kind element.
To select an element with a specific id, write a hash (#) character.
Example:
Here the id=”main-header” is applied to the html element h1 .
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS ID selectors</title>
<style>
#main-header{
text-align: center;
color: blue;
font-weight: bold;
}
</style>
</head>
<body>
<h1 id="main-header">CSS ID Selector</h1>
</body>
</html>
c) Class Selector
The class selector chooses HTML element with a particular class property.
To choose element with a particular class, write a period (.) character.
Note: A class name cannot start with a number
Example:
In this example, the color of the html element with the class=”main-title” is blue, the font is bold and the text is in the center .
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS Class selectors</title>
<style>
.main-header{
text-align: center;
color: blue;
font-weight: bold;
}
</style>
</head>
<body>
<h1 class="main-header">CSS id Selector</h1>
</body>
</html>
d) Universal Selector
The universal selector (*) selects all HTML elements on the page. Universal Selector affects every element of the html.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS Class selectors</title>
<style>
*{
text-align: center;
color: blue;
font-weight: bold;
}
</style>
</head>
<body>
<h1>CSS Universal Selector</h1>
<h2>sub title</h2>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing it. Fugit, distinctio.</p>
</body>
</html>e) Group Selector
The group selector chooses all the HTML elements with a similar style definitions. It will be better to group the selectors, to minimize the code. To group selectors, separate each selector with a comma.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS Class selectors</title>
<style>
h1, h2, p{
text-align: center;
color: blue;
font-weight: bold;
}
</style>
</head>
<body>
<h1>CSS Grouping Selector</h1>
<h2>CSS Grouping Selector 2</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam,
nobis!
</p>
</body>
</html>2. Combinator Selectors
A combinator is something that explains the relationship between the selectors. A CSS selector can contain more than one simple selector. We can include a combinator between the simple selectors.
The four different combinators in CSS are as below:
- descendant selector (space)
- child selector (>)
- adjacent sibling selector (+)
- general sibling selector (~)
Descendant Selector
The descendant selector will match all elements that are descendants of a specified element.
The example below selects all <span> elements inside <div> elements:
div span {
background-color: blue;
}Child Selector
The child selector will select all elements that are the children of a specified element.
The example below selects all <span> elements that are children of a <div> element:
div > span {
background-color: blue;
}Adjacent Sibling Selector
The adjacent sibling selector will select all elements that are the adjacent siblings of a specified element.
Sibling elements must have the same parent element, and “adjacent” means “immediately following”.
The example below selects all <span> elements that are placed immediately after <div> elements:
div + span {
background-color: blue;
}General Sibling Selector
The general sibling selector will select all elements that are siblings of a specified element.
The example below selects all <span> elements that are siblings of <div> elements:
div ~ span {
background-color: blue;
}3. Pseudo Class Selectors
A pseudo-class is used to define a special state of an element.
It can be used to:
- Style an element when a user mouses over it
- Style visited and unvisited links differently
- Style an element when it gets focus
selector:pseudo-class {
property: value;
}Anchor Pseudo-classes
Links can be displayed in different ways:
Below are the examples.
/* unvisited link */
a:link {
color: #FF0000;
}
/* visited link */
a:visited {
color: #00FF00;
}
/* mouse over link */
a:hover {
color: #FF00FF;
}
/* selected link */
a:active {
color: #0000FF;
}4. Pseudo Element Selectors
5 – Attribute Selectors