CSS

Cascading style sheets are important for customising the layout and contents of a webpage written in a mark up language.

Cascading style sheets can be used to style the following parts of a HTML document:

  • Fonts
  • Lists
  • Alignment of text
  • Margins
  • Colors
  • Backgrounds
  • Borders

One important thing to note while styling a web page is the box model due to the contents of a page being located within boxes (such as a div) which in turn are within other boxes (such as the body). The box model displays the stylable elements of, lets just say for example, a div which are made up of three main things:

  • Margin
    • The space between the border of the div and the other elements around it
  • Border
    • The border of the box (would you have ever known?)
  • Padding
    • The space between the border of the div and the other elements around

Take a look at the image below for a graphic representation.

 

box-model

 

Not only can you use style sheets when designing a website but you can also use them to alter other peoples webpages you view. These cascading style sheets are called user style sheets and are created in much the same way as a standard style sheet. Instead of linking these style sheets to an html document you keep them on your hard drive and instruct your browser to use them.

Another way of using style sheets are as alternative style sheets which allow multiple style sheets to be applied to a html document which a user can switch between in their browser. To link an alternate style sheet to a HTML document set the rel in the link attribute of it in the head to rel=”alternate stylesheet”.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: