Tutorials @ WebDesignPro

Begining HTML and CSS | Part 4

Let's look at CSS in a bit more depth

Untill now we have only used CSS to define the styles of particular element types such as div{color:red;} but suppose we wanted to have more than one div on a page each with a different style?

We can define a custom class with CSS and apply it to any html elements using the class attribute. Classes in the CSS file start with a fullstop

To add the styles to our page elements we use the class attribute

We can also define styles for child elements of an element with a given class

Now let's say that we have a number of span elements within divA and that we want one of the spans to have a different style from the others.

We can define a custom class for the lone span and these settings will override the styles that have been inherited from the parent element.

Or, if you think you will not need the style elsewhere on your site, you could apply an inline style attribute (see Begining HTML and CSS | part 1). Inline styles take precedence over those from an attached sheet.

We can also apply styles to an HTML element by refering to its id attribute.

Create a div and define its id <div id="myDiv"></div>

Now add the following style rule to your CSS file

Now let\'s introduce some new style rules

Check back soon for more fun tutorials

Comments:

Featured Script