Web Production Workshop 2012—Some commonly used CSS Commands 

1) Watch the 4-minute video “Intro to CSS” on the New Boston Tutorials for terms and overview: 

2) CSS Warm Up: Simple Commands on a Page

<style type=”text/css”>

body {background-color: #_ _ _ _ _ _;
color: white; <!- -determines text color on top of background - ->
background-image: url(imagename.jpg);
<! - - background-repeat: no repeat; - -> <!- -no repeat is default - ->
<! - - background-repeat: repeat-y; - -> <!- - can also use repeat-x - ->
background-position: 20px 60px; <!- - can also use % - ->
 }
	
p {color: #_ _ _ _ _ _;
line-height: __%;
font-weight: bold;
font-style: italic;
text-alignment: center;
text-indent: 25px; 
}

</style>

3) CSS Positioning and Sizing Elements

<style type=”text/css”>

h1 { background-color: #_ _ _ _ _ _;
	padding: 20px;
	<! - - padding-top: 30px; 
           padding-bottom: 10px;  - ->
	<!- - padding is the space between text and the border of what you are  working on, like a "cushion" - ->

	border-color: yellow;
	border-width: 3px;
	border-style: dash;
	<!- - you can also mesh these together and say border: 3px; yellow; dash; - ->

	margin: 40px;
	<!- - margin is OUTSIDE the border and outside the padding. it surrounds the whole element, creates space  
              between elements - ->

	width: 350px; <!- - if you don't set a value, the default is for the element to expand/contract w browser window - ->
	height: 100px; 
	}

</style>

4) CSS Styling Links

<style type=”text/css”>

a:link {color: #_ _ _ _ _ _;
	text-decoration: none;
	}

a:visited {color: #_ _ _ _ _ _;
	}

a:hover {color: #_ _ _ _ _ _;
	font-weight: bold;
	text-decoration: underline;
	}

a:active {background-color: #_ _ _ _ _ _;
	}
<!- - a:active is when you are actively pressing down on a link and holding - ->

</style>

5) CSS Unordered List

<style type=”text/css”>

ul {list-style-type: circle;
 	}
<!- - you can also download a tiny image from the internet or use a tiny image from your files and use it as a bullet point! try this for something impressive!  
;;- ->

</style>

6) CSS Styling FIrst Letter of a Paragraph (example of a pseudo-element)

<style type=”text/css”>

p: first letter { font-weight: bold;
	font-size: 30px;
	color: green;
	}

</style>

7) CSS Applying Styles to More Than One Element At a Time 

h1, h2, h3 { color: red;
	}
<!- - this makes all 3 header sizes the same color.  what other elements might you want to group because they have something in common?  - ->

8) CSS "Span" and "Class"

<!- - span describes an instruction, such as color or font-weight, from a designated point to another designated point.  part of the command goes in the CSS and part goes in the xhtml, as below.  - ->

<style type=”text/css”>

span {color: green;
	font-weight: bold;
	}

</style>

<body>
<p>Please take the stairs <span> ON THE RIGHT </span>. </p>
</body>

<!- - a class can be assigned to a kind of element and used over and over through a page or through a site. for example, you might want 2 type of bullet point lists in a site. you could assign each a class. you might want to types of paragraph text, perhaps one representing Hamlet's voice and one representing Ophelia's in a story.  here, too, part of the command goes in the CSS and part goes in the xhtml, as below.  - ->

<style type=”text/css”>

.hamlet {color: red;
	}
.ophelia { color: blue;
	}

</style>

<body>
<p class='hamlet"> "To be, or not to be," say I, in red! </p>
<p class="ophelia"> "I chose not to be and jumped into a sparkling blue pool. Boo hoo hoo feel sorry for my wretched heartache. </p>
</body>

<!- - note that the period in the css becomes quotation marks in the xhtlm. watch out for that!  - ->

9) CSS Div Elements & Div IDs

<!- - divs define sections on a web page. they are used for placing elements of a page.  in the old days this was done with tables, but tables create too much gobbly gook for screen readers that blind people use. div tags are better for accessibility, and they allow you more control.  - ->

<!- - you will surely have many divs in a web site, so you differentiate them by identifiers, or "IDs", just like your driver's license uniquely identifies YOU!  just like with span and class commands, div instructions go both in the CSS and in the body of the xhtml. - ->

<style type=”text/css”>

#boxnamedhamlet { background-color: red;
	position: absolute;
	top: 15px;
	left: 25px;
	width: 20px;
	height: 20px;
	}

#boxnamedophelia { background-color: blue;
	color: white;
	position: absolute;
	top: 65px;
	left: 75px;
	width: 20px;
	height: 20px;
	}

</style>

<body>
<div id=boxnamedhamlet> I assert my manifesto in RED! </div>
<div id=boxnamedophelia> I roll my poetry in BLUE! </div>
</body>

<!- - now play with the sizing and positioning to get the red box to nestle within the blue box.  You can do this because of the absolute positioning. more on that to come...- ->

10) CSS Positioning: Absolute, Relative and Fixed --play with comparing these, then changing values and comparing them again

ABSOLUTE POSITIONING

<!- - absolute positioning places an element in an exact spot, no matter what else is in the way. so be careful not to overlap elements, unless you mean to do so! "top" and "left" refer to the number of pixels from the top left corner of THE BROWSER WINDOW.- ->

<style type=”text/css”>

#gilamonsters {border: 2px; solid; orange;
	position: absolute;
	width: 200px;
	height: 150px;
	top: 50px; 
	left: 20px;
	}

#mountainlions {border: 2px; solid; yellow;
	position: absolute;
	width: 50px;
	height: 200px;
	top: 150px; 
	left: 150px;
	}

</style>

<body>
<div id="gilamonsters"> RIBBIT! </div>
<div id="mountainlions"> ROAAAR! </div>
</body>

RELATIVE POSITIONING

<!- - relative positioning places an element a determined number of pixels from WHERE IT WOULD NORMALLY BE BY DEFAULT. without css, elements fall one after another.  so you can manually move them down farther, or over, or up..- ->

<!- - often absolute and relative positioning are used together.  example: an outside box is absolute and inner boxes are relative. - ->

<style type=”text/css”>

#gilamonsters {border: 2px; solid; orange;
	position: relative;
	width: 200px;
	height: 150px;
	top: 50px; 
	left: 20px;
	}

#mountainlions {border: 2px; solid; yellow;
	position: relative;
	width: 50px;
	height: 200px;
	top: 150px; 
	left: 150px;
	}

</style>

<body>
<div id="gilamonsters"> RIBBIT! </div>
<div id="mountainlions"> ROAAAR! </div>
</body>

FIXED POSITIONING

<!- - using fixed positioning means an element doesn't MOVE when you scroll down a page; it stays in the SAME SPOT in your window, though other elements may move behind it or over it. remember it this way: use fixed positioning to create a "fake scratch" on a user's screen.  IT IS THE LEAST COMMON TYPE OF POSITIONING. - ->

<style type=”text/css”>

#daydreaminghiker {background-color: brown;
	position: absolute;
	width: 20px;
	height: 70px;
	top: 75px; 
	left: 40px;
	}

#gilamonsters {border: 2px; solid; orange;
	position: fixed;
	width: 200px;
	height: 150px;
	top: 50px; 
	left: 20px;
	}

#mountainlions {border: 2px; solid; yellow;
	position: fixed;
	width: 50px;
	height: 200px;
	top: 150px; 
	left: 150px;
	}

</style>

<body>
<div id="daydreaminghiker"
<div id="gilamonsters"> RIBBIT! </div>
<div id="mountainlions"> ROAAAR! </div>
</body>

11) CSS Positioning: Floats

Ah! Floats! Floats are lovely and graceful. But floats are tricky, and floats cause problems in IE.  See this tutorial and screen cast: 
http://css-tricks.com/all-about-floats/ 

Floats are like a word-wrap in a print program. 

12) *****CSS Applying External Style Sheets**** VERY IMPORTANT!

<!- - this is how you apply the same styling to many pages.  this means you can change styles and elements globally rather than editing page by page.  think of how useful this is if you have a 150 page site! - ->

<!- -  first, write a bit of css code. you do not need style tags here. - ->

body {background-color: #_ _ _ _ _ _;
color: white; <!- -determines text color on top of background - ->
background-image: url(imagename.jpg);
<! - - background-repeat: no repeat; - -> <!- -no repeat is default - ->
<! - - background-repeat: repeat-y; - -> <!- - can also use repeat-x - ->
background-position: 20px 60px; <!- - can also use % - ->
 }
	
p {color: #_ _ _ _ _ _;
line-height: __%;
font-weight: bold;
font-style: italic;
text-alignment: center;
text-indent: 25px; 
}

h1, h2, h3 { color: #_ _ _ _ _ _;
	}

<!- -  IN A FOLDER YOU HAVE CREATED CALLED CSS, save the css code as: yourfilename.css  - ->

<!- -  go to your xhtml page.  in the HEADER section, write a line of code that  calls this file,  yourfilename.css. the example below assumes your .css sheet is in a folder called "css".- ->

<html>
<head>

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

</head>

<body>
all your content goes in here

</body>
</html>

<!- -  you can also link the file in Dreamweaver using the + button in the CSS panel.- ->

<!- - NOTE: ANY CSS ON AN INDIVIDUAL HTML PAGE **OVERRIDES** THAT ON THE EXTERNAL SHEET. and css tagged to a specific element within the css overrides the css instructions given for the overall page. this is where the "cascade" comes into play.- ->