|
|
||||||||||||||||||||
|
|
|
|
||||||||||||||||||
|
|
||||||||||||||||||||
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|||
|
|
|
|
|
|
|
|
|
|||||||||||||
|
|
||||||||||||||||||||
|
#1
10-28-2008, 08:35 AM
|
||||
|
||||
|
Wanna learn CSS?
Due to popular demand:
Okay, this is for those who want to move past HTML into CSS. For starters, make the following two files, and put them in the same folder: Second.htm Css.css Both should just be empty text files. Now, copy and paste this into the HTML file: <head> <title>Untitled Page</title> <linkrel="Stylesheet"type="text/css"href="style.css"/> </head> <body> </body> </html> And copy this into the css file: body { } Save them both and open the html file in a browser. We’re back to the boring old white web page if you read the HTML thread. The first new thing you might notice is this tag: <linkrel="Stylesheet"type="text/css"href="style.css"/> I won’t pretend to know exactly why you need the rel and type tags, but you do, and they will pretty much always use these values, so copy and paste this until you puke. Or not. Keep it in the Head tags so that the style sheet information will be used by the whole document. Now, the magic of CSS is that it takes all of your formatting out of the html, making your html file “lighter” (less text), which is a good thing, especially for those poor schmucks still using dial up. It has a unique format all it’s own, but don’t worry, its not very complicated. What we will start with are Element styles. These relate to a specific type of tag, so a, body, form, you get it. Up above we specified body, so everything we stick in there will affect the Body tag directly. A part of the Cascading is cascading style sheets is that whatever you do to a tag, affects all of the tags within that tag. So if you set the background color of the body tag, and a paragraph tag is in that body tag with no formatting of its own, its background color will be the same. So for starters, open the .css file, and copy and paste the following over what is already in there: body { background-color:Lime; } 
|
|
#2
10-28-2008, 08:36 AM
|
||||
|
||||
|
Now save it and refresh your html page. That is a downright awful color on its own, but it certainly gets the point across. Now, edit your html page real quick, type something clever in a paragraph tag and save it.
<p>Something Clever</p> Now, in your css file, add this: body { background-color:Lime; color:Yellow; } Now save them both and refresh your browser. You are probably now working on one hell of a headache. However, here is where we learn another fun rule of css: Styles applied to a tag take precedence over those applied to the containing tag. Basically, the body style says that the background color I slime green and its text is difficult to read yellow, but if we tell it to do something less horrible with the p tags, it will win over. Add this After the closing curly bracket for the body style, thusly: body { background-color:Lime; color:Yellow; } p { background-color:Maroon; color:Silver; } Now save and refresh your browser. There, much nicer, eh? Css is very flexible, so if you delete one of the properties in the p style, the body style immediately takes it over. Go ahead and delete the color:silver line, save and refresh and see the difference. This is just barely a scratch on the surface of what can be done with css, but it should get some base concepts down.
|
|
#4
10-30-2008, 11:00 AM
|
||||
|
||||
|
I am doing pretty well with css so I didn't really say much in here. You're very good at teaching though. It's almost nicer reading your thread because you don't talk down to me like my professor does. You could even post the links to w3schools html and css editors so people can see and edit their examples. I find w3 makes things a little vague though.
__________________
|
 |
|
|
