CSS class and ID selector

CSS Selector:

Small examples of style sheets are presented they are considered as h1 and p element selectors. These basic types of selectors are called selectors of element category. The properties that are assigned for these two selectors will be applicable for every H1 and P element of the document. A key step in becoming an expert at CSS is to acquire special knowledge on the selectors, that is, to select the most suitable selectors and to use them wisely. For example – Notice the two graphical representations given below:

selector

declaration

Universal Selector (*):

This is a wildcard selector for each HTML tag in the document. This selector does not support for IE6.

Example:

HTML Code:

<!DOCTYPE HTML>

<html>
<style>
*{margin:0; padding:0px;}
h1{font-size:1em;}
p{font-size:1em;}
</style>
<body>
<h1> CSS3 is Awesome</h1>
<p> HTM5 and CSS3 are at the cutting edge of web design.</p>
</body>
</html>

Display in Browser:

type selector

Type (or tag) Selector:

This selector’s work is to apply CSS properties to every item on the HTML tag on the web page. These selectors are used mainly to determine the basic style of the entire website.

Example:

HTML Code:

<!DOCTYPE HTML>

<html>
<head>
<style type="text/css">
p{font-family: Papyrus, Arial; color:#fa4b2a; background:#eee;}
</style>
</head>
<body>
<p>CSS3 along with HTML5 is at the cutting edge of the web design and web development.</p>
</body>
</html>


Display in Browser:

type selector

CSS class selector

When we want that HTML tags are changed in each event will be web pages – they do not pair for the use of selectors, but in a different form than what we would like to see some common tag?

For example, some heading and paragraph will be red, so maybe they are visible, especially where the other headings and paragraphs are gray. Class selector is used in such cases. Let’s see an example of a class selector graphically.

css class selector picture

In the form of a variety of groups are characterized by a style to apply to the class. Class selector or selectors with multiple tags can be used with one. Before class name, a dot (.) symbol is to be inserted. For example: By using .myClass a CSS class can be declared. Note that no number can be used after (.) dot.

Note: Properties to build components such as custom html tag: <div> and <span> element can be used in the class.

Example:

HTML Code:

<!DOCTYPE html>
<html>
<head>
<style>
.introduction {
    background-color: green;
	color: white;}
</style>
</head>
<body>

<h1>Welcome to My web home page</h1>

<div class="introduction">
  <p>My name is Ganesh Karmakar.</p>
  <p>I live Dhaka.</p>
</div>

<p>My best friend is Swanpon Biswas.</p>

</body>
</html>

 

Display in Browser:

css class selector

Basic Syntax:

If you want to create a CSS ID, then the general syntax will be the following:

#id-name{property:value;}
#myID{color:green;}

Again, if you want to use the same id name for different elements, but you want to set different styles for each, you can add the hash (#) before the HTML element name.

html-element-name#id-name{property:value;}
p#myID{color:green;}

Use a class in multiple elements:

.textcolor{color:#FF0066;}
<p class=”textcolor”> Paragraph in class selector</p>
<h1 class=”textcolor”> Heading in class selector</h1>

In the above code, more than two elements of the same class name were used, such as (.text color).

Using multiple classes at the same element:

.textcolor1{color:#00FF00;}
.textcolor2{color:#0000FF;}

<p class=”textcolor1″> Paragraph in class textcolor1</p>
<p class=”textcolor2″> Paragraph in class textcolor2</p>

In the above code, a different class name has been used in the same elements (.textcolor1 and .textcolor2).

Example:

HTML Code:

<html>
<head>
<style type="text/css">
h1.textcolor{color:#FF0066;}
.textcolor1{color:#0000FF;}
.textcolor2{color:#00ff00;}
</style>
</head>
<body>
<h1 class="textcolor">heading</h1>
<h2 class="textcolor">Wrong implementation</h2>
<p class="textcolor1">Paragraph in class textcolor1</p>
<p class="textcolor2">Paragraph in class textcolor2</p>
<h1 class="textcolor2">heading</h1>


Display in Browser:

css textcolor

CSS ID selector:

Like the class ID selector applies a style to elements with the same ID attribute. The id attribute is used to connect to a particular individual identifier. It can point to a single element can be used only once per page. Selectors to create an id name to be added to the # mark.

Example:# caution

Note: There can be both class and ID attribute of any element. But the same name should not be used for both. Notice the graphical presentation given below-

css id selector picture

Example:

HTML Code:

<!DOCTYPE html>
<html>
<head>
<style>
#firstname {background-color: Green; color: white;}
#hometown{background-color: red; color: yellow;}
</style>
</head>
<body>

<h1>Welcome to My Homepage</h1>

<div>
  <p id="firstname">My name is Ganesh Karmakar.</p>
  <p id="hometown">I live in Dhaka.</p>
</div>

<p>My best friend is Swapon Biswas.</p>

</body>
</html>

Display in Browser:

example css id selector

Difference between CSS class and Id selector:

1. Class can be used several times but id is used only once.

2. Generally id is used for layouts and container elements. Each element can have only one id. It is also noticeable that every page can have only one element containing that id.

3. Classes are used when you want to give the same style to many elements. For example: If you want to sort all the images in your html page in the same style, use class instead of id.

4.On the basis of syntax, ID and Class are different from each other. Such as:

#sample1{color: green; font-weight: bold;}
.sample2{color: green; font-weight: bold;}
<div id=”sample1″></div>
<div id=”sample2″></div>

Group selection:

The selectors are those things that we apply opposite a style. If you wish, a style of many selectors can be applied. Only selectors are separated by a comma. Such as: h1,h2,h3,h4,h5,h6 {color:blue}

Application of Multiple Properties:

To apply multiple properties, each declaration must be separated with a semicolon. Such as: h1{color:blue; font-family: arial, helvetica, “sans serif”}

A style can be divided into two fundamentally styles. Such as:

1. Selector – Notify web browsers about what to format.

2. Declaration Group – List one or more declarations eligible to apply of the selector.

Each declaration Properties are identified by a colon. Then there is the property value which is identified by the semicolon, which can also cancel the declaration.

h1{color:green; margin: 5px;}

In the case of the above CSS, there are selectors in the first line and the above CSS will apply the green color to the HTML h1 tags and set a 5 pixel margin around of heading.

Included selectors in group:

Here you will be shown a shortcut style rule. If you ever need to apply some numerical elements of a style property, then you can restrict the selectors into a single rule. They must be separated by comma.By grouping, future editing can be done more efficiently, it is easier to write code, so the code minimizes and file size is reduced.

h1,h2,p{color:#FF0066;}

Example:

This example has been shown to use a grouping selector or tag without the use of a separate tag or selector for the color of a paragraph and 2 headings, In this case, each selector or tag of the grouping selector must be written separately by commas (,) and for these, just type in a single line using a common property and value.

HTML Code:

<html>
<head>
<style type="text/css">
h1,h3,p {color: #FF0066;}
</style>
</head>
<body>
	<h1>Grouped Selectors</h1>
	<h2>This one not in the group</h2>
	<h3>This elements also grouped</h3>
This line is not in the grouped selector.
<p>You can group and home things to limit the measure of code you compose, this will limit your template estimate and will enable pages to stack quicker. When grouping you isolate every selector by a comma. </p>
</body>
</html>

Display in Browser:

css group selector

2 thoughts on “CSS class and ID selector

  1. Can I simply just say what a relief to uncover somebody who actually understands what they are
    talking about over the internet. You actually
    realize how to bring an issue to light and make it important.
    More and more people really need to check this out and understand this side of the story.
    I was surprised you are not more popular since you
    surely have the gift.

  2. Amazing! This blog looks exactly like my old one! It’s
    on a entirely different subject but it has pretty much the same page
    layout and design. Outstanding choice of colors!

Leave a Reply

Your email address will not be published. Required fields are marked *