CSS Syntax and CSS Selector With Example
CSS Syntax :
Basically CSS rule-set consist of selector and declaration block.It means in CSS there is all about properties and value.So if you get strong knowledge of properties and their values then you can create any type of website : Static or Dynamic website.
Watch videos of CSS on YouTube, Click on the below link :
 |
| CSS Syntax and Selector |
Explanation :
Selector : Basically Selector points to the HTML element on which we want to style.
Declaration : Declaration block contain more than one block and each block is separated by semi-colon(;) symbol.
Each Declaration part contain property and their respective value in-front-of forwarded by colon (:) symbol.
CSS Declaration part always ended by semi-colon(;) and declaration blocks wrapped by curly bracket {}.
In the above example, <p> element color is red and their font-size will be 15px.
To run the above example and show output on web browser then do the following thing:
<!DOCTYPE html>
<html>
<head>
<style>
p{color:red; font-size:15px;}
</style>
</head>
<body>
<p>Welcome to Tech Talk Tricks</p>
<body>
</html>
Save the above marked code by any name followed by .html. Ex : demo.html
After save right click on the saved file and open with browser then you can now see the output of the above mentioned document.
CSS Selectors :
CSS Selectors :
We can use CSS Selector to find or select HTML element based on their element name,class, id, attribute or more.
The Element Selector:
You can select HTML element by element name and after that you can apply CSS on it.So above example is the Element Selector based example.
The Id Selector :
You can select HTML element by Id selector also to apply CSS on it. Whenever we want to use Id selector then provide # before Id Name.
Example :
<!DOCTYPE html>
<html>
<head>
<style>
#para{color:red; font-size:15px;}
</style>
</head>
<body>
<p id = "para">Welcome to Tech Talk Tricks</p>
<body>
</html>
As you can see above example red highlighted part is the Id selector use.First we need to provide the id on which we want to apply CSS, After that for apply CSS use # before Id selector name between <style></style> and provide properties and value for it.
Note : An Id cannot be start with Number.
The Class Selector :
As you can see above example red highlighted part is the Id selector use.First we need to provide the id on which we want to apply CSS, After that for apply CSS use # before Id selector name between <style></style> and provide properties and value for it.
Note : An Id cannot be start with Number.
The Class Selector :
You can select HTML element by Class selector also to apply CSS on it.
Whenever we want to use Class selector then provide .(dot) before Class Name.
Example :
<!DOCTYPE html>
<html>
<head>
<style>
.para{color:red; font-size:15px;}
</style>
</head>
<body>
<p class= "para">Welcome to Tech Talk Tricks</p>
<body>
</html>
Note : A Class Name cannot be start with Number.
No comments:
Post a Comment
Share your views after read this post