MDCM2002 : Web XHTML/CSS Module Week 2 Page 2
What we are doing.
Today
we are working on two documents: The first page of our website/hypertext from last week called week1aYourInitial.html . A new plain text file edited in TextEdit that we wil call SNstyle.css this is your CSS Stylesheet.The page CSS Stylesheet tells your HTML document how it should look. We put our content in the HTML document and the form in the CSS document. This means we have to markup our HTML document with tags that tell the browser what type of content (a heading, a paragraph, a navigation bar) is in our HTML. We then tell the HTML how to format those types of content in the the CSS file.
Setting up the Cascading Style Sheet.
1) Open your first HTML file (week1amws.html for example) in text edit.
2) Change your CSS file link to read SNstyle.css;
In the header of that first page (between the head tags) we defined a link to and CSS file. We are going to change the name of that link to begin with.
You can see that here I've replace the name Week1amws.css with SNStyle.css. I'd like you to do exactly the same thing.
3) In TextEdit go to File > New. An untilted document will pop up.
4) Ensure you go to Format > and ensure the make rich text option is available but don't select it : We want plain text. Plain text should be selected by default.
5) Now go to File > Save As and save the new file as SNstyle.css where there is the option for selecting the Plain Text Encoding select Unicode UTF-8.
This file is our Cascading Style Sheet. We will put all our form information in here and all our content on the HTML.
Identifying our Content by Semantics (Meaning).
The first thing we'll do is add a heading to our HTML document and the divide up our content inot semantic bundles - that is we'll name it section after what it is - a heading, a paragraph, a navigation bar etc. etc.
1) In the HTML document just under the first <body> tag add another line by pressing return. Now after reading your paragraph come up with a short name that frames the content. I chose The Pendulum's Swing.
2) Type the heading into a line below the <body> tag.
3) Now we have to define the Heading as a heading. CSS has a number of standard settings already defined by browser and Heading is one of them - that said we can alter the headings default via CSS.
<body>
<h1>The Pendulum's Swing</h1>
4) Now well define the parapgraph as a paragraph (surprisingly). We can do this by using another standard css class; <p>. </p> which stands for Paragraph.
Our First Styles;
1) Open your HTML file in a Browser. You'll see that already our Heading is defined as a heading and shows up in the browsers default setting and our paragraph automatically starts under the heading as a new paragraph.
2) That is nice but not very pretty. So lets look at how to modify the default. Head over to your CSS file and add the following code. Adjust your windows so you can see your Browser window while you edit your CSS file:
body {
font-size: 80%
font-family:
Helevetica, Arial, sans serif;
}
h1 {
font-size: 2em;
font-family: Georgia, Times New Roman, serif;
font-weight: bold;
font-style: italic;
}
p {
font-size: 1em;
font-family: Georgia, Times New Roman, serif;
font-weight: normal;
font-style: normal;
}
3) Save your CSS file and then move over to your browser and reload your page. Holding shift and hitting the Reload button in the browser will make sure the page is updated in the Browser.
You should see asomething like this
;
If not there is a typo in your code. Look for missing brackets and missing semicolons as they are common errors.
Lets look at what that CSS does exactly;
The Body;
body {
font-size: 80%
font-family:
Helevetica, Arial, sans serif;
}
This tag defines some general qualitites for the entire <body> section of our HTML document;
Here I stipulate font-size as a percentage base font size. This is a percentage of the users default browser font. All other fonts will be defined in relation to this size. This means that if I wanted to scale all the text on the site I could just change this percentage and all other fonts would change in relation to that font size. Using percentage as opposed to the very common designer habit of using pixels means we give the user control over their font -size - if they are visually impaired they will have a large default set - my font-size is stipulated in reference to that and my future font sizes will reference that percentage.
Get your tutor to go over this with you if you are confused.
Next I determine default font-family.
Remember that I/we have to use the fonts that exist on the users computer. Unlike Flash there is not an easy way to include the fancy fonts that we used last year in our Flash classes. The good thing is that most of the time we don't need all those fonts and that most of them are a bit cheesy anyway. Non-standard fonts really come into their own when we are designing logos or banners and on the web we tend to design with them in a grahics program and export the image file.
Here's the code for font family again:
font-family: Helevetica, Arial, sans serif;
I have selected Helvetica which is a Apple/Mac font - if the user's computer has this font it will dispay that one. After a comma I have also added Arial which is a good backup to Helevetica - both fonts are sans serif - meaning they don't have serifs - the little fancy adornments on letters that fonts like 'Times Roman' do.
No matter what font-family I choose first second, third. I should end with a generic specification; either serif or sans-serif so my machine can choose the closest possible match for my design. There is a great table comparing fonts on both Mac and Windows over here. That said please don't use Comic Sans - please??? Keep you font choices to a minmum maybe one font for <H1> and one for the rest. Don't go font crazy and in most cases Verdana. Arial, Helvetica, Georgia, Times New Roman and perhaps Lucida are the best choices.
The Heading;
h1 {
font-size: 2em;
font-family: Georgia, New Times Roman, serif;
font-weight: bold;
font-style: italic;
}
Now in the above code I have used a standard HTML class selector <h1> (meaning its already predefined but that we can change what it actually means). If I didn't specifiy anyhting at all in my CSS <h1> would still look like a heading but would use the Browsers default <h1> style.
In the above code I've stipulated the class I'm changing;
h1 {
}
Then I have added a whole bunch of standard font properties.
These properties inlcude;
font-size, font-family, font-weight and font-style.
Font-Size:
font-size: 2em;
This maybe the first time you've seen a font size specified using em measurment. You can read more about it here. Basically em originally stood for the width of the letter M - now its a little different and refers to font height,. The important thing to note is that rather than stipulating an absolute value like pixels (px) we are stipulating a relative value. By stipulating 2em I am actually saying make this font 2 times bigger than my base font (which remeber was 80% of my users default).
We'll see this measurment a lot more in the coming pages so don't worry if it hurts your head. It lets us stipulate a font realtive to one measurement allowing us to change fonts site-wide in one property - the 80% stipluated in the body tag.
Other font properties;
We have already talked about the font-family setting, the other two are fairly obvious. Font-Style allows us to turn on italic (amongst other qualities rarely used) and Font-Weight allows us to stipulate a weight; font-weight can be stipulated as a number 100,200,300.....400...700..900.. (400 is normal and 700 is bold) or as bold, bolder, or even lighter.
A Font Shortcut:
I can use one property to define all of these. The order is important though.. I could do this;
font : italic bold 2em Helevetica, Arial, sans-serif
The important thing is to remember that I MUST include the font size and the font family otherwise the font shortcut won't work.
The paragraph section does excactly the same thing for the text enclosed in <p></p>
p {
font-size: 1em;
font-family: Georgia, Times New Roman, serif;
font-weight: normal;
font-style: normal;
}
don't forget the semi-colon that must end all CSS properties
Exercise playing with CSS;
1) Try changing some of the values;
See how changing the Body font-size value changes the rest of the fonts.
Try and find some good combinations of font weight, style, and family.
2) Note that you can do this very quickly by having your CSS open and your Browser open on the page. Just save a change to your CSS file in TextEdit and then refresh the page in your browser by hitting 'Reload'.