CSS in 10 Minutes

The basics of CSS are very easy to grasp and, I believe, more easier to immediately grasp than HTML.

The first thing you need to know is that CSS and HTML work in tandem. If your website were a human HTML would be the body and CSS would be the clothes you put on it. CSS sets down the rules for how your website will appear where HTML lays out the structural elements. CSS also determines the placement of the structural elements ( to use the body analogy, css could attach the right arm at the hip rather at the shoulder., yikes!)  But that’s where it gets complicated and we will only be dealing with some of the basic cosmetic changes.

The two basic parts to a CSS statement are Selector, this will be the HTML element that you want to style and Declaration, this is the CSS set of instructions of what to do and how to do it. The declaration is broken down into two sections, the Property, this is the type of style change that you want to do, and Value this tells how much or to what degree to effect that style.

The reason why CSS is so easy to understand is that we use this kind of logic in our every day actions with out even thinking about it:

  • Refrigerator {door:open}
  • Car {headlights: on}
  • Wall {paint:yellow}
  • Dog {walk: 20 minutes; leash:yes;}

Notice how I wrote out these statements with the proper CSS punctuation. For more advanced CSS there are a few more of the ‘punctuations’ but for our purposes there will only be the three: Curly Brackets { }, these will surround the declaration of set of declarations. Colon : this will separate the property from the value and Semi-Colon ; this is used to separate declarations and only used if you have more than one declaration within a set of Curly Brackets.

In the declaration area CSS is not that sensitive to blank spaces, you can cram everything together with no spaces of add a space for better readability but just be sure there is no more than one space on either side of the colon and you will be good to go. the words in the declaration are not case-sensitive but most all coders keep it to all lower-case.

There are about 200 CSS properties but many are for singular applications and most websites will only use about one third of them. And for our purposes we will be sticking to just a couple.

  • Display – determines it an element can be seen or not.
  • Visibility – similar to display ( I’ll explain the differences in a separate post.)
  • Font-Color
  • Font-Size
  • Background-Color

Every property has s specific set of values which it will respond to the easiest to get is the color properties. There are several ways to assign a color value but the easiest way for us is to use the hex number that we are already familiar with from our Colorzilla add-on, this six digit number-letter combination proceeded by a hash tag #.

  • To make a font black {font-color:#000000}
  • To make a background a light yellow {background-color:#FCFBD4} (note: hex codes are conventionally uppercase, but lower case is acceptable.)

For font size there are again several value formats available but the easiest to use and understand is pixels.

  • to make font 14 pixels tall {font-size: 14px}

Choosing font pixel sizes will be trial and error since these will be of different values to begin with from one website to another.

So that’s it for the Declaration part of the statement, but we still need to talk about the Selector.

Selectors come in three flavors.

  • Basic HTML elements, we’ve encountered these already in the examples of font selectors (or tags), H1,H2, p, a…
  • ID Selector – these are assigned by whoever wrote the code but tend to follow certain conventions. An ID will always be preceded by a hash tag #
  • Class selectors – Are nearly the same thing as ID selectors except they can be used in several locations on a site and are not as specific as ID selectors. They are preceded by a period .

Going back to my real world example earlier:

  • Car {headlights: on}

Say for instance the car was in a parking garage with several cars. How do you make sure you turn on the head lights of one car? In CSS it might look something like this:

  • #parking-garage-3rd-floor .ford #plate-GW8920 Car{headlights: on}

You can see that CSS is a way to isolate a single part out of many several parts, in this case cars in a parking garage.

IDs and class names are used to focus in on particular elements so say I wanted to change the font color of the Headline on our Owls site. If I go to the website and I use the Inspect Element (when we right click, in Firefox) I will see that it is an H1 element, but if I made a CSS rule that changes the H1 element it will change all the H1 elements on the website. So, in the Inspect Element mode if I look closely ate the chain of declarations at the bottom of the page I will see some names beginning with a period a hash tag,#, these are the classes and IDs assigned to that H1. So using the Owl page which is in the TwentyEleven theme (note: all themes will have different class and ID names assigned to elements.) I can see that my headline H1 also has an ID #site-title. But wait a second here is where it gets tricky. Notice how the headline is also an a element (this is because it is also a link to the home page.) and if we look in the sidebar for the Inspect element we will see that it is actually the a element that is taking the font-size condition. We will also see here that the font size is currently 30px so lets make it slightly bigger:

#site-title a {font-size:36px}

You can see that sometimes trying to isolate an element that is buried in several selector levels can be tricky. Sometimes it just comes down to trial and error until you get it to look like you want it to. The nice thing about working with CSS at this level is that you can’t really break any thing critical on your site. And if you do accidentally try to change something and it has some bad structural effect on your site you can just go to your Stylesheet and delete that CSS and you are back to normal. CSS is very forgivable.

I think that with this little bit of knowledge of CSS rules can be a very valuable tool for making small cosmetic changes to a theme and knowing it you will not be kept prisoner to some color or font that you don’t like about your theme when you like every thing else about it. There are also a great many plugins that allow for CSS rules to interacts with them and you may want to use it for seamless integration in to your site.

This post has already been read 2911 times!