CSS Syntax and Selectors

More options for you.


General KnowledgeEnglish GrammarMathScienceIQ-TestQuiz-Test

A CSS be made up of style rules, a style rule is made of a selector and a declaration block.

HTML-Image here

CSS Syntax

A selector is an HTML element at which a style will be applied like: h1(heading), p(paragraph) it could be any element.
The declaration block takes on one or more declarations, they are separated by the semicolon.
Each declaration is made of a CSS property name and a value, they are separated by the colon.
It is used to be a semicolon for the end of a declaration.
The declaration blocks are enclosed in curly brackets{}.

Example:

Now, we are going to style <p>(paragraph) element with CSS style and have a look how the browser display it.

HTML Editor

<!DOCTYPE html>
<html>
<head>
<title> Title of document </title>
<style>
p {
font-size:20px;
color:green;
}
</style>
</head>
<body>
<h1> This heading is not styled. </h1>
<p> This paragraph is styled as font-size 20px, color green.</p>
</body>
</html>

Web Browser

This heading is not styled.

This paragraph is styled as font-size 20px and color green.

CSS Selectors

CSS selectors are used to select HTML elements(element name, id, class).
There are three different kinds of CSS selectors.
(i) HTML selector like: selector { property:value; }
(ii) class selector like: .selector { property:value; }
(iii) id selector like: #selector { property:value; }

HTML Selector

An HTML selector is the text part of an HTML tag.
HTML selectors are used to redefine the general look for an HTML tag.

By the way of the example below, you can select all <p>(paragraph) elements on a page(This style is as "text-align: center and color: green").

HTML Editor

<!DOCTYPE html>
<html>
<head>
<title> Title of document </title>
<style>
p {
text-align:center;
color:green;
}
</style>
</head>
<body>
<h1> This heading is not styled. </h1>
<p> This style will act on every paragraph.</p>
<p> Text-align of the paragraph is center.</p>
<p> This also is same.</p>
</body>
</html>

Web Browser

This heading is not styled.

This style will act on every paragraph.

Text-align of the paragraph is center.

This also is same.

The class selector

The class selector can be used to select an HTML element that have a class attribute.
You can choose any name for the class of an element but that name cannot start with a numeric.
Type a full stop "." befor the class of an element when you use it in a selector.
You can use the same class value for multiple elements in a document.



The rule of the example below makes more than one <p>(paragraph) elements with class "ph-1" bold, center and green.

HTML Editor

<!DOCTYPE html>
<html>
<head>
<title> Title of document </title>
<style>
.ph-1 {
font-weight:bold;
text-align:center;
color:green;
}
</style>
</head>
<body>
<p class="ph-1"> Here is the action of the class.</p>
<p> This paragraph element is not under the class.</p>
<p class="ph-1"> This paragraph is affected by class.</p>
</body>
</html>

Web Browser

Here is the action of the class.

This paragraph element is not under the class.

This paragraph is affected by class.

The id selector

The id selector can be used to select an HTML element that have an id attribute.
You can choose any name for the id of an element but that name cannot start with a numeric.
The id of an element should be unique in a document.
Type a number sign "#" befor the id of an element when you use it in a selector.



The rule of the example below makes the one <p>(paragraph) element with id "ph-1" bold, center and green.

HTML Editor

<!DOCTYPE html>
<html>
<head>
<title> Title of document </title>
<style>
#ph-1 {
font-weight:bold;
text-align:center;
color:green;
}
</style>
</head>
<body>
<p id="ph-1"> Here is the action of the id.</p>
<p> This paragraph is not under the id element.</p>
<p> This also is not.</p>
</body>
</html>

Web Browser

Here is the action of the id.

This paragraph is not under the id element.

This also is not.

Note: If you have more elements with the same style, it is better to group the selectors.
We will learn about grouping selector later.



More options for you.


General KnowledgeEnglish GrammarMathScienceIQ-TestQuiz-Test