HTMLGuy's CSS Tutorial

Zack · 12-28-2005, 02:09 PM

If you have not read the HTML Tutorial or you are not familiar with HTML click here. Else, read on

.

CSS is one of the main styling agents on the web today. CSS (or cascading style sheets) can be very useful to a website designer who is ready to have cleaner, and nicer looking sites. There is a set back though. CSS can get confusing and has some tough problems to sort out. I'll go through the basics of CSS here, but remember, this is just scratching the surface.

To Use Style Sheets you must implement one of two options of code into a HTML page's header. In the Header you would have something like the following:

Code:

<style type="text/css">
CSS Info
</style>

You could also have your page automatically pull a style from your hard drive, or your host by implementing this code...

Code:

<link href="mystyle.css" rel="stylesheet" type="text/css">

NOTE: To all those who can't figure out how to save a CSS file, write your CSS in Notepad, and save it as (whatever).css . Make sure the option box below says "All File Types" instead of "Text Document (.txt)".

Global Styles are styles that are applied to the whole page. Here is a list, by me, that shows some global styles in action.

Background Color, and Font Properties

Code:

body {
background: white;
font-family: verdana;
font-color: black;
}

Pretty Much Self-Explanatory

Link Color, Style (a is a link, a:visited is a visited link, a:hover is a link onMouseover, and a:active is a clicked link)

Code:

a {
color: black;
text-decoration: underline;
}

a:visited {
color: red;
text-decoration: underline;
}

a:hover {
color: blue;
text-decoration: none;
}

a:active {
color: yellow;
text-decoration: overline;
}

color: x is the color of the link when it is described by the CSS, and text-decoration is what is decorating the text, such as lines, or such.

Non-Global Styles, or styles that are only used when called upon.

Divs

Code:

div#mydiv {
width: 90%;
padding: 1%;
color: red;
background: yellow;
}

div#mydiv a, a:visited, a:hover, a:active {
color: red;
text-decoration: underline;
}

Divs are possibly the most important CSS styles there are. You are basically creating a table, but with tons more options. They are more professional also. Basically all of the attributes are explainatory, but for those who don't know, padding is how much space is between the border and the content. Also, I styled links for my div. The only links that will have that style would be in my div. How do you call upon a div in the body? Here is the code...

Code:

<div id="mydiv">Content Here</div>

Classes

Code:

a.special, a.special:hover {
text-decoration: none;
}

Classes are also a widely used CSS style. Basically it is the same thing as a div, but only affects the style of certain things. I only used the example of links but you can also have special font, special anything but rock things like tables, and margins (well, thinking about it you could, but it is useless). Here is how I would tell the browser that only this link is special.

Code:

<a href="#">Not a Special Link</a>
<br />
<a href="#" class="special">Special Link</a>

This was just a scratch on the surface of CSS. To learn more go to one of these links. If you know a good link, please post it, I will consider. All work is by me on this post!

Links:
W3 Schools
7 Reasons to Use CSS and a quote from rohan2kool:

Quote:

Originally Posted by rohan2kool

One more reason: When you use lot of tables and all that stuff, chacnes of validation go down considerably. Using CSS and HTML together your chances of getting your page validated is much higher. For ex. A site I was making returned 122 errors with the W3C validator. A member called trollop at Opera forums, re-did the same layout using only CSS and <div> and presto!!! it was validated and I don't remember a single thing that was different.

P.S: Also, the code now shrunk to almost 60% of it's original size.

HTMLGuy

COBOLdinosaur · 02-19-2006, 05:03 PM

I think someone just learning does not want to do this:

Code:

div#mydiv {
width: 90%;
padding: 1%;
color: red;
background: yellow;
}

div#mydiv a, a:visited, a:hover, a:active {
color: red;
text-decoration: underline;
}

That implies that more than one element may have the ID "mydiv". If you are following standards and best practices then every id should be unique to a single element and div#mydiv is redundant and misleading. All that should be required is #mydiv.

Being new on this site maybe that will be considered out of line, but I just don't want to see folks who are just learning CSS starting out on the road to bloated stylesheets.

The w3schools link i sa good starting point. This is also a good one:
http://www.wpdfd.com/editorial/basics/index.html

and once someone gets the basics it is a good idea to get familar with the standards (not just for CSS but for HTML as well) at http://www.w3c.org who are the guardians of web standards.

If someone gets stuck and can't find what they need, or need specialized help, they can find me several other CSS oriented developers at http://www.expertsrt.com

Zack · 02-20-2006, 03:00 PM

You aren't familiar with IE7 are you

? The Microsoft Developers encourage that so the css engine doesn't get confused, I'm teaching the newest stuff, not the basics. I want people to learn css in an enviroment on which it will work on all platforms. Thanks for the comments though.
HTMLGuy

COBOLdinosaur · 02-21-2006, 03:51 AM

IE7 is beta and still full of bugs. I have not seen any documentation from Microsoft or anyone else that such a non-standard and non-intuitive approach was necessary. As for my fammilar I am with M$ I have sold and supported it since 1983, and I have have developed for evey browser they ever produce. That does not mitigate thefact that their current browers since IE5 is bloated crude.

You support it by doing the code correctly to standards and adjust to to get acceptable behaviour from IE without degrading the rendering quality for compliant browsers.

If there is some question about my qualifications you can check me out here:
http://www.experts-exchange.com/Web/Web_Languages/CSS/
Where I started the CSS forum in 2000 and edited it until I left that site in August... Or any of a dozen other sites where post.

Sorry if I got in the way of your tutorial, but recommending that format is bad advice. I understand you may not like someone new on the site criticizing; I been there myself, but I am not known for keeping quiet about mistakes the use web standards.

Zack · 03-15-2006, 08:47 PM

Your point is made, very good job at correcting me. I am still messing with this code, and I see where you are coming from, but as you know, IE has bugs, yet most people use it who are non-developers / designers / coders, which creates the target market / programming area IE, so we might as well put IE first. I called this a CSS tutorial, not a CSS Beginner Tutorial, this is just to help cover some questions so that this area doesn't get as congested with mundane problems which I have discussed in my tutorial. But, as I said, I respect your opinion as an iWEBTOOL member, and I listen to what you say, and as always I am experimenting with new code to help designers...not hurt them. My intention is to help their site building process, and you have helped me acheive that goal, by correcting a seemed mistake. Thank you for your reply! Oh, and I am pleased you got in the way of my tutorial, I love being proved wrong so I can teach people better, and you are certainly not in the way, as you suggest.
HTMLGuy

COBOLdinosaur · 03-16-2006, 02:57 AM

Quote:

My intention is to help their site building process,

We are on the same page. I post on a lot forums and helps site, as well as moderating operating them. I also was trying to help. It is what I do, and have been doing a long time. Writing tutorials, and support members on a site like this is a difficult, and deserving of respect.

If I came across a little harsh; I appologize. It was not my intent. I have perhaps gotten a little to used to the more aggressive approach to finding solutions that is the common style on some forums where post as an advocate for standards compliance and open source. Perhaps I am out of bounds with those debates, but developers and site operators really need to look at standards compliance from the point of view of lower cost and faster easier maintenance. Initially it takes little longer to do things to standards but in the long run the difference in the cost of both maintenance ond new development put you way ahead of the game.

On my own site the time it takes to modify a page from the forum where I am using old off the shelf software it three times as long as it takes for changes on the pages that are to, or close to standards. I just try to let guide others away from high cost mistakes. :cool:

02-19-2006, 05:03 PM	#2
COBOLdinosaur Newcomer Join Date: Feb 2006 Location: Canada Posts: 7	Re: HTMLGuy's CSS Tutorial I think someone just learning does not want to do this: Code: div#mydiv { width: 90%; padding: 1%; color: red; background: yellow; } div#mydiv a, a:visited, a:hover, a:active { color: red; text-decoration: underline; } That implies that more than one element may have the ID "mydiv". If you are following standards and best practices then every id should be unique to a single element and div#mydiv is redundant and misleading. All that should be required is #mydiv. Being new on this site maybe that will be considered out of line, but I just don't want to see folks who are just learning CSS starting out on the road to bloated stylesheets. The w3schools link i sa good starting point. This is also a good one: http://www.wpdfd.com/editorial/basics/index.html and once someone gets the basics it is a good idea to get familar with the standards (not just for CSS but for HTML as well) at http://www.w3c.org who are the guardians of web standards. If someone gets stuck and can't find what they need, or need specialized help, they can find me several other CSS oriented developers at http://www.expertsrt.com __________________ Cd& Home: http://www.expertsrt.com Drop by anytime you need tech support that you can't get here

02-20-2006, 03:00 PM	#3
Zack Junior Guru Join Date: Dec 2005 Location: North Carolina Posts: 760	Re: HTMLGuy's CSS Tutorial You aren't familiar with IE7 are you ? The Microsoft Developers encourage that so the css engine doesn't get confused, I'm teaching the newest stuff, not the basics. I want people to learn css in an enviroment on which it will work on all platforms. Thanks for the comments though. HTMLGuy __________________ Thumpr ~ Xcolored

02-21-2006, 03:51 AM	#4
COBOLdinosaur Newcomer Join Date: Feb 2006 Location: Canada Posts: 7	Re: HTMLGuy's CSS Tutorial IE7 is beta and still full of bugs. I have not seen any documentation from Microsoft or anyone else that such a non-standard and non-intuitive approach was necessary. As for my fammilar I am with M$ I have sold and supported it since 1983, and I have have developed for evey browser they ever produce. That does not mitigate thefact that their current browers since IE5 is bloated crude. You support it by doing the code correctly to standards and adjust to to get acceptable behaviour from IE without degrading the rendering quality for compliant browsers. If there is some question about my qualifications you can check me out here: http://www.experts-exchange.com/Web/Web_Languages/CSS/ Where I started the CSS forum in 2000 and edited it until I left that site in August... Or any of a dozen other sites where post. Sorry if I got in the way of your tutorial, but recommending that format is bad advice. I understand you may not like someone new on the site criticizing; I been there myself, but I am not known for keeping quiet about mistakes the use web standards. __________________ Cd& Home: http://www.expertsrt.com Drop by anytime you need tech support that you can't get here

03-15-2006, 08:47 PM	#5
Zack Junior Guru Join Date: Dec 2005 Location: North Carolina Posts: 760	Re: HTMLGuy's CSS Tutorial Your point is made, very good job at correcting me. I am still messing with this code, and I see where you are coming from, but as you know, IE has bugs, yet most people use it who are non-developers / designers / coders, which creates the target market / programming area IE, so we might as well put IE first. I called this a CSS tutorial, not a CSS Beginner Tutorial, this is just to help cover some questions so that this area doesn't get as congested with mundane problems which I have discussed in my tutorial. But, as I said, I respect your opinion as an iWEBTOOL member, and I listen to what you say, and as always I am experimenting with new code to help designers...not hurt them. My intention is to help their site building process, and you have helped me acheive that goal, by correcting a seemed mistake. Thank you for your reply! Oh, and I am pleased you got in the way of my tutorial, I love being proved wrong so I can teach people better, and you are certainly not in the way, as you suggest. HTMLGuy __________________ Thumpr ~ Xcolored

Thread Tools	Search this Thread
Show Printable Version Email this Page	Search this Thread: Advanced Search
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
CSS Tutorial	fire_lady	Web Development	6	02-09-2007 01:34 AM
create buttons tutorial	lite_ws	Web Development	2	01-26-2007 01:32 PM
HTMLGuy's HTML Tutorial	Zack	HTML	8	10-22-2006 04:11 PM
Tutorial Template	Zack	Websites for Sale	0	02-20-2006 03:06 PM