Digital Guyana

Week 2 morning session – CSS

Posted on: July 31, 2009

In the morning of the second day we covered CSS – cascading style sheets.

In the previous week we had covered inline styles – (for example <p style=”font-family:arial,verdana,sans-serif”>.

We explained that that is one way of doing it but that it is really impractical as you have to define the style each time you use an element. A much better way of doing it is using an external style sheet where you only define the style of each tag once.

First we asked the students to go back to their index.html page that they had created during the first week of the course and delete all the inline styles. They were then asked to create a styles.css file using notepad and save it next to their index.html file.

We then showed how to set up a head with a <title> and a <link> to styles.css in their index.html file:

<head>
<title>Welcome to my website</title>

<link href=”styles.css” rel=”stylesheet” typle=”text/css” media=”all” />
</head>

Next the students were shown how to set up the style sheet with the basic elements and their CSS selectors:

body {
background-color: yellow;
}

h1 {
color: blue;
font-size: 170%;
font-family: arial, verdana, sans-serif;
}

p {
font-family: arial,verdana,sans-serif;
}

and so on.

We also explained borders, margins and padding and how to style the different states of the <a> tag: a, a:hover, a:visited and a:active.

With some of the faster groups we were also able to start looking at <div> tags with id’s and classes, for example:

<div id=”redborder”>

<h2>A second level header</h2>
<p>Some ccontent.</p>

</div>

The following CSS selectors were covered:

  • background-color
  • background-image
  • background-position
  • background-repeat
  • color
  • font-size
  • border
  • margin
  • padding
  • font-family
  • text-decoration
  • font-weight

With a few students we were also able to touch a bit on floats.

CSS specialism

In addition to the basic CSS course, we also ran a CSS specialism one Friday morning. In this course we went through a tutorial from subcide.com which built up to this two-column layout with a header and a footer:

From subcide.com

Advertisements

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

%d bloggers like this: