THIS TUTORIAL COVERS THE CREATION OF CSS STYLE SHEETS OTHERWISE KNOWN AS CSS STYLE SHEETS
—————————————————————————
YOU WILL BE CREATING TWO SEPERATE PAGES:
1. PAGE WILL BE HTML CONTENT — AND VIEWABLE AS A HOME PAGE, LINK PAGE, SECOND PAGE, ETC. FOR YOUR SITE.
2. WILL BE DESCRIPTIONS WRITTEN IN CODE FOR THE OTHER PAGES AND ON HOW THE ELEMENTS ON THOSE PAGES SHOULD BE STYLED.
START BY MAKING YOUR HTML PAGE IN TEXT WRANGLER OR A CODE EDITOR:
———————————————————————————
1ST PAGE — THIS IS GOING TO BE OUR HTML PAGE — LETS SAVE IT AS “ourfirstpage.html”
———————————————————————————-
<!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01//EN”> <html>
<head> <title>My first styled page</title>
/* THE LINK WRITTEN BELOW LINKS TO OUR FUTURE SYLE PAGE — IT IS CALLED POINTING, AND IT LOOKS FOR THAT PAGE BEFORE IT DOES ANYTHING MORE… WHEN IT FINDS THAT PAGE WE WILL ADDS LOTS OF COOOL STUFF SO THE PAGE CHANGES TO DIFFERENT COLORS, DIFFERENT MARGINS, ETC…. */
<link rel=”stylesheet” href=”http://www.professorcafe.com/style.css”> </head>
<body> <!– Site navigation menu –> <ul> <li><a href=”http://www.professorcafe.com/csss.html”>Home page</a> <li>
<a href=”http://www.justinhoffman.net”>Class Site</a> <li>
<a href=”http://www.khas.edu.tr/ “>KadirHas</a> <li>
<a href=”http://www.justinhoffman.net”>Links</a>
</ul> <!– Main content –> <h1> A VERY STYLISH PAGE</h1>
<p>Welcome to my first css page, ain’t it cool!!!
<p>Images would be really fantastic Here!!! Maybe I will place some later!!
<p>This is the place I plan to discuss interesting topics for hours and hours and hours!!
<h2> HOW ABOUT DIFFERENT COLORS AND STUFF?!!! </h2>
<!– Sign and date the page, it’s only polite! –> <address>Made 11 March 2010<br> by myself.</address> </body> </html>
————————————————-
OK — LETS TAKE A LOOK AT THAT PAGE NOW… WE WILL NOTICE THAT IT HAS THE TEXT BUT THEIR ARE NO COLOR CHANGES, ETC….. SO LET’S MAKE A CSS PAGE ….
—————————————————-
2ND PAGE — ONCE AGAIN, THIS PAGE IS JUST TELLING THE FIRST PAGE HOW TO LOOK, IT IS NOT FOR VIEWING OR LINKING!!~ lets save this as — “sytle.css ” — NOTICE THE ENDING IS NOT .HTML OR .HTM — BUT RATHER ” .css ” —-
—————————————————–
body { padding-left: 11em; font-family: Georgia, “Times New Roman”, Times, serif; color: #C0C0C0; background-color: #FF0000 }
ul.navbar { list-style-type: none; padding: 0; margin: 0; position: absolute; top: 2em; left: 1em; width: 9em }
h1 { font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif }
h2 { font-family: Georgia, “Times New Roman”, Times, serif; color: #00FF00; }
ul.navbar li { background: white; margin: 0.5em 0; padding: 0.3em; border-right: 1em solid black }
ul.navbar a { text-decoration: none }
a:link { color: blue }
a:visited { color: purple }
address { margin-top: 1em; padding-top: 1em; border-top: thin dotted }
————————————————————
NOW GO BACK TO THE WEB AND SEE YOUR STYLED PAGE — AND NOW YOU CAN MAKE MANY MORE PAGES THAT REFERENCE THE STYLE.CSS PAGE… SO THEY WILL ALL HAVE THE SAME LOOK — THAT ROCK’S DUDE!!!!
——————————————————————-
HERE ARE LINKS FOR REFRENCE INFORMATION— SOME OF THE INFORMATION FROM ABOVE WAS TAKEN FROM THE LINK DIRECTLY BELOW
————————————————————————
http://www.w3.org/Style/Examples/011/firstcss
http://www.w3.org/MarkUp/Guide/Style
TIPS AND TRICKS