×
FREE ASSISTANCE FOR THE INQUISITIVE PEOPLE
Tutorial Topics
X
softetechnologies
CSS Introduction CSS Link Property
Basic CSS Syntax - CSS 3.0
3149    Arnab De    10/05/2017

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.

Basic CSS Syntax
Basic CSS Syntax

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;
	}
softetechnologies

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>
ELEMENT SELECTORS
ELEMENT SELECTORS

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;
}
softetechnologies

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>
use of ID Selector
use of ID Selector

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

softetechnologies
.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>
use of class Selector
use of class Selector
CSS Introduction CSS Link Property
softetechnologies
Author Details
Arnab De
I have over 16 years of experience working as an IT professional, ranging from teaching at my own institute to being a computer faculty at different leading institute across Kolkata. I also work as a web developer and designer, having worked for renowned companies and brand. Through tutorialathome, I wish to share my years of knowledge with the readers.
Enter New Comment
Comment History
No Comment Found Yet.
Swami Vivekananda
If the poor cannot come to education, education must reach them, at the plough, in the bakery factor
Swami Vivekananda
854
64.31
Today So Far
Total View (Lakh)
softetechnologies
26/05/2018     47403
25/06/2018     39491
01/01/2018     39105
28/06/2017     36999
02/08/2017     35724
01/08/2017     29961
06/07/2017     29748
15/05/2017     29229
14/07/2017     25118
11/09/2018     24261
softetechnologies