Network Sites

Implementing CSS Styles

CSS stands for cascading stylesheets, the reason is because one stylesheet has influence over multiple pages, which is where the cascading part comes from.

Implementing CSS is an easy process, there are 3 ways to do it:


  • Inline
  • Head
  • External

CSS allows you to use these methods all on the same page, overriding values as you go along.

Inline

Inline is one form of implermenting CSS. The following inline CSS will make the font size of an unordered list 24px and font colour dark green. 

<ul style="font-size:24px; color:#060">
.......
 </ul>

Inline CSS has it uses but it is limited, changing the style of group of tags isnt supported, you limited to styling one tag at a time.

Head

Implementing CSS in the head tag makes it much easier for you, it allows a group of tags to be styled through one rule set. The can pass off worth while in some cases, if a single page has different presentation than the rest of the site it will work well. But try to stay away from them since they tie the content down to the presentation.

Below you will see how to implement a background color to the webpage. 

<html>
  <head>
    <title>Your Website</title>
    <style type="text/css">
    body {
           background-color: #c9c9c9;
    }
    </style>
  </head>
  <body>


  </body>
</html>

Style element should be placed in the head element.

External

External stylesheets are the best way to go, with using stylesheets you can edit the styling of the whole site through one file. You can use multipul stylesheets at one time, this is good if you want to have certian rule sets only on certain pages. it saves loading the unwanted rule sets on the pages that does not need it.

The link element should be placed inside the head element

Example of Implementing a stylesheet externally. The style sheet is currently pointing to style.css. 

<html>
  <head>
    <title>Your Website</title>
    <link rel=\"stylesheet\" type=\"text/css\" href=\"style.css\" media=\"screen\">
  </head>
  <body>


  </body>
</html>

References

- http://reference.sitepoint.com/css/linkingcss