developerwall.com - code, design and gossip

Having seen the different levels of CSS, where the styles can be written and stuff, in my previous post, let us now look at the CSS syntax, CSS selectors, CSS rules, CSS properties and values, CSS declarations and other important technical jargon related to styles.

What is a Rule in CSS?

A Rule in CSS comprises of a selector, properties and values that define an HTML element as in the example below

CSS Selector, Property and Value

The above rule is made up of 3 parts – Selector, Property and Value.
p in the above code is the selector. The Property in the above code is color and the Value of the Property is red. The colon(:) is used to define the value for the property. And the semicolon(;) at the end of the value is to denote that the Property declaration has ended and that a new property can now be included for the same Selector.

The above code can be also written as

However, it would be best if we define each Property in one line.

Syntax and Declaration

This is the general syntax of a CSS statement when defining a rule. The code within the curly braces is called the CSS Declaration of a selector.

We can include more than one property declaration for the same selector as in the example below:

The above style has 3 property declarations. The rule is to make any paragraph (the <p> tag – as the selector) to appear red in color, with a size of 14px and bolded. The output would be as follows (assuming “Lorem Ipsum” as the dummy text withing the <p> tag in HTML

Types of Selectors

The following are the different types of selectors in CSS

1. Basic Selectors
2. Class Selectors
3. ID Selectors
4. Pseudo Selectors
5. Descendant Selectors

Basic Selectors

Styles written to a HTML element with the element itself as a Selector is called Basic Selector. In the example below, h1 is an HTML element which is used to display headings.

Class Selectors

These selectors do not correspond to any HTML tag and when written always start with a ‘.‘ (dot). These selectors can be given any name, preferrable something relevant. And this name is used in the HTML by using the “class” attribute.

ID Selectors (Identifiers)

These Selectors are similar to the Class Selectors. However, instead of a ‘.‘, the symbol ‘#‘ (hash) is used to denote an ID selector. Also, another major difference between a Class Selector and and ID Selector is that, Class Selectors can be used multiple number of times within the same page. But an ID Selector can only be used once in a page.

Pseudo Selectors

These selectors help in defining the characteristics of an element. Mostly used with the link selector, it is defined as follows:

Applying the above style will format all links in a HTML page. It will originally display the link in red color. On hover with the cursor, the color of the link will change to black. On Click, it will change to green and when the link is visited, it will change to blue. You can test the above code here.

Descendant Selectors

Selectors defined based upon their HTML tree appearance are called Descendant Selectors. The below example explains a Descendant Selector. It says that for every h3 tag appearing in a table, change its color to red and make it bold.

I hope the above was informative. Please let me know your feedback/comments.

Related posts:

1. CSS for Beginners part 2 This second installment of CSS for Beginners will give you...
2. CSS for Beginners Ever wondered what is behind a beautifully designed website? The...
3. The Flex Builder IDE for beginners The Flex software is built on the widely used Eclipse...
4. Examples on Registering Events in Flex We can register Event Handlers and Listeners in more than...

Related posts brought to you by Yet Another Related Posts Plugin.