What is CSS Selector Tag?: In addition to setting styles for HTML elements, CSS allows you to specify your own selectors These selectors define which HTML elements you are going to be manipulating with CSS code. That is to say that when setting CSS codes, you have to give it a unique name which is called the “selector” This selector is what you will then use to call the CSS code up in your HTML document. Another way of seeing the selector is that: it is the HTML element which we want to style
CSS Elements
In CSS, three basic things must be taken note of; which are:
1. The “Selector”: As said earlier, this defines your HTML element which you will be manipulating with the CSS code.
2. The “Property”: This is the CSS element that you wish to manipulate.
3. The “Value”: This represents the value of the specified property you wish to manipulate.
In other words, CSS code takes this format:
Selector {Property: Value}
When you look at the format of a typical CSS, you find out that what starts the statement is a dot(“.”).In CSS, this is what we call the “Class Selector”. The class selector is basically used in specifying a style for a group of elements. Specifies the different parts of the web page created by HTML through CSS, to determine the structure, size, shape, position, color, mobility, etc. The selector is used to pinpoint any part of the webpage that HTML has created. There are several selectors used in CSS.
Types of Selector Tags
Notable among these are…
- Tag Selector
- Class selectors
- ID Selector
CSS Tag Selector
When HTML tags are used to specifically identify which section of web pages in CSS, they are called selectors. Such as
body {background: # FC9;
font-family: Tahoma;
colour: # F60;
Tag Selector Example
<html>
<head>
<title> Selectors </title>
<style>
body {background: # FC9;
font-family: Tahoma;
<body>
<marquee>
<h1> www.tutorials.freshersnow.com </h1>
</marquee>
</body>
</html>
body {background: # FC9; font-family: Tahoma;
colour: #F60;} Here body tags selector
CSS Class Selectors
Class Selector, one of the main methods of identifying any part of a web page or one or more elements in CSS. Multiple components can be identified by the same class selector, so it helps to reduce the amount of coding.
Class Selectors Syntax
CSS code for <p class = "mar"> 24/7 support </ p>
mar {colour: # C03;
font-size: 36px}
To specify the class selector, the class key is used in the HTML tag, after which the name of the class is written in double-quotes with a symbol. Such as <p class = “mar”>. Here Mar is the class name. (.) The dotted mark is used to mark the class in the style field.
Class Selectors Example
<html>
<head>
<title> Selectors </title>
<style>
body {background: #FFC)
post {colour: #066;
font-family: Tahoma;
text-align: justify;}
mar {colour: # C03;
font-size: 36px}
</style>
</head>
<body>
<h1> www.tutorials.freshersnow.com</h1>
<p class = "post">
The tutorials.freshersnow is the best tutorial website.</p>
<p class="post1">
Open Notepad and enter the code at the top and save the file from the File menu by clicking on the Save as type: Save as type: All files, save the index.html file with Mozilla Firefox or Google Chrome and check.
To Add font for both paragraphs
<p class = "post"> The tutorial.freshersnow website for tutorial for programming Languages
<p class = "post"> The Freshersnow website for latest upadtes.
post {colour: #066;
font-family: Tahoma;
text-align: justify;}
Through this, the style has been set for both paragraphs defined in the post name.
Add Color to Paragraph
<p class = "mar"> The tutorials.freshersnow is the best ewbsite.
mar {colour: #C03;
font-size: 36px}
The style set for the class paragraph defined by mar is defined by.
CSS ID Selector
ID selector, a popular method for marking a section or any element of CSS on a Web page. Multiple elements can not be identified by the same ID selectors as class selectors.Such as <p id =”post1″> We are the Hostgator hosting provider. The worldwide technical and support team information CSS code for </p>.
ID Selector Syntax
# post1 (colour: # 066; font-family: Tahoma; text-align: justify;} text-align: justify)
To specify the ID selector, the id key is used in the HTML tag, after which the name of the class is written in double quotes with the sign. Such as <p id =”post1″>. Here is the post1 ID name. Style Sheet (#) is used to mark the ID.
ID Selector Example
<html>
<head>
<title> Selectors </title>
<style>
body {background: #FFC}
#post1 {colour: #066;
font-family: Tahoma;text-align: justify;}
#post2 {colour: #639;
font-family: Tahoma;
text-align: justify;}
#mar (colour: # C03;
font-size: 36px}
</style>
</head>
<body>
<h1>www.tutorials.freshersnow.com</h1>
<p id "post1">
The tutorials.freshersnow is the best tutorial website.
</p>
<p id = "post2">
Open a Notepad and enter the code at the top and save the file from the File menu by clicking on Save as type: Save as type: All files, save the index.html file with Mozilla Firefox or Google Chrome and check.
Styling the above Posts
<p id ="post1"> set an ID for post 1 for a paragraph.
<p id "post 2"> has specified an ID for post 2 for another paragraph.
#post1 {colour:#066;
font-family: Tahoma;
text-align: justify;}
With this, the style defined for the paragraph with ID defined as post1.
#post2 {colour: #639;
font-family: Tahoma;
text-align: justify;}
This is the style defined for the paragraph with the ID set as post2.
Code Writing Method
To write any program, you need to do coding using an editor. The default editor of the Windows operating system, notepad, can be used primarily as an editor for CSS, and if you use Dreamweaver as an advanced editor for an additional benefit, the job will be a lot easier.