5 Baby Steps To Learning CSS & Becoming A Kick-Ass CSS Sorcerer

css featured   5 Baby Steps To Learning CSS & Becoming A Kick Ass CSS SorcererCSS is the single most important change webpages have seen in the last decade, and it paved the way for the separation of style and content. In the modern way, XHTML defines the semantic structure – the meaning and content of the webpage, while CSS concerns itself with the presentation. While most of us are comfortable writing a little HTML, we seem to think that CSS is some kind of black magic. I hope to change that with these 5 baby-steps to becoming a CSS sorcerer.

This article is aimed at users who have very little experience with CSS yet, though hopefully there is something here for everyone. Before you start playing with CSS, you may want to download our fantastic free beginner guide to XHTML.

(1) Grammar

Like any language, CSS has a certain grammar to it, and it may seem a little “computer programmy” at first, but it’s really just a list of things. All CSS is written like this:

SELECTOR {   PROPERTY:VALUE;   PROPERTY:VALUE;   PROPERTY:VALUE;}

As you may already know, CSS works by applying a style to a selected element in the webpage. For instance, to style how all your links are shown, you would use “a” as the selector. The various properties and values you will learn with experience, but some are easy – things like COLOR, BORDER, FONT-SIZE, HEIGHT are all some possible properties, whose values might be red, 14pt, 150%, 1000px –  it really is that easy. Let’s see how we would go about styling all the links red:

a {color:red;}

You can also use the same block of CSS to do more than one type of element at the same time with commas:

a,h2,h3 {color:red;}

This makes not only all the links, but also all the h2 and h3 headings, in the same red color. Notice they might all be different sizes, as this particular code block ONLY changes the color.

(2) Class & ID selectors

Sometimes you don’t want to style ALL the a elements in the same way though – and in those cases, you could use CLASS or ID. As a general rule, ID is used for one-off elements and is most commonly used to define large blocks of content or single special buttons and such.

For example, you might have a large DIV for the HEADER, CONTENT and FOOTER blocks of your page – so defining those as IDs would be a smart move. Classes on the other hand are used when style elements are likely to be repeated throughout the page. Perhaps you want a bunch of items to have rounded corners with a 2px solid red border – rather than writing out the same inline style a million times, you would define a class for it, and attach the class to those elements instead. So how do you define these IDs and classes?

<div id="sidebar"><h1>SIDEBAR</h1><div><img src=".." alt="" class="red-rounded" /></div></div>

To target these items in CSS you would use:

.red-rounded { // this is a class
border-radius:5px;
border: 2px solid red;
}
#sidebar { .. } // this is an ID

(3) Descendants

You don’t need to attach classes and IDs to everything in your document though – you can also use what we call DESCENDANTS to select items. Look at this CSS statement and see if you can figure out what it does:

#sidebar h1 {font-size:20px;}

This will FIRST find the item with an ID of “sidebar” THEN it will narrow the selection down to all the <h1>s contained within that, and only apply the style to those.

So, if you can group of all your items together somehow, it’s best to use descendant selectors as it’s even less code than adding a bunch of class=”” definitions to everything.

(4) Where To Put This CSS?

The best way to deal with CSS is to separate it entirely from your HTML. Make a file called whatever you like .css, and simply add this line to your HTML header:


You can also add blocks of CSS to the section in between tags, but I don’t suggest this method as it results in messy and difficult to read HTML files.

The third place to add CSS is inline, but you should be wary of that too. Anything added inline like so:

<img style="height: 150px;" src=".." alt="" />

will automatically override anything defined in your separate style. So you may sit there trying to debug for ages why your thumbnails don’t resize, and your CSS may be perfect – but if the IMG element includes inline styles already then those will take priority. How do you know if something else is affecting it though?

(5) Get FireBug, or Use Chrome

FireBug is an amazing development tool that’s especially useful for figuring out how CSS works. Take a moment to download it and have a quick look at it. FireBug is available for Firefox as a plugin, or if you use Chrome then an identical set of features is already built-in. Once you’ve activated the plugin in Firefox or are using Chrome, simply right click anywhere on the page and select “Inspect Element“.

firebug   5 Baby Steps To Learning CSS & Becoming A Kick Ass CSS Sorcerer

This will open a new pane in the bottom of your browser. On the left side is the XHTML view, nicely formatted and collapsible. If you hover over any element, it will highlight that element on the page and show you the CSS box model around it (we’ll talk more about the box model in a future lesson). The key point here is that you can also select any element and see precisely which CSS is acting upon it on the right hand side, and it will break those down into which selectors have caused that. Anything added inline will be shown under the “element.style” heading. Try it now on this page. Notice that very often a lot of the CSS listed on the right is crossed out with a central line – this means that another selector working on that element has priority and is overriding the one crossed out.

crossed out css   5 Baby Steps To Learning CSS & Becoming A Kick Ass CSS Sorcerer

That’s it for today, but do feel free to leave comments if you think I’ve missed some fundamental key beginner points, or if you have any specific questions or problems with CSS then ask away in the tech support section of our site. Next time I’d like to develop your knowledge of CSS beyond basic color and size changes.

The comments were closed because the article is more than 180 days old.

If you have any questions related to what's mentioned in the article or need help with any computer issue, ask it on MakeUseOf Answers—We and our community will be more than happy to help.

9 Comments -

priehl

Thanks – very interesting. After years, I finally redesigned our web sites with CSS basically by playing around and looking up specific answers until things worked. Recently I updated a few pages with a new feature by sticking in a *gasp* one-column one-row table because I didn’t want to start all over with CSS, which I haven’t used in months.

This inspires me to look into it again – and the descendents thing offers some great possibilities I hadn’t been aware of as swell.

James Bruce

You’re welcome Priehl – CSS grows on me, too. So much power, and CSS3 is so exciting!

Misterex

Thanks for the information. I am redesigning my website and want to use CSS, but have been afraid to attempt it because of the complexity. You make it sound easy. I think I will have a go again!

James Bruce

Have fun!~ CSS is awesome, and once youve mastered it you can basically make anything!

Mohammed

Thanks for the useful, helpful and fabulous information. Actually, I designed 4 websites up to now in a period of one year and 5 months without knowing how to deal very well with CSS code. Frankly, this is the best explanation I have ever seen it before. Please keep going and I will be more happy if you can explain everything about CSS and then CSS3. Thank you a lot and you did a really nice job.

Scutterman

I think it would be useful to include multiple selectors in the next issue – for example assigning class1 and class2 to an element and selecting it using .class1.class2 {}

Also, it’s useful to know about using !important after a value.

James Bruce

agreed, but i may need to make that a 3rd tutorial as number 2 just got published. 

Johngml

A great attempt at making it look easy but as I am not a web designer I will stay with the WYSIWYG type programmes as I was completely lost by section 2. One of the best explanations I have seen but you are talking a completely different language to me and it is well over my head. I have built several websites but there is no CSS on any of them. Although I can see some errors in html I do not use it to build sites only to fine tune them if I cannot get the result I want. It would be great if someone actually designed software that generated CSS automatically like you can with html. Please note this is not a negative comment to your article only a comment that CSS is well out of most peoples grasp if they are not web designers or have a very serious interest.