Tags

,

In order to understand CSS you first have to understand HTML. You just can’t go ahead and learn CSS without understanding how HTML works. They’re like peanut butter and jelly, peas and carrots, Mulder and Scully, you get the picture. Think of HTML as the bones and CSS as the skin. This will make complete sense once you start learning it.

So what is HTML? HTML stands for Hypertext Markup Language. The code tells a browser what it’s looking at and how it should look. Well, the looks department is more CSS job now a days, but HTML gives the basic structure. The markup code is really simple. It starts with an element enclosed in a tag like this: <HTML> and ending with a closing tag which you do by adding a forward slash like this </HTML> You put the content between the start and the end of the tags.  An example of how this will all go down:

<HTML>
<body>
<p>This is a paragraph</p>
</body>
</html>

In sum that code simply tells the browser:

  1. Start HTML code
  2. Start the body (body is basically the entire page)
  3. Start a paragraph – <p>
  4. What’s between the opening <p> and closing </p> will be the paragraph
  5. Close the body
  6. Stop HTML code

Another thing an element could have is an attribute. For example the element used to make links has an href attribute. It starts out like this: <a href=”www.wordpress.com”>WordPress</a> Another important thing to learn about HTML is that elements have a hierarchy. <HTML> goes before <body>, body goes before paragraph <p> and paragraph goes before <em> which is emphasized or itallic.

Once you get the basic gist of HTML and understand that it’s mostly to structure a page (back in the day when there was no CSS people used to style everything with HTML and did horrible things with the <table> tag) you can start understanding CSS. Again, CSS is used to style a page. It’s the skin part like I mentioned. CSS stands for Cascading Style sheets. What it does is tell the browser how the HTML should look. This CSS code can be either internal or external. Internal means that the code can be within the HTML code and external means that you can create a separate file for the CSS code and link to it from the HTML code.  Like HTML, the CSS code has some basic parts. It starts with a selector. A selector can be a known element like <p> but you just write p. Let’s see an example.

p { color: red; }

Let’s take that code apart. Like I said you always start with a selector, in this case it’s p, which is the paragraph element. You follow with an opening curly bracket thingie { . Then you declare a property which here is color, follow it with a colon :, give the property a value, which here is red and end with a semicolon ; You always end with a closing curly bracket } The whole thing is called a style rule. In sum it’s saying to color all paragraphs red.

Other things selectors can be are classes and id’s. These puppies have to be declared first in the HTML code before you can style them. Remember what I said about attributes, well an id or class are attributes you can give to elements. Like this:

<p id=”wrap”>

In the Css code you would pick this id like this:

#wrap { color: red; }

I hope this gives you a good starting point. Below are other great resources that you can look up:

CSS Beginner Tutorial

W3Schools CSS Tutorial

CSS Basics

One book I highly recommend is Head First HTML with CSS and XHTML. I’m also currently reading CSS: The Missing Manual

Let’s see what next week’s “lesson” will be. I you have any suggestions or criticisms about this don’t doubt on letting me know.

Advertisements