Syntax and Style – CSS Tutorial 2
The syntax and style of CSS are easy to understand and learn. CSS syntax consists of the rules for the application of style on HTML tags which are rendered by the browser. A style consists of three main parts.
- Selector
- Property
- Value
Generic Way: selector { property: value }
<!DOCTYPE html>
<html>
<head>
<style>
h1{
font-size: 20px;
}
</style>
</head>
<body>
<h1>
Heading 20px
</h1>
</body>
</html>
In the given code, h1 is a selector which is the name of the tag. font-size is CSS property which tells what change we want to make in style of HTML tag. 20px is the value for that particular property. Curly braces define the block for style rules to be defined. In this example, we are changing the font size of h1 heading to 20px. Similarly, see the example below.
<!DOCTYPE html>
<html>
<head>
<style>
h1{
font-size: 20px;
color: green;
}
</style>
</head>
<body>
<h1>
Heading 20px
</h1>
</body>
</html>
This is example of Multiple Style Rules. In this example, we are not just changing the font size of heading but also changing the color of the text to green. Here, we have applied multiple CSS properties to an HTML tag. You can see each property is separated by colon ( : ) from its value and ended with semi-colon ( ; ). If you are going to apply multiple CSS properties to a tag, you will have to end each style with semi-colon. However, if you want to apply a single property, you may skip semi-colon as shown in the code below.
<!DOCTYPE html>
<html>
<head>
<style>
p{
color: blue;
}
</style>
</head>
<body>
<p>
Hi, this is paragraph of blue color.
</p>
</body>
</html>
p is HTML tag for paragraph, color is CSS property and blue is value for color.
Selector:
A selector helps us in the identification of a particular HTML code on which the style will be applied. In CSS, we have three main types of selectors.
- Tag
- Class
- ID
HTML code can be selected using tag, class name or id attribute on which we want to apply CSS code for styling. There are different scenarios for the application of the above selectors.
Tag:
A tag is an HTML block. We can use a tag name for applying style on a particular tag name. We use tag when we want to apply same style on a particular tag throughout the document. For example, see the given code.
<!DOCTYPE html>
<html>
<head>
<style>
h1{
color: yellow;
background-color: black;
}
</style>
</head>
<body>
<h1>
Hi, CSS
</h1>
</body>
</html>
Class:
If we want to apply same style on various parts of code in an HTML document, we use class selector. See the example code below, class name .colors applies the same style on all three headings.
<!DOCTYPE html>
<html>
<head>
<style>
.colors{
color: yellow;
background-color: black;
}
</style>
</head>
<body>
<h1 class="colors">
Heading 1
</h1>
<h2 class="colors">
Heading 2
</h2>
<h3 class="colors">
Heading 3
</h3>
</body>
</html>
If we want to apply the same style on only h1 type headings with class name .colors, we can do as below.
<!DOCTYPE html>
<html>
<head>
<style>
h1.colors{
color: yellow;
background-color: black;
}
</style>
</head>
<body>
<h1 class="colors">
Heading 1
</h1>
<h2 class="colors">
Heading 2
</h2>
<h1 class="colors">
Heading 1
</h1>
</body>
</html>
ID:
If we have multiple h1 headings in an HTML document, but we want to apply a style on a specific h1 heading in the document, we use id selector. For example, in the given below example, CSS attributes defined in #head will be applied to the heading with id head only. It means size of h1 with id head will be 50px while without id head, size of h1 will be 20px.
<!DOCTYPE html>
<html>
<head>
<style>
.colors{
color: yellow;
background-color: black;
font-size: 20px;
}
#head{
font-size: 50px;
}
</style>
</head>
<body>
<h1 id="head" class="colors">
Heading 50px
</h1>
<h1 class="colors">
Heading 20px
</h2>
</body>
</html>
Similarly, if we want to apply red color to text of heading 1 with id #red, we can do as follows.
<!DOCTYPE html>
<html>
<head>
<style>
h1#red {
color: red;
font-size: 50px;
}
.colors{
font-size: 20px;
}
</style>
</head>
<body>
<h1 id="red" class="colors">
Heading 50px
</h1>
<h1 class="colors">
Heading 20px
</h2>
</body>
</html>
Universal Selector:
In universal selector, instead of applying a style by selecting elements of HTML page, we use an asterisk to apply a style on all the elements in a page. For example, if we want to change the background of all the elements to black, we can do as below.
<!DOCTYPE html>
<html>
<head>
<style>
* {
background-color: black;
}
</style>
</head>
<body>
<h1 id="head" class="colors">
Heading 50px
</h1>
<h1 class="colors">
Heading 20px
</h2>
</body>
</html>
