Referencing elements correctly using CSS

There are a few ways to reference elements from CSS. This is known as the selector syntax.

The key consideration is to ensure that you reference elements such that the styles affect only the elements you want affected.

Referencing using element name

Elements can be referenced from CSS by their element name.

In the following CSS styles are applied to all paragraph elements, article elements, and div elements:

<head>
<style type="text/css">
    /* STYLING USING ELEMENT NAME*/
    p{
        font-size:20px;
        color:green;
        }
    article{
        width:300px;
        height:300px;
        background-color:#00ffff;
        }
    div{
        width:200px;
        height:200px;
        background-color:#ff6a00;
        margin:auto;     
        }
</style>
</head>
<body>
    <!-- STYLING USING ELEMENT NAME-->
    <h3>1 . STYLING USING ELEMENT NAME</h3>
    <article>
        <div>
            <p>
                Styling article, div and p USING THEIR ELEMENT NAME
            </p>
        </div>
    </article>
</body>

Referencing using element classes

The next method to select elements is through the use of element classes.

In the following CSS styles are applied to elements that have the assigned classes to them:

<head>
<style type="text/css">
     /* STYLE USING CLASS*/
    .boldHeader{
        font-weight:700;
        }
    .largeTitle{
        letter-spacing:3px;
        }
</style>
</head>
<body>
    <h3>2 . STYLING USING CLASS</h3>
    <h5 class="boldHeader">TITLE - STYLED USING CLASS ( font-weight:700; )</h5>
    <h5 class="largeTitle">TITLE - STYLED USING CLASS ( letter-spacing:3px; )</h5>
</body>

Referencing using element ID's

The most granular method to reference HTML elements from CSS is by using the ID's.

The difference between ID's and classes is that ID's are unique:

Each element can have only one ID
Each page can have only one element with that ID

In the following CSS styles are applied to element that have the assigned ID's to it:

<head>
<style type="text/css">
    #colorHeader{
        word-spacing:125%;
        color:red;
        }
</style>
</head>
<body>
    <h5 id="colorHeader">TITLE - STYLED USING ID ( color:red; )</h5>
</body>

Referencing using elements name, classes and ID's

You can apply styles to specific elements by using their name and their ID's or classes.

The following CSS code demonstrates this:

<head>
<style type="text/css">
    /* ELEMENT NAME AND CLASS */
    p.largeTitle{
        font-size:18px;
        letter-spacing:5px;
        }
    /* ELEMENT NAME AND ID */
    p#largeT{
        font-size:28px;
        letter-spacing:9px;
        }
</style>
</head>
<body>
    <p>THIS PARAGRAF DOES NOT CONTAIN  class or id</p>
    <p class="largeParagraf">THIS PARAGRAF CONTAIN THE class="largeTitle"</p>
    <p class="largeP">THIS PARAGRAF CONTAIN THE id="largeT"</p>
</body>

Referencing elements by using grouping

In some cases, you might want to apply the same style to many elements of different types. In this case, you can group them and define the styles only once.

In the following CSS code all elements are grouped because they have the same styles applied to them:

<head>
<style type="text/css">
    /* STYLE USING GROUPING*/
    .grouping p, H1, H2  { 
        text-decoration:underline;
        } 
</style>
</head>
<body>
    <article class="grouping">
        <h3>4 . GROUPING STYLING : ( p, H1, H2  { text-decoration:underline; } )</h3>
        <p>TEXT</p>
        <h1>HEDAR 1</h1>
        <h2>HEADER 2</h2>
    </article>
</body>

Ads Right