CSS Tutorial – Lesson 1 Part II

In the previous lesson we learned how to define a CSS rule, and we had shown that a CSS rule consists of two parts a selector and a declaration.

In the previous lesson we talked that in the selector we might write the html element we want to style. In our lesson today, completing with CSS rules, we’ll see now other types of selectors,

The ID selector:

CSS allows you to specify a style for a single element, regardless to its tag, depending on its id attribute. as you know, in XHTML each element has an id attribute, and this id must be unique.

To define a CSS rule depending on the ID selector below the syntax for it:

Example:

#theID

{

font-size: 14px;

}

Notes:

• The above CSS rule will be applied for any element whose id = theID,
• The ID selector must start with #.

The Class Selector:

Unlike the ID selector, the class selector allows us to define a rule for multiple elements regardless to their tag. The class selector enables us to define a common style for common elements, so that each element whose class same as the selector, will be styled according to the rule it follows.

Example:

.Justifiable

{

text-align:justify;

font-size:12px;

color: black;

}

Notes:

• The class selector must start with a dot.
• and used with the class attribute for any element.

In some circumstances, we might need to apply some styles for specific elements, for example for some divs we might need their background-color be the same, with font-size 15px for example, CSS allows us to define specific rules for specific elements, here is the syntax:

Example:

div.Pink

{

background-color: pink;

font-size:15px;

}

Notes:

• The above rule will be applied for all elements whose class is Pink, so we restricted the rule with the element div, and internally, restricted it to divs whose class is Pink, so this rule cannot work with element p for example though its class might be Pink, only with div element and has a class Pink.

End of this part,

To download this part as PDF click here: CSS Tutorial – Lesson 1 Part II

Best Wishes,

Anas Jaghoub