• 
  • About Me
  • 
    • Articles
      • Life Before A Webpage
      • Kick Your Website Into Gear
      • HTML - Tag, You're It!
      • Padded Cell, Anyone?
      • CSS - Magic Or Madness?
      • History On-line
      • CSS In A Nutshell
      • HTML Tagged & Bagged
    • School Notes
      • The Secrets of Immortality
      • The Silence of the Flames
      • Drabbles
      • Indiana Jones Morning
      • On Writing Well Notes
    • Other Articles
      • Serving Stewdents
  • 
    • Basic Design Notes
      • Photoshop
      • Illustrator
    • Animation Notes
      • Fireworks
      • Flash
    • Web Design Notes
      • Dreamweaver
      • Assignments
    • Other Notes
      • Employability Skills
      • Communication Skills
    • Projects
      • AV Projects
      • Treatments
      • Storyboards
      • Proposals

CSS - Magic Or Madness?

One of the fastest ways to go crazy is to try to teach yourself CSS. It can be very confusing, very frustrating, and leave you feeling very foolish and reluctant to ask 'stupid questions'. The purpose of this series is to answer some of those 'stupid questions' before you need to ask them. Will it answer *all* your questions about CSS? I hope not. Learning CSS is easy, mastering it is hard. Even people who have been using CSS for years can still say "I didn't know CSS could do that!"

It's not a matter of answering all the questions you could possibly have. I'm only going to try to explain the subject as I understand it. Which means you'll see some rather unusual comparisons between CSS and Real Life, but that's how I learned CSS. The same way you'll be able to learn it when you're done here. I'll just leave the 'technical' information to those who understand it better.

Why Use CSS?

This is the first question most people ask. Why should they use CSS, rather than HTML to format their web pages? The best answer comes from the World Wide Web Consortium itself.

"...CSS2 is a style sheet language that allows authors and users to attach style... to structured documents.... By separating the presentation style of the documents from the content of the documents, CSS2 simplifies Web authoring and site maintenance."

Cascading Style Sheets, Level 2
Abstract, para. 1
On-line

What Is Css?

Technically, CSS stands for Cascading Style Sheets. In a nutshell, it's a way of reducing the amount of coding required to get your HTML page looking the way you want it to. When you reduce the amount of coding, you reduce the chance of forgetting to close a tag or of mispelling something. It also means that you don't have to do as much typing. Technically, it also means that the less code you have, the faster the page loads, but that's another story entirely. CSS also offers one thing that HTML doesn't. By putting all your formatting information on one page, any changes you may want to make to all the pages can be done just by changing the CSS page. One hundred pages - one change. Neat, huh? Mind you, you'll still have to double-check all the pages, just to make sure that things work properly.

What Do I Need To Know?

Aside from the specific information that I'll get to in a minute, there are two things you need to remember about CSS.

One, unlike HTML, which uses an equation-like format (<font face="Arial">, for example), CSS uses something that looks more like ratios (font-family: Arial;) and requires a closing semi-colon (;) for each section of information.

Two, you need to remember is that, like HTML, there are certain 'punctuation rules'. To use the previous examples, here's part of the difference:

The other difference is that CSS styles, when not inserted into an HTML tag, are enclosed by { } braces, not the < > "less than/greater than" bracketing of HTML. Also, CSS styles aren't like HTML tags. They don't require closing tags.

You also need to know how to get the CSS information to show up on your HTML page. The first thing you have to do is tell the browser that there is non-HTML formatting for the page. That's done with a <meta> tag.

Next, we have to get the information itself onto the page. There are three ways of doing that. In the order in which a browser reads the information:

1. You can create a separate page of CSS information, save it as a ".css" file, and add this link to it inside the <head> tags:
   
   <link ref="mystyles.css" rel="stylesheet" type="text/css">
   
   
2. You can add CSS directly to your html page by putting this inside your <head> tags:
   
   <style type="text/css">
   
   Your CSS information goes here.
   
   </style>
   
   This style will override anything that's on your "mystyles.css" page.
3. You can add CSS to your page by adding the style directly to the HTML tag, called 'inline styles'.
   
   <p style="CSS information goes here">Text goes here.</p>
   
   Using this example, the CSS information only applies to this paragraph and none of the others. It will override any settings you may have in either a separate stylesheet or in the <style> tag in the <head>.

Now What?

Now we play "Let's Pretend". It's late Sunday night, your ten page essay for Mr. Hecht's history class is finally finished and due first thing tomorrow morning. And your printer breaks down!

What do you do? Call your best friend and have them print it out at 11pm? Get your parents out of bed to fix the printer? Panic?

None of the above. With a few quick changes, you can save your file as an HTML document, upload it to your web space and print it out when you get to school. This not only gets around the 'no disks from home' rule and the hassle of having to open both a browser and a word processor.

Text

CSS divides content into two sections - "text" and "font". "Font" refers specifically to the written information, but some of the "text" information can be used for other elements as well, such as tables and images. We'll start with "text" for that reason.

One of the first things we do on a web page is to align our content. There are four possible settings: "left" is the default alignment, "right", "center", and "justify", which spreads or condenses the information so that both the left and right margins are the same. In CSS, alignment is written as:

We can use these properties to change the alignment of our headings, our main text and our quoted material. I'll show you how when we put everything to gether.

One of the nice things about CSS is its flexibility. HTML, as you've already learned, is restricted to two types of colour information - predefined names like "red" or "blue", or the mysterious hexadecimal values, "#FF0000" or "#0000FF". With CSS, you can also use RGB values, (255, 0, 0) or (0, 0, 255), just as some graphics programmes use. These are written as:

If we were using 'web safe' colours, we'd be writing our hexadecimal values in pairs: FF, CC, 99, 66, 33 or 00. CSS recognizes that and permits a shorthand version of the colours: #F00 is the same as #FF0000. I'm your basic lazy typist. I'll be using this shorthand method for all the colours we'll use.

So we have our text aligned and the colour chosen. How do we get it to look like a 'real page'? There are five ways to change the appearance of your text.

There's something else we can do with our text that HTML wouldn't permit. We can indent the first lines of our paragraphs. Our web page will look exactly like this page does if we add this to our text information:

We can use just about any value for the indentation, so long as we add the measurement. Pixels (px) and percentages (%) are the most common way of measuring the width of the indent, but we could also use ems (em), as well. Ems are actually a print measurement. One em is equal to the width of the letter 'M' in the current font and font size. Change the font or the size and the width of the 'em' changes.

Fonts

Mr. Hecht has decreed that all essays will be written out, not typed, and he doesn't want to see any minature chickenscratch or bright colours.

You've found a font on the school computers that matches your handwriting exactly - OuterSlobovian CS.Adding this font to your page is simple:

But then you remember that not all of the school's computers have that particular font. Those that don't, you know, have "Scribblescript", which is similar. Your font information could read:

Note that font names of more than one word are enclosed in quotations while single word fonts are not.

What if you have to use Mr. Hecht's computer to print out your essay? Does he have OuterSlobovian CS or Scribblescript? There's one last additionto your font family information that will cover that problem.

The last font is considered a 'generic font family'. There are five generic groups.

Generic font families are 'last resort' fonts and may not contain all the characters a page requires. They are never put into quotation marks.

One Up, One Down

Now that we've gotten the font looking like your handwriting, how do we change it so that it can be easily read? And all our titles were coloured? Changing the colour is easy, but how do we get the titles to stand out?

First things first. The size. As with HTML, changing font size is fairly simple. There are four ways to define a font size.

• { font-size: <absolute size>; }
  
  You have several choices for this:
  
  • xx-small
  • x-small
  • small
  • medium
  • large
  • x-large, and
  • xx-large.
  
  
• { font-size: <relative size>; }
  
  There are only two relative sizes you can use: smaller, and larger. The first decreases the size by one measurement and the second increases it by one measurement.
  
  
• { font-size: <specific size>; }
  
  You can specify sizes such as 12pt or 10px.
  
  
• { font-size: <percentage size>; }
  
  Percentages will increase or decrease the font size by a percentage of the original font size. For example, if your page has a font size of 10px and you change the size of one section by 150%, the font for that section would be 15px. Conversely, if you had a font size of 20px and you changed it by 50%, the resulting size would be 10px.

One thing to note. There is, in a sense, no difference between a font size of 10pt and 10px - if you're viewing the page on the same platform as the page was created. There can be major differences between Macs and PCs. Using px sizes will ensure that your text will be the same size, regardless of the platform of the user. In the same vein, using fonts smaller than 9px will be unreadable on some computers, depending on both the platform and the resolution.

But, back to Mr. Hecht's essay...

With HTML, there was only one way to change the 'weight' or thickness of your text- <b> or <strong>. Both had the same effect on the text. With CSS, there are 12 ways to change the weight of your text. The first nine are easy - numeric values of 100, 200, 300, 400, 500, 600, 700, 800 and 900. 400 is the equivalent of 'normal' text and 700 is the same as 'bold'.

You can also state that text can be 'bolder' or 'lighter' than the original font. Like this:

• { font-weight: normal; }


• { font-weight: bold; }


• { font-weight: bolder; }


• { font-weight: lighter; }


• { font-weight: 600; }

Another way of changing font appearance is the 'style', or slant of the letters.

{ font-style: normal; }This is regular Times text.
{ font-style: italic; } This is italicized Times text. The letters are not just slanted, but shaped differently.

{ font-style: oblique; }

See the difference?

Putting It All Together

So, we know what we need to do, how do we do it? For argument's sake, we'll make our stylesheet an external one. (You'll see why in the next section.) The first thing we need to do is review our essay and try to sort the different styles of writing into easily described groups, most common to least common. We have:

• The main title
• Sub- or section titles
• Quotations from books, both in the middle of sentences and set apart from the main text
• Book titles, both at the bottom of quoted paragraphs and in the middle of sentences
• The rest of our information

We also have to have:

• All our text as 'handwriting'
• Our text has to be in blue ink
• Our text has to be easily read
• Main titles must be centered and larger than the regular text
• Section titles must be underlined, as must book titles.
• Paragraphs must be indented.
• Our quotations must be clearly marked as quotations.

It looks like a lot, but we can save some time by adapting HTML tags for most of our changes and using <span class="mystyle"></span> tags for the 'inline' changes.

The main things we need to have our 'handwritten' text, blue ink, large, plain print and indented paragraphs. These things will apply to all the text, so we can write it into the <body> tag. The first entry we'll have on our stylesheet is:

We can use the <h#> tags for our titles. We'll use <h1> for our main titles and <h2> for our subtitles.

h1 { text-align: center; font-size: larger; font-weight: bold; }
h2 { text-decoration: underline; }

We don't need to add font family or colour information to these because we're not changing them from the original text. We do need to make an adjustment to the <p> tags, though. Indentation only applies to the paragraphs and not all the text, so our next line of CSS is:

The easiest way to write large sections of quoted material is to use the <blockquote> tag. The <blockquote> tag will automatically indent both margins, but to really make it stand out, we can add this:

For the book titles that follow the quotations, because they're inside the <blockquote> tags, we can add this:

What we've done is created a 'class'. We'd write the HTML as:

We'll need to create classes for the inline quotations and titles as well.

We'll write the HTML as:

The classes have to have a . in front of the name when you're creating them. They can be given any name you wish, however, it's a good idea to give them names that mean something to you and names that aren't already used as 'command words'. We could have used 'title' and 'quote' for our class names, but 'title' is also used as an HTML tag and 'quote' is a command function in vBasic. Adding the 'i' to the words reminds us that they're used for 'inline' information and the 'bq' added to 'title' is a reminder that this particular style is used for titles inside the <blockquote> tag.

Each of the tags we've changed - <body>, <h1>, <h2>, <p> and <blockquote> could have been given class names, but then, each section that used one of those tags would have to have 'class="style"' added to it. By defining the entire tag with CSS, you have less code to write and less chance of an error.

Now we have our CSS sheet done, we'll save it as "essay.css" and then go tweak the essay.html page we created from our word processor document. We'll need to add a couple of things to the <head> tags, remember.

Our document should start out like this:

Once we have all the HTML properly set, we upload it to our webspace and we're done.

The nice thing about CSS is that, should Mr. Hecht change his mind tomorrow morning and want everything typed out, we only need to go into our stylesheet, change the font-family and print everything out.

On the next page, I've used the CSS information as 'content' instead of an essay, but the basic look of the web page would be the same. The only difference I'll make is to colour the tags and the property definitions so that you can find them more easily.

Style Sheet Example

"History On-line" puts everything we've learned here, and a bit more, onto a 'real' web page.