Learning CSS: An Introduction.

A close friend of mine, some time back asked me to do a short bit on Cascading style sheets, to help him out in learning them. He is of an old school of web design, where tables where predominantly used for layout and  html codes where in place for font effect, and has decided it time to  move to the modern age.   While these writings are predominantly for him, i am sure other people can find them useful.

My plan with post in this category is to from time to time, discuss just one aspect of   CSS design. One last warning, I am not setting out to cover the topics in any sort of order , or to walk people though the progress of a faux site at this time, but to just discuss one concept at a time, be it a basic element of CSS, or a more complex technique. now just to start us off, I am going to discuss the style-sheet layout.

Style Sheet Layout

at the heart of a .css file is nothing more than a long list of rules.  these rules are defined by selectors that are used by the browser to see if the given rule apples to an element of HTML, the selectors followed by the properties that will be applied if the selectors condition is met.  It is not as complicated as it sounds.

Basic Code Example:



the above block of CSS does just one thing, it looks for the P html tag, and where if finds it,  it applies the 3 styles to it, it will align the  paragraph right,  give it a Red color, (as defined by the Hex color code) and set its font size to 1.1em’s.

This paragraph is styled with the code from above,  and as you can see, by the color, right alignment, and font size change in this paragraph. However if this CSS code was in my style sheet, every paragraph on the site would look this way.

That should be enough to get your brain turning, until next time.  also if there is anything you would like to see me talk about on how to do with CSS, please feel free to drop me a note on the contact me page.

Leave a Reply

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>