Week 2
W3C - World Wide Web Consortium
- HTML tags - http://www.w3schools.com/tags
- Tutorials and more information - http://www.w3schools.com/
Setting up your account & FTPing:
- Accessing your Modwest account to change the password
- Moving your files across using FTP
- Downloading the SmartFTP prgram
- There are also tutorials and support for using and downloading SmartFTP at http://www.smartftp.com/support/howto/.
Comparisons of how we used attributes and values in HTML and now in CSS.
And the special question of the week ... what are those links directly above doing? How?
An Introduction to CSS: |
Tutorials and fun browsing:
http://www.csszengarden.com (beautiful examples of what can be done with css) |
Lists of CSS properties |
HTML: tags, attributes & values
CSS rules: selectors, properties & values
|
Inline |
Internal/Embedded |
External |
In the HTML page |
Old: <body bgcolor=”000000”>
CSS: <body style=”background-color:#000000;”> |
<style type=”text/css”> Body { Background-color:#000000; } </style> </head> <body> |
<link rel=”stylesheet” href=”filename.css” type=”text/css” />
Import: <style type=”text/css”> @import url(filename.css); </style>
|
|
HTML tag styles |
Class |
ID |
Style rule |
H1, h2, h3 { font-family:Verdana, Helvetica, Arial, sans-serif;} |
.shade {background-color:#CCCCCC; Color:#FFFFFF; } |
#content {background-color:#CCCCCC; Color:#FFFFFF; } |
Use in .htm page |
<h1>Heading text> |
<h1 class=”shade”> <div class=”shade”> <p class=”shade”> <span class=”shade” |
<div id=”content”> |
Why???? |
|
Class can be used with as many tags as needed |
Must be unique on a page – only 1 element allowed to have a particular id per page |
|
p.shade {background-color:#CCCCCC;} |
|
|
Additional files to work with:
Click on the links to see the files in action or right click to save them to your computer. (Of course, once you view the files in action, you can do a ViewSource to see the "guts" of the file in Notepad. And, seeing it in Notepad, you can then save it to your computer.
In other words, there's several ways that you can work with these.
mystyle.css; cssexample.htm; page2.html
Janet's favorite web site for inspiration and CSS challenges: http://www.csszengarden.com/
