Introduction to CSS

Oh my, you only just started learning about HTML and already there’s another language coming? Yes, because you really need to get a sense of both if you want to create web sites that look how you want them.

CSS means Cascading Style Sheets (you can forget that right… now). While HTML is the language that tells you what the different elements of your page are, CSS is the language used to define how those elements on your page should look.

As an appetiser, have a look at our video demonstrating the power of CSS for changing the background of a page:

Wasn’t that beautiful? Allright, now that you’re all motivated, let’s take this CSS thing from the top.

Things you can specify  in CSS include:

  • The color of text and backgrounds.
  • The size of fonts and blocks of text.
  • The position of elements on your page.
  • And a lot more: borders, fonts, text alignment (centered or not)…

So, CSS is a new, and very useful, language you have to learn besides HTML.

CSS code consists of 2 parts:

  • The CSS selector: which HTML element or elements the CSS should apply to.
  • The CSS rules: these specify how the elements look.

CSS code can be inserted into the .html files of your site, by putting them between <style> tags.

Here is a piece of CSS code that specifies that all H1 elements should have text color red and background color black, and all H2 elements have text color blue:

<style>
h1 {
color:red;
background-color:black;
}
h2 {
color:blue;
}
</style>

So, we now have an idea of the syntax of CSS: first the selector, then curly brackets, then the different CSS rules each ended by a semicolon (;) character.

Selecting elements by class and id

To make a CSS rule apply not just to all elements of a certain type, we can use class attributes. This is used VERY often, and in particular with the otherwise rather useless-seeming <div> element.

So, to create a block of text with a yellow background and a blue border, you would first create a <div> like this:

<div class="uglyblock">
Hello everybody! This block of text may look like shit, but it sure stands out!
</div>

And then add also the following CSS style to the page:

<style>
.uglyblock {
background-color:yellow;
border:3px solid blue;
}
</style>

Here is how that would look in a browser:

Screen Shot 2014-01-18 at 14.44.28

Note the . to specify elements of a class. So, the CSS selector .myclassname will correspond to all elements that have attribute class=”myclassname”.

Also note that multiple elements on a class can have the same class name. CSS rules for that class will then be applied to all elements with that class.

There is also the id attribute which you can give to only one element on the page. It is specified for example like this:

<h1 id=”mainheader”>The big header on top of each page</h1>

and the CSS selector to match it uses the # symbol:

<style>
#mainheader {
color:green;
}
</style>

One last thing: you can use class and id attributes, and corresponding CSS rules on any type of HTML element: <img>,<p>,<h1>… even the <body> element that wraps around the entire page can get a style!

Conclusion

We have now added a new language to our arsenal (be warned: it’s not the last one you’ll have to stuff into that peanut brain of yours), called CSS, which is used for styling your web site.

Points to take away:

  • CSS is the language used to define how the different elements of your web site should look.
  • CSS is added to a web page by specifying rules between <style></style> tags.
  • CSS rules consist of a selector + the rules for the elements that match that selector.
  • CSS rules can be applied to either:
    – all HTML elements of a type,
    – all HTML elements of a certain class attribute, using the . selector
    – or the one HTML element with a certain id attribute, using the # selector.

Remember that formula from the earlier tutorial about HTML tags? We can now extend it to look like this:

CONTENT + HTML TAGS + CSS STYLE = WEB PAGE

Woah. Trippy huh, all those colors? If you wonder why the entire web is not colored in BRIGHT YELLOW, BRIGHT BLUE and BRIGHT GREEN, you will be interested in our next lesson: specifying colors in CSS!

Advertisements

5 comments

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s