Skip to content

Andy Explains CSS

June 1, 2009

Hello – here is the next installment from Andy

Hello,
I will start off explaining what CSS is and why it is a good thing to know and use.

CSS stands for Cascading Style Sheets which pretty much sums up what it does. It is a style and it cascades. What does this mean? CSS is used to style your website (colors, fonts, margins, background images, etc) and can do quite a bit when you learn how to code it properly.

Take a look at CSS Zen Garden (http://www.csszengarden.com/). You can select hundreds of different designs that look completely different but the html stays the same. It is only the CSS that is changed.

So CSS is used to style your website instead of the old way of using html but what is the cascading part? Well in a website you have multiple parts that make up your basic page. The head and body sections. Inside the head section you can specify one or more external style sheets to use. You can also specify how those style sheets are used (to display the page, used when printing, etc). You are also able to define CSS straight in the page without using an external style sheet as follows:

  • <style type="text/css">
        div.content {margin-left:15px;}
    </style>

This lets you define CSS that is only used on that page without forcing every other page to load it in an external file. If the same element is defined in both the external and the way shown above, the above version will override the external file.

There is one more way to define CSS and that is within the html tag using the style keyword.

  • <div style="margin-left:15px;"></div>

This final way will override and previous styles that have been set in the other two ways. This is also not a good idea to do unless you’re using blogger or some other blog system because it causes CSS is be much more difficult to update later on (you have to go and search for all of the style within each html document.

What are the problems with CSS? The major problem is that each browser renders the style a little bit differently which may cause some headaches for the developer. There is a standard for CSS as with HTML but not all browsers follow this standard (Internet Explorer) so you may have to add 50 or 60 extra CSS lines in a large website just to cover each browser and the way they do it.

For example, Internet Explorer doesn’t use the auto keyword but Firefox and opera do. If you want a website to be centered on the page, you have to set the left and right margins to be auto (for Firefox and opera and most others) but that doesn’t work in IE (the webpage will still be aligned to the left side).

To fix this, you need to set the body of the document to text-align:center (which centered the page in IE) and then for the content div (the div you centered that also holds all of the page info) you need to reset the text-align to left. If you don’t reset the text-align, all of the content will be centered in the page for all browsers.

To be able to code proper CSS, you need to know HTML first. There are two main tags that you will use quite a bit. The div and span tags.
The div tag (<div>…</div>) is a block element which (by default) doesn’t allow anything else to be on the same ‘line’ as the div. The span tag (<span>…</span>) is an inline element which (by default) allows other stuff to be on the same ‘line’ as the tag.

Divs are usually used to specify certain parts of a webpage while the span tag is usually used to add formatting to parts of text (such as changing the color, text-decorations, size, etc). You can also change the default behavior of a span or div tag by changing the display CSS property.

  • <span style="display:block"></span>

This is change the behavior of the span to act like a div and not allow anything on the same line. You can also use display:hide to hide that specific element (such as a part of the form that needs to be hidden unless a user selects something – made visible using JavaScript).

I think that is about everything you need to know about CSS. Lets recap…

  • Style is set first by the external style sheet then the defined style on the page and finally by the inline style.
  • Browsers render the CSS differently which causes some problems for the developer but are usually fairly easy workarounds.
  • The span and div tags are used the most with CSS in normal websites.
  • Every HTML tag can have style added to it using CSS.

I hope this helped you understand CSS a little better or at least well enough to explain to your readers why HTML style tags shouldn’t be used anymore. 

Andy

Add to FacebookAdd to DiggAdd to Del.icio.usAdd to StumbleuponAdd to RedditAdd to BlinklistAdd to TwitterAdd to TechnoratiAdd to FurlAdd to Newsvine

Advertisements
One Comment leave one →
  1. June 2, 2009 3:35 pm

    Blimey O’Reilly! The light has finally been turned on! This is making sense… I am finally understanding what CSS is – and those examples, oh wow. I may, just may, finally get a website to look how I want it to look, and not be stuck with the template that offends me the least. I will be studying this in depth and am definitely going to give it a go. I never could understand why I can write blogger backgrounds and change them like my socks, yet not be able to sort out a website I am pleased with. Thank you so much for posting this!

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