BASEWEBMASTER

Brought To You By
Tomlin Ventures Ltd

Using Type Selectors

Looking at the CSS type selector

The type selector is the first and simplest of the CSS selectors. It takes on the form of HTML elements and using it will style the stated element with the relevent style information. So by declaring the p element as the selector all paragraphs on the page will inherit the styles that you state within the brackets.

So looking at a quick example:

CSS
h2			{font-weight: bold; text-decoration: underline;}

The above code will style all h2 elements on the page as bold and underlined. Below is a mock up of a HTML document tree to help illustrate the on page elements effected by the code.

CSS type selectors

The type selector is very powerful and very easy to use as it will style all of a certain type of element on that page, you may wish to change the size of your header elements to make them stand out or alter the colour of the paragraph text to help with readablity and it can all be done with one declaration.

As great as it is to be able to style a particular element in a particular way through out the page this is also the greatest dis-advantage of the type selector it will style all occurences unless they are otherwise styled.


Grouping Type Selectors Together

If you require a number of elements to be style the same way rather that select and style each element separately you may want to group them all together as shown below.

CSS
h2, p, em			{font-weight: bold; text-decoration: none;}

To group elements you simply seperate them using a comma, they will be treated just as if each had been styled individually.

CSS grouped type selectors

Type selectors are a very good way to apply a theme or branding over your web pages and are easy to use as there is no need to change the actual inline code of your pages. However caution should be taken as you may find that unknowingly style other areas of your site.

Hit the next article button below to continue learning about selectors.

Share to Facebook Share to Twitter Digg This Stumble It Share to Reddit Share to Delicious Technorati LinkedIn Google Buzz Blogger More...

blog comments powered by Disqus