Home CSS CSS Selectors in Style Sheet

CSS Selectors in Style Sheet

11
0

The CSS selectors performs most important role to select and manipulate HTML Elements and style that elements according to need.

CSS selectors are used to “select” or “find” HTML elements based on their types, classes, id, attributes, values of attributes and much more.

1. CSS id Selector

The id selector uses the id attribute of HTML element to select or find the specific element within HTML document.

To select or find an element with a specific id, write a hash character(#), followed by the id of the element.

Sample Code

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>CSS id Selector</title>
    <style type="text/css">
        #span1 {
            font-size: 20px;
            color: maroon;
        }
    </style>
</head>
<body>
    <span id="span1">The id selector example</span>
</body>
</html>

Sample Result

The id selector example
Note: An id should be unique so that you can apply style only to that specific element with same id. If you want to apply common styles to multiple HTML elements use CSS class Selector instead.

2. CSS class Selector

The class selector uses the class attribute of HTML element to select or find elements with the specific class.

To select or find an elements with a specific class, write a dot or period character(.), followed by the name of the class for HTML element(s).

Sample Code

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>CSS class Selector</title>
    <style type="text/css">
        .span1 {
            font-size: 20px;
            color: maroon;
        }
    </style>
</head>
<body>
    <span class="span1">The class selector example1</span>
    <br />
    <span class="span1">The class selector example2</span>
</body>
</html>

Sample Result

The class selector example1
The class selector example2
Note: You can also use class selector when you want to apply common styles among multiple elements within HTML document or page.

3. CSS element Selector

The element selector finds or selects HTML elements based on the element name.

Sample Code

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>CSS HTML element Selector</title>
    <style type="text/css">
        span {
            font-size: 20px;
            color: maroon;
        }
    </style>
</head>
<body>
    <span>The element selector example</span>
</body>
</html>

Sample Result

The element selector example
Note: Use element selector when there is no element id, class defined for specific element. Commonly element selector is used with element tag name without any prefix symbol or character.

Download Free Sample Code

[wpdm_file id=3]

Tip: You can get more tutorials on HTML, CSS, Asp.net, jQuery and JavaScript here.
Previous articleUnable to Serialize the Session State Error in Asp.net
Next articleRadioButtonList Validation: Validate RadioButtonList using jQuery in Asp.net
Hi there, I am Mayank, the man behind Technical Mack. I started AspnetO with a motive to educate people on various programming languages ranging from beginners to expert level. Through this blog, I aim to provide more insightful content.

LEAVE A REPLY

Please enter your comment!
Please enter your name here

two × three =