Embed Size (px)
DESCRIPTION
This will get you started with working with CSS and show you how to link a stylehseet to an HTML document. It will also begin to show you the power of styling to create structure to your Website.
Citation preview
1) Create a basic stylesheet using HTML <div> tags and a CSS
stylehseet
2) create a basic HTML document using <div> tags and "id":
(example) <div id="wrapper">
</div>
<div> tags serve as anchors for your Webpage. You can assign IDs to them
to differentiate one div tag from another on your stylesheet
(example) <div> content </div>
(name the div by assigning an ID attribute) <div id=“content”>
content </div>
<html> <head>
<title>My Page </title> </head> <body>This is where <div> tags go </body></html>
3) HTML Structure:
4) Save as index.html
5) Structure within <body> </body> tags
(creating anchor points):
<div id="wrapper"> <div id="header"> </div><!--Header-->
<div id="navigation"> </div><!--Navigation-->
<div id="menu"> </div><!--Menu-->
<div id="content"> </div><!--Content-->
<div id="footer"> </div><!--Footer--> </div>
Let’s dissect the example
<div id="header"> </div><!--Header-->
So <div> </div> is the tag
Id=“header” is attribute that modifies tag
<!—Header--!> just notes and won’t appear on your site, but keeps you organized
6) Create a document called:
style.css
7) Link your stylesheet to your .html document in the <head> </head>
tags:
<link rel="stylesheet" type="text/css" href="style.css />
8) CSS structure: A) Reference the "class" attribute you created using #B) The define the characteristics
#wrapper { background: #ffffff; margin: 60px auto; width: 900px; height: 1024px; }
*From this point forward check your work after each slide in Firefox to see what your styling of the <div> tags is doing to the document. You will begin
to see structure and style emerge
9) CSS structure: A) Reference the "class" attribute you created using #B) The define the attributes
#header { background: #838283; height: 200px; width: 900px; }
10) CSS structure: A) Reference the "class" attribute you created using #B) The define the attributes
#navigation { background: #a2a2a2; width: 900px; height: 20px; }
11) CSS structure: A) Reference the "class" attribute you created using #B) The define the attributes
#menu { background: #333333; float: left; width: 200px; height: 624px; }
12) CSS structure: A) Reference the "class" attribute you created using #B) The define the attributes
#content { background: #d2d0d2; width: 900px; height: 624px; }
13) CSS structure: A) Reference the "class" attribute you created using #B) The define the attributes
#footer { background: #838283; height: 180px; width: 900px; }
14) CSS structure: A) At the top of document define the <body> attributes:
body { background: #f3f2f3; color: #ffffff; font family: Trebuchet MS, Arial, Times New Roman; font size: 12px; }
This will really only matter when you add text to the body
body { background: #000000; color: #ffffff; font family: Trebuchet MS, Arial, Times New Roman;
font size: 12px; }
![Hall A - ESfS: Earth Science for Society · 2019. 3. 7. · B8 B9 C5 CS CS CS CS CS CS CS Welcome E4 CS CS CS Bag Drop Area 20' [6.096m] 9' [2.733m] 11'-6" [3.506m] ... Calgary Rock](https://img.dokumen.tips/doc/110x75/60b35dbeabce00272f384634/hall-a-esfs-earth-science-for-society-2019-3-7-b8-b9-c5-cs-cs-cs-cs-cs-cs.jpg)
