Posted June 13, 2011 by Spyros in Cascading Style Sheets (CSS)

Programming Logic For CSS


Knowing and executing good HTML is child’s play; knowing and executing good CSS is an art form. I remember the first website I ever built, just a silly teenage “look at me” type of site. It was hosted on Angelfire.com. I used their template at first; then I started making slight customizations until I gradually learned the basic HTML language. By the end of that site’s life, it was filled to the brim with chaotic html code and strange tags to try to achieve awkward sidebar menus and the like.

Later, once I learned CSS, I became extremely drawn to the beauty and simplicity of the code. No longer were my webpages cluttered and clunky with hundreds of lines of code. The beauty of CSS lies in the separation of HTML from web formatting and styling. See, HTML was not initially indented to contain tags for formatting a web page. The tags, such as < h1 > or < p > were initially intended to simply define content. Once HTML 3.2 hit, font tags and color attributes were added. Suddenly, formatting a site with a large amount of pages became a huge, laborious task as web design standards increased.

CSS saves the pain of inputting the same style tags across every page in a site just to make it look uniform because CSS defines how HTML elements are to be displayed and one CSS stylesheet can apply to multiple pages. Meaning, you can define a < h2 > to look larger or smaller (or a different font or color) than the standard tag style. With CSS you can style pretty much any HTML element to your liking. This is how whole navigation menus (even dropdown menus) can be made purely through CSS styling unordered lists < ul > and list items < li >.

CSS Basics

There are two important selectors in CSS, “id” and “class.” The id selector can specify a style for a single and unique element. This means that each element can only have one id and each page can only have one element with that id. So say I only want one < p > to be the color blue. In the CSS stylesheet, I would input:

#bluegraph {
    color: blue;

And in the HTML body, I would input:

<p id='bluegraph'>This paragraph is styled blue by its id</p>

And only that paragraph on the page could use that id.

Classes are different from ids in that they are not unique. You can use the same class on multiple elements, and you can also apply multiple classes on the same element. So if I want multiple elements, say a < p > and a < h1 > to share the same blue color style, I would create the class using a similar declaration to id (although classes are declared through “.” and not “#”):

.blue {
  color: blue;

And in the HTML body, I would input:

<h1 class="blue">This is a blue heading</h1>
<p class="blue">This is a blue paragraph</p>

And both elements would be blue.

Using Div

Now that we know how to style class and id selectors, we can start to style separate elements of our page differentiated by < div > tags. Most people refer to div tags as containers. So, for a page, you would have a div for your header, your navigation menu, your footer, your main content area, and perhaps a sidebar or two if you’re really fancy. If you have two div elements that are nearly identical, you can use the same class selector to style them. However, I find that most of my div tags are styled with unique id selectors.

This was a guest post by Nadia Jones who blogs at best online college about education, college, student, teacher, money saving, movie related topics. You can reach her at nadia.jones5(at)gmail.com. Thank you Nadia ! :)