CSS Syntax
CSS syntax consists of 3 parts: a selector, a property and a value
selector {
property: value;
}The selector is an HTML element that you want to style. This could be any tag like <h1>, <p>, etc. Each selector can have one and more properties.
The property is the style attribute of an HTML tag. All HTML attributes are converted into CSS properties (color, border, etc.). Each property has its value.
The value is assigned to the property. For example, the value of the color property can be either red or #F1F1F1.
Example of a CSS syntax:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
a {
color: #1c87c9;
}
</style>
</head>
<body>
<a>The color of this link is #1c87c9.</a>
</body>
</html>Result
In the above example <a> tag is a selector, color is property, and #1c87c9 is the value of the property.
As you can see the property and its value are written inside the curly brackets and separated with a colon.
The selector also can have more than one property, separated by a semicolon.
CSS Comments¶
You can use CSS comments to add explanations to the code. They are not displayed because browsers ignore them.
The beginning and the end of a CSS comment is specified by "/*" and "*/", respectively:
/*This is some comment*/As you see, we have written our text inside "/*" and "*/", which are not displayed on browsers. So when you don't want to show any information in your CSS, write it between "/*" and "*/".
Example of CSS comments:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
h1 {
padding-left: 10px;
font-size: 26px;
line-height: 30px;
/*color:red;*/
}
p {
color: #1c87c9;
/*font-size:25px;
border:1px solid red;
*/
padding: 10px;
line-height: 30px;
}
</style>
</head>
<body>
<h1>CSS Comments</h1>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</p>
</body>
</html>
0 Comments
CAN FEEDBACK
Emoji