Best Source of Web Development Tutorials, Articles, Programming Codes, Free PHP Scripts, PHP Tutorials and Much More
Login
Username:
Password:

How to Use Selectors in CSS

Selectors in CSS

By: programmersbank

The selector is an HTML element or tag that you define for different styles, the property is the attribute you wish to change, and each property can take a value. The property and value are surrounded by curly braces and separated by a colon:

HTML selectors
Used to define styles associated to HTML tags.

<HTML>
<HEAD>
<style type="text/css">

p{
text-align:center;
font-weight:bold;
color:red
}

body{
background-color:red;
}

</style>  
</HEAD>
<BODY>
<P>This is paragraph</P>
</BODY>
</HTML> 

In above example, p and body selectors are looks like <p> and <body>.

Class selectors
Used to define styles that can be used without redefining plain HTML tags.

<HTML>
<HEAD>
<style type="text/css">

.paragraph{
text-align:center;
font-weight:bold;
color:red
}

</style>  
</HEAD>
<BODY>
<P class="paragraph">This is paragraph</P>
</BODY>
</HTML> 

 

ID selectors
Used to define styles relating to objects with a unique ID (ID selector most often used in layers)
The property is the attribute you wish to change, and each property holds a value. The property and value are separated by a colon and surrounded by curly braces for example we define a selector body with background-color property and background-color property has a color any value:

body {background-color:red}

If you wish to specify more than one property, you must separate each property with semi-colon. For example we wish to define a left aligned paragraph with blue color, the example is shown below:

P {text-align:center;color:red}

To make the style definitions more readable, you can describe one property on each line, like this:

P
{
text-align: center;
color: black;
font-family: arial
}

Grouping
You can group selectors. Separate each selector with a comma. In the example below we have grouped all the header elements. All header elements will be green:

h1,h2,h3,h4,h5,h6
{
text-align:left;
}

Tutorial Pages

Bookmark This Page