View Single Post
    #2 (permalink)  
Old 05-21-2008
Tess's Avatar
Tess Tess is offline
Senior Member
Company name: Codehead, LLP
Latest blog post: SEO Q&A
 
Join Date: Apr 2007
Location: Portland, OR
Posts: 9,131
Blog Entries: 3
Default HTML and CSS - THE BASICS Session FOUR with Codehead - Archive
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 !!
__________________
Create a welcome packet for new clients with this guide and free templates!

(Available in PDF and Kindle versions)
Reply With Quote