CSS Basics

Cascading Style Sheets (CSS) is a language used to control the format and look of a document generally written in HTML or one of its variants.  Basically CSS controls the layout, fonts, colors, location of content on a website.  CSS is used because if offers more flexibility and control over how the content is present using HTML and can simplify the coding process as you build your website.  For instance while HTML designs are generally restricted to using tables for layout in a websites design using CSS you can create an entire website without tables eliminating lines of code and creating a more uniform browsing experience for all your users regardless of their screen resolution or device they use to access your website.  This is becoming increasingly important as the amount of various devices offering a wide range of screen resolutions balloons and the need to design your website for cross browser use becomes ever important.  CSS can allow you to create a more fluid design that can increase and decrease in size depending on the size of the browsers rather than the static table designs required with basic HTML websites which means that the ads you have on the sidebar will always be visible without scrolling even on smaller screens!

CSS offers many benefits over basic HTML built websites one of which is that you have the ability to utilize style sheets consisting of rules to govern your entire page or website from one central location which reduces code and allows for easier modifications.  For instance you can create a rule that governs the link style of every link on your page if you use an inline style sheet or across your entire website if you use an external style sheet.  Imagine how easy that makes altering your link if you only have to change the attribute at one place in your code rather then at every individual link!  Another benefit that is related is the fact that as you reduce the amount of code on your website and simplify your designs you can reduce the amount of bandwidth the website burns as it is served.  For instance if you build you website using one style sheet to dictate the entire layout then you have reduced the lines of code needed considerably compared to serving code for each individual attribute as you would have to with basic HTML.

While CSS offers many benefits there are a few draw backs that you shoud be aware of when building your website.  Although CSS seems to be built to be simple it has changed over the years and has variations that supposedly fix problems and increases features which might sound good but can create conflicts and confusion for coders.  Also partly because of the variations and also because of the internets free wheeling attitude there has been less than uniform adoption of CSS across the various browsers which means certain browsers may render your website differently even though your CSS coding is the same.  This can lead to the need to create browser specific attributes and commands so that the website you build displays uniformly no matter how the surfer views your site.  Finally while CSS is supposed to offer greater control and flexibility for design it can be difficult to understand how the code affects the layout and some of the capabilities are limited with CSS especially if you use a WYSIWYG editor.

Basic CSS coding information:

Inline style: inside your HTML document, info about a single element using ‘style’ attribute

Embedded style: CSS inside the HTML in a specific block

External style sheets: a seperate CSS file containing all the CSS code referenced from the HTML document