CSS Syntax & Selectors

How to use CSS is important to understand. This is the base of our all learning that we will be doing together in this whole course.

A CSS comprises of style rules that are interpreted by the browser and then applied to the corresponding elements in your document. A style rule is made of three parts ?

  • Selector ? A selector is an HTML tag at which a style will be applied. This could be any tag like <h1> or <table> etc.

  • Property - A property is a type of attribute of HTML tag. Put simply, all the HTML attributes are converted into CSS properties. They could be color, border etc.

  • Value - Values are assigned to properties. For example, color property can have value either red or #F1F1F1 etc.

Example :

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

In abvove example :- "p" is HTML Tag and selector above. We are using "propoerty" -> "color" here and "value" to property as -> "red"

So,  to refer and element in HTML, we use various selectors.

CSS Selectors

CSS selectors are used to "find" (or select) HTML elements based on their element name, id, class, attribute, and more.

The HTML Tag Selector

The html tag selector selects elements based on the html tag name.

You can select all "<p>" elements on a page like above  (in above case, all <p> elements will be center-aligned, with a red text color):

The id Selector

The id selector uses the id attribute of an HTML element to select a specific element.  The id of an element should be unique as we learnt in this chapter :- (HTML Attributes)  within a page, so the id selector is used to select one unique element!

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

For an example : The style rule below will be applied to the HTML element with id="para":

#para {
    text-align: right;
    color: red;
}

Note: An id name cannot start with a number!

The class Selector

The class selector selects elements with a specific class attribute.  To select elements with a specific class, write a period (.) character, followed by the name of the class. To know little more information about Class go to HTML Attributes.

In the example below, all HTML elements with class="paragraph" will be red and center-aligned:

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

You can also specify any particular HTML Element of the Given class for an example :-

p.notice {
    color: red;
    font-weight: bold;
}

In above example, we are mentioning, only "<p>" which has class "notice" like "<p class='notice'>" will be applied above CSS rules.

We can also use multiple class for any HTML Tag element like :-

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Example CSS</title>


    <style>
        p.notice {
            color: red;
            font-weight: bold;
        }
        .box {
            padding: 20px;
            font-size: 13px;
        }
    </style>

</head>
<body>

    <p class="notice box">
        This is important notice inside box
    </p>

</body>
</html>

In above example, you can see, we are using two class for <p> "notice" and "box" ,  and inside "style" tag in "<head>" you can see two classes being created.

Note: A class name cannot start with a number!

Grouping Selectors

If you have elements with the same style definitions, like this:

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

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

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

It will be better to group the selectors, to minimize the code.

To group selectors, separate each selector with a comma.

In the example below we have grouped the selectors from the code above:

h1, h2, p {
    text-align: center;
    color: red;
}

 


Loading ...

Related Results :

  1. CSS Syntax & Selectors
  2. CSS Classes
  3. CSS Classes Part 2
  4. CSS ID Attribute
  5. CSS class reuse method
Note :
  • Related Posts are generally User Blog posts.
  • or Other tutorials from other networks of w3clan.com.
  • Any registered user can create related posts based on search term tags.

About the Author