Learn CSS

A Little Bit of History of CSS

CSS is the acronym for Cascading Style Sheets. CSS is still a relatively new form of building a website with many web design firms still using traditional table based designs. So why do we need it now? Well when the web was in its infancy it was very simple with web pages being predominately text with some images. Over time we found ways using tables to build attractive, visually appealing sites using table based design with many websites requiring nested tables (tables inside of tables) and inline design code to achieve the desired results. So we found a way to create the sites we wanted however these methods have their downfalls.

Firstly they add to a websites file size as all the design code is intertwined with the website information and this was generally duplicated on each page of the site so it wasn't long before a site would increase substantially in size. Also due to the fact that the design code was mixed in with the information meant that search engines would have to read through all this extra code too making it more difficult for a search engine to read the content. Nested tables also made it difficult for a search engine to follow the flow of a pages content and confused screen reader software for the disabled.

CSS was introduced to separate content from design which is exactly what it does. All design code is separated from the page content and are linked to each other with tags to tell elements of a web page what its properties are like colour, position, size etc.

CSS Rules

Here you will find a list of the CSS Elements. Follow the links to see code examples of how they are used.

CSS Property Name

• background

more coming soon

CSS Notes

As I read up on various techniques for using CSS I often come across useful chunks of information that I think would benefit the budding CSS novice who is trying to get their mind around how CSS works. Below are a few CSS notes that I thought may be useful. I will be documenting these more thoroughly at a later date.

Note 1 - Not all properties in CSS are inherited by the descendants of a parent element. Margins and padding are example of properties that are applied to a specific element only. For example.. body {margin-left: 10px}; will not affect the left margin of descendent selectors like the <p>, <h1>, or <ul> elements.