The Basic CSS Syntax of the CSS consists three parts
selector
- HTML elements
- ID
- CLASS
- property
- value
These three parts are used as a colon (:) symbol is used to separate property and value in CSS.
HTML ELEMENT SELECTORS
In the following example, all the text in a paragraph is blue and right align; Write in a .css file
P
{
color : blue;
text-align: right;
}
Write in a .html file
<!DOCTYPE html>
<html>
<head>
<title>Test CSS</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<p>On the Insert tab, the galleries include items that are designed to coordinate with the overall look of your document. </p>
</body>
</html>
ID selector
We can also use the id selector. It creates the id attribute of a HTML tag and selects a specific element on the page. An element of a page must have a unique id. It can use only once in a page. To declare a id selector we use # (hash) character before the name of id. Write in Style.css
#redleft
{
Color:red;
text-align:left;
}
#blueright
{
Color:blue;
text-align:right;
}
Write in AllHtml.HTML
<!DOCTYPE html>
<html>
<head>
<title>Test CSS</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<p id="blueright">On the Insert tab, the galleries include items that are designed to coordinate with the overall look of your document. </p>
<p id="redleft">On the Insert tab, the galleries include items that are designed to coordinate with the overall look of your document. </p>
</body>
</html>
The class selector
We can also use the class selector. It creates the class attribute of a HTML tag. It is used to create a group of elements on the page with the same class. The looks of the elements within a class are same. To declare a class selector we use (.) DOT character before the name of the class.
Write in Style.css
.well
{
min-height : 50px;
padding : 19px;
margin-bottom : 20px;
border-left-width : thick;
border-left-style : solid;
width : 90%;
}
.BlueBox
{
background-color : #D9F0FC;
border-left-color : #0098DA;
}
.OrangeBox
{
background-color : #FDE6D7;
border-left-color : #F37135;
}
.GreenBox
{
background-color :#E8F4ED;
border-left-color :#00A859;
}
Write in HTML file
<!DOCTYPE html>
<html>
<head>
<title>Test CSS</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<p class="well">On the Insert tab, the galleries include items that are designed to coordinate with the overall look of your document. You can use these galleries to insert tables, headers, footers, lists, cover pages, and other document building blocks. </p>
<p class="well OrangeBox">On the Insert tab, the galleries include items that are designed to coordinate with the overall look of your document. You can use these galleries to insert tables, headers, footers, lists, cover pages, and other document building blocks.</p>
<p class="well GreenBox">On the Insert tab, the galleries include items that are designed to coordinate with the overall look of your document. You can use these galleries to insert tables, headers, footers, lists, cover pages, and other document building blocks. </p>
<p class="well BlueBox">On the Insert tab, the galleries include items that are designed to coordinate with the overall look of your document. You can use these galleries to insert tables, headers, footers, lists, cover pages, and other document building blocks. </p>
</body>
</html>
