HTML and CSS - THE BASICS Session FOUR with Codehead - archive - Virtual Assistant Forums

Tess · #1 (**permalink**) 05-21-2008

NOTE: These archives, as well as ALL posted material on Virtual Assistant Forums, is copyrighted and may NOT be copied to another site under ANY circumstances unless otherwise noted. Please respect this free community feature!

Codehead: I hope you are all doing great! Did you guys get to study the first 3 classes? Make sure you read them, a few HTML basics is better than nothing

You can find the previous sessions in the archive here:
SESSION ONE: HTML - THE BASICS Session ONE with Codehead - archive
SESSION TWO: HTML - THE BASICS Session TWO with Codehead - archive
SESSION THREE: HTML - THE BASICS Session THREE with Codehead - archive

First I want to explain one important thing called CODING STYLE (before we get staretd with CSS) and it's a general practice in all programming languages.

The problem with being able to fully address coding style here is that this chat software doesn't show my code with things like indentations, white space, etc. so all the code I post here looks 'flat'.

The proper way of formatting your HTML code is like this [click 'view source' on the page at the link below to see what I mean]:
http://www.virtualassistantforums.co...ing_style.html

When you right click on the page and click "View Source" you will see how the source code is formatted. Formatting your code properly will help you edit, maintain and debug your code easily later.

To compare this to poorly formatted code, open this link and view the source: http://www.virtualassistantforums.co...tyle_poor.html

'White spaces' are ignored by the browser.
So you can have empty lines between logical sections in your code such as paragraphs <p></p> or headings <h1></h1> just like the source code here:
http://www.virtualassistantforums.co...ing_style.html
By keeping your coded sections apart from eachother in this way you can more easily work with longer pages of code - for instance when you have a page with a lot of text and images on it...

There is also another practice called CODE INDENTATION which you can achieve by hitting your "tab" key at the begining of a line of code.
To understand this better, I want to show you another example. Check out the source code of the example from session 3:
http://www.virtualassistantforums.co...tml_table.html
Again right click and click "View Source" so you can see the source code and my white spaces and indentations.

So now compare the source code for this:
http://www.virtualassistantforums.co...tml_table.html

With the source code for this:
http://www.virtualassistantforums.co...able_poor.html

Can you see the difference? The scary thing is that they look exactly the same when rendered in your browser! But the second version can lead to nightmares later when you have edits to make, etc.
And believe me, you will definitely come back to your code later for maintanance and edits, as many of you already know.

To recap:
USE WHITE SPACE between your major code sections
INDENT your code!

Let's get started now with CSS.
CSS stands for CASCADING STYLE SHEETS.
Before CSS developers used to write code like this:
...
<body>
<font face="Tahoma, MS Sans Serif, Arial" size="+1">This is pre-CSS code. It was time consuming and hard to keep track of design styles</font>
<font color="#FF0000">This is how you would write some text in red!</font>
</body>
...

These kind of <font> tags were all over the place in the code - so consider this:
You have a 35 page website and you use <font> tag to write and style **everything** - for example you use this to write your headings:
<font face="Arial" size="+2" color="#FF0000">Contact Us</font>
Now, imagine that you came to the conclusion that red is not the best color for your heading or Arial is not the font you want to use, how are you going to change the headings on your website to blue? What a pain.... You have to edit 35 pages! Imagine if you miss one of them! What are the odds of error or omission? How long would it take to edit 35 pages and upload them back to your server? How long would it take to find the missed page?

Now imagine if you could just edit the color of your headings for the entire website in ONE place! You would just edit it in one place and the entire site would be magically taken care of, all of a sudden all 35 headings would turn to blue, just like that!!!

Well I have good news for you, CSS is designed to do just that! (more actually...but that's where we'll start)

There is one more thing about CSS, every HTML element like h1 headings or paragraphs, has PROPERTIES. It has a certain kind of font, it's text is a certain color, black by default, and so forth. CSS is designed to manipulate and change these properties in a single place! So with CSS, you can style a whole website in only one place, no mather how many pages the site has, it might be 100,000 pages!

And you can manipulate the properties of HTML elements and style them as you want, for example you can have headings that use Arial font and paragraphs that use Verdana!

As I said before, we are going to learn everything by example in these sessions and I'm going to start off with an example here so don't get overwhelmed, you are going to learn all of this - and more importantly you can ask me here or on the forums if you get stuck. Stay with me...

Because this chat software doesn't understand my code formatting and I want you to start understanding why formatting is important, I'm going to do it a little differently this time.
Point your browser to: http://www.virtualassistantforums.co...css_basic.html
Take some time to create those 3 files mentioned on the page. Take your time - don't rush yourself.

Member: quick question. the first part, should I type it exactly as is or all on one line?

Codehead: Exactly as it is, that is the point of code formatting...
Which one would be easier to understand later? Which one looks nicer? If it was on one line or 3 lines? Imagine if you had this PLUS a hundred other lines of code....if it was all on one line you'd have a heck of a time editing it later

Here is my example page: http://www.virtualassistantforums.co...ss1/page1.html

Let's see how we can *apply* CSS files to our HTML documents first and then I will explain the contents of a CSS file.

In order for a browser to know which CSS file you want to use to style a particular document, you need to link the HTML file and the CSS file together using a tag like this: <link type="text/css" rel="stylesheet" href="style.css">

This will tell the browser to download and use the "style.css" file to style your HTML page.

A few notes about this tag:
1 - This tag should appear in between the head tags. Note the placement of the tag in the code from your example 'HTML Code - Page 1'
2 - Your CSS file can be named anything you want like layout.css or stylesheet.css etc.

Now let's look at our CSS file contents:

h1 {
color:red;
}

Please note that you don't have to *memorize* the information in the next discussion, you will learn these by example over the next few sessions.

This code is called a RULE SET and the sample I have given you is only ONE example of a possible thousand+. This one in particular will style all of the h1 headings in a website to be red.

On the first line "h1" is called a SELECTOR.

Then there is a starting curly brace "{" and then what we call a DECLARATION BLOCK:
color:red;

Note that it ends with a semicolon.

Finally a closing curly brace which marks the END of our RULE SET.

One important thing is that "color" is considered a PROPERTY of h1 - h1 has potentially many more properties which you can manipulate through CSS such as:
font-family
font-size
margin
padding

These properties are pretty standard and many of them work the same for other HTML elements such as paragraphs etc. You don't need to sit down and memorize these, you use a reference whenever you want to use a property you can look it up - after a while you will end up memorizing a lot of them just through regular use on your own site. Here is a great list of PROPERTIES: http://www.htmlpedia.org/wiki/List_of_CSS_Properties
Each of these properties accepts different kinds of VALUES, for example:

h1 {
font-family:arial;
font-size:120%;
margin:20px;
padding:10px;
background-color:black;
color:white;
}

'font-family' accepts the name of the font, 'margin' accepts the size of the margin (here 20 pixels).

In the code above we are manipulating more than one property of the h1 heading at the same time - giving all of the h1 headings in a site numerous decorative qualities. You can have as many rule sets as you want and in those rule sets you can manipulate as many properties as you want.
Also note that we write ONE property per line and separate them with a semicolon ";" and a line break.

(Cont'd in next post, scroll down to continue reading)

Tess · #2 (**permalink**) 05-21-2008

Now, let's forget about all these terms for now and let's see how easy it is to change the color of our headings to blue.
To do this, edit the style.css file you made just a minute ago and saved to your desktop and replace:

color:red;

With:

color:blue;

Now save the edited style.css file and double click on your page1.html page - note the color of you heading.

Now click on the page2.html link and again notice the color of the heading.

Because CSS can be quite complex we're going to take these sessions much slower from now on. They will be shorter than our previous HTML-only sessions and we will only work with one or two examples at a time. There is more for you to practice and become accumstomed and familiar with - and with that in mind we'll go through one more example today and then let you practice what we've done today.

Please point your browser to: http://www.virtualassistantforums.co...ss_basic2.html
And take your time creating the files explained at that page. Don't rush yourself

Don't forget you can copy and paste rather than writing them line by line...But later, when you are practicing on your own do take the time to work on formatting, etc. - it's a very good habit to get into.

Here is my example page if you want to compare your work:
http://www.virtualassistantforums.co...ple_page1.html
As you can see we have more rule sets in our second CSS example:

body {
font-family:tahoma;
}
h1 {
color:red;
font-size:120%;
}
p {
color:blue;
}

Here we ask the browser to change the font in all of the text between the body tags to the Tahoma font. We also ask the browser to make the text between our <h1></h1> tags 120% of the normal text size. We also ask the browser to display all the text between our <p></p> tags as blue. Again we call "color", "font-size" and "font-family" PROPERTIES.

All of the elements on the HTML page have properties, here is a complete list of all possible properties that can be used in CSS (stylesheet):
http://www.htmlpedia.org/wiki/List_of_CSS_Properties

While we won't address each and every one of these properties in detail, we will use many of them as we proceed into our sessions together. Scan the list later to become familiar with the many possible ways in which you can style your web pages.

Now open your new CSS file "second_examplepage_style. css" and experiment with these properties, change your colors and fonts.
Use the Wiki list I just gave you to find colors and font styles to play with.

Note - there are certain fonts that are generally accepted by all browsers, like the ones listed at the Wiki link. Specialized fonts, vanity fonts, etc. that are not globally accepted will NOT display properly on your web page for all users. That's why for basic text you must choose from the list of accepted fonts. Graphic and specialty fonts can be used on a web page as an image - but not as regular text because it will just show up as a default font, usually Arial.Just something to be aware of.

This is it for today. We will show more examples in the next session and then we will start learning some real world examples of using CSS.

Here is the list of examples:
http://www.virtualassistantforums.co...ml_css_s4.html
Everyone should please play around with your practice files from today - add them to your collection of practice files from previous sessions - but perhaps in their own folder for CSS

Thanks everyone and Happy Coding !!

White Rose · #3 (**permalink**) 05-22-2008

Quote:

body {
font-family:tahoma;
}
h1 {
color:red;
font-size:120%;
}
p {
color:blue;
}

The p in the code above - that stands for paragraph?

Codehead · #4 (**permalink**) 05-22-2008

Quote:

The p in the code above - that stands for paragraph?

Yes