Lesson 1 – CSS3 Syntax

A number of style rules constitute CSS syntax. The browser interprets these rules and applies theme to the relevant element in your HTML5 document. Every style rule has three distinct parts.

  • Selector: we actually apply a style rule to a selector which can be any HTML5 tag such as <h1> or <p>, class, id, and attribute, etc.
  • Property: A property is the type of HTML5 tag’s attributes such as background color or border. We convert all HTML5 attributes to CSS3 properties.
  • Value: Value is the actual value assigned to properties. For example, text-transform property can have a value of either Uppercase or Lowercase.

The following is the syntax of CSS3 Style Rule.

selector {property: value};

Now we explain the syntax by filling the syntax. For example, you can define the text color of a paragraph as under.

p {color:  #333;}

In the above example, p, standing for paragraph is a selector, color is the property, and #333 is the value assigned to the property.

There are many different ways to assign selectors, depending on your requirements and taste. We describe the major types of selectors, one by one.

The Type Selectors

The Type selectors are, in fact, HTML5 elements such as Headings (h1, h2, h3, h4, h5, h6), Paragraphs (p), Division (div), Navbar (nav), and so on. Here is one more example in which we add border and width to a paragraph.

p {
    border: 1px solid #333;
    width: 50%;
}

Universal Selectors

A universal selector is applicable to every element in a document, helping you to style the whole document together instead of targeting individual elements of a specific type.

* {
    Background-color: #000;
}

The above code will render the background color of all the elements in the document in black.

The Class Selectors

You can also add a class attribute to more than one elements. Such a selector will format all the elements having that class according to defined rule.

.color {
    color: #000
}

The above code will only render the text of the paragraphs with the class attribute set to color in black.

All the classes start with a dot (.) and you can add as many classes you as like to an element.

The ID Selectors

It is possible to format an element based on its id attribute. However, you can use a particular id attribute only once in an HTML5 document. Multiple elements in a single document cannot have the same id.

#color {
    color: #000
}

The above rule will render the text of the element having an id attribute with a value of color in black.

The Descendant Selectors

You will use descendant selectors if you want to format a particular element inside a particular element.

p h1{
    color: #000
}

The above rule will only change the text color of level one heading which is nested inside the paragraph element.

The Child Selectors

Although child selectors look similar to descendant selectors yet their functionality is different. For example, the following rule will only render the text of paragraphs which are direct children of the body element in red.

body > p {
    color: red;
}

The Attribute Selectors

These types of selectors only format elements with certain attributes. In the example below, we apply styles to all the input elements with the type attribute set to “text.”

input [type="text"] {
    color: #000;
    font-size: 18px;
    padding: 5px 10px 15px 20px;
}

The above method offers many benefits. For instance, the type attributes with the values of “submit”, “reset”, and “email”, etc. remain unaffected while you style type attribute with value of text.

It is also possible to apply multiple style rules to the same element as explained by the above example. You will also separate all the property and value pairs with a semicolon (;).

In lecture 2, we will learn how to include CSS3 in an HTML5 document.