HOME • SYLLABUS/SCHEDULE • ASSIGNMENTS • COURSE RESOURCES • YOUR PAGES • YOUR FEEDBACK
This is currently being edited by DJ....06/09.
Working with Style Sheets (CSS)
Cascading Style Sheets (CSS) enable you to format text and layout in your site in a way that is flexible and efficient - - by SEPARATING STYLE FROM CONTENT - - you'll create a single CSS stylesheet page with STYLE information that applies to ALL THE CONTENT in your site. Change one style element on the CSS stylesheet, and you change ALL those elements on ALL the pages that use that CSS stylesheet. The bigger your site, the more time you'll save by learning how to use CSS.
For this tutorial, we're not going to go into the minute detailing of what's possible with CSS -- check out this tutorial if you want more detail -- but we will learn how to set up CSS, and use it to format text and develop a useful approach to layout.
Open this sitelet to see CSS in action. The main pages are linked to this CSS stylesheet. You can grab and use any part of the code you find there.
1. Setting Up Cascading Style Sheets for HTML
Where does style 'live' in an HTML site? Three places:
First, it can exist at the micro, INLINE level within the content on your HTML pages. There can be style information in the form of a tag determining text elements like this:
hello! welcome to <i>my</i> site!
But, this can get pretty complicated pretty quickly, as you may want to include changes to other style ATTRIBUTES (often put in the <font> tage, as typeface, size, color, etc.),
<font face="Arial, Helvetica, sans-serif" size="+3">
hello! welcome to <i>my</i>site!</font>
Secondly, style information is placed in the <HEAD> tag of an HTML page. You can generate this code by changing any of the format options for your text in Dreamweaver - - the application creates the code and puts it in the Head for you.
While this is useful if you're just beginning to learn the various attributes of the <style> tag, you shouldn't rely on this method for any site larger than 4 or 5 pages. You'll be spending all your time editing all the style tags on all the pages - - not very efficient. Life is short.
And finally, at the highest level, style information exists in a separate file as your CSS Stylesheet, which is LINKED to every HTML page in your site (or at least the ones formated with that particular CSS page - - you can have multiple CSS pages, but that gets tricky):
1. Create a new CSS stylesheet under the File > New menu in Dreamweaver. For now, just select 'none' or use a simple one like 'Basic: Verdana'. Save the page as "style.css" and place it in a new, separate folder named 'styles' , in your site root.
2. In your HTML pages, link the CSS stylesheet to your page by inserting this line of code immediately after the <title> tag in the Head of the page:
<link rel=stylesheet href="styles/styles.css" type="text/css">
Once you've done this, you've separated STYLE from CONTENT. You've also made your site a whole lot easier to manage!
CSS allows you to change and save FORMAT styles (i.e., the characteristics of text -i.e., font, size, color, text decorations like italic, bold, and underline) , and also LAYOUT styles - - the number and arrangement of cells on a page to serve as structure for the content on your HTML pages.
You can make your own CSS stylesheet just by creating a new CSS document in Dreamweaver. All a CSS document is is a bunch of formatting definitions. You call and apply these definitions to text and layout in your HTML documents.
2. Text Formatting
The <p> tag and the class attribute
Text formatting you engineer through CSS is most effectively transmitted to the <p> or paragraph tag on your HTML pages. Think of the paragraph as the unit of text that holds a discrete type of formatting - - maybe indented, maybe centered and italicized, whatever. If you need additional formatting within a paragraph, you can either set that up a different class attribute (recommended), or add style info at the page level (not so recommended).
What's the class attribute? That's the first attribute in a <p> tag, and it calls (from the CSS stylesheet) a particular formatting style and applies it to the HTML text enclosed in the <p> tag.
Text formatting options
Each class contains a whole set of text formatting options, and as you create your classes, make sure they all provide properties for all aspects of formatting you want to control. Here are some examples of classes in the <p> tag (Note - you get to name your own classes, so these are my own names. Also, you create a class by putting a dot or period after the 'p'.):
p.small {
color: #999999;
font-family: Gill Sans, Gill Sans MT, Arial, Helvetica, sans-serif;
font-size: 12px;
}
p.sidebarSmall {
color: #999999;
font-family: Gill Sans, Gill Sans MT, Arial, Helvetica, sans-serif;
font-size: 12px;
}
p.smallBlue {
color:#66CCFF;
font-family: Gill Sans, Gill Sans MT, Arial, Helvetica, sans-serif;
font-size: 12px;
}
p.smallitalic {
color: #999999;
font-family: Gill Sans, Gill Sans MT, Arial, Helvetica, sans-serif;
font-size: 12px;
font-style: italic;
}
p.smallbold {
color: #999999;
font-family: Gill Sans, Gill Sans MT, Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 12px;
}
p.medium {
color: #999999;
font-family: Gill Sans, Gill Sans MT, Arial, Helvetica, sans-serif;
font-size: 14px;
}
p.bigger {
color: #999999;
font-family: Gill Sans, Gill Sans MT, Arial, Helvetica, sans-serif;
font-size: 16px;
display: inline;
}
3. Layout Formatting
The <div> tag and the id attribute
Now, we are going to take one of those quantum leaps in web design - - using code to create your page layout.
We will follow the same basic steps in formatting text with CSS, but there are a few differences. We will set up formatting options for each particular division of the page's design (hence the 'div' part), but these options will each be given a separate name or 'id' (hence the 'id' attribute). Each of these divs - - content containers - - will be defined in terms of left, right, top, and bottom margin, plus padding (internal borders within a cell), plus background color, background image, and 'float' - - how the div container as a whole will be aligned on the page (left, right, center).
And one more thing - - we need an overarching 'container' div that - - you guessed it - - contains ALL the divs. You can have multiple containers on a page, each of which has multiple divs within it. So you can see how complicated it can get. But here's the upside: you're moving into TEMPLATED DESIGN - - you create a design that can be re-populated over and over again.
OK, in your CSS sheet, you'll create a bunch of div 'id's, and notice they're a little different than classes: each starts with the pound sign, followed by no space, followed by your name for the id (yes, you can create your own names here, too). This code will create a container div, and within it, five more divs for navigation, a sidebar on the left, a main content div, a div for content on the bottom, and a footer div.:
#container {
width: 795px;
background: #000000;
margin: 0 auto;
border: 1px solid #000000;
text-align: left;
}
#navigation {
margin: 0 0 0 0;
padding: 5px 5px 5px 20px;
background: #333333;
}
#sidebar {
float: left;
width: 200px;
background: #666666;
padding: 15px 10px 15px 20px;
}
#mainContent {
margin: 0 0 0 250px;
padding: 20px 20px 20px 20px;
}
#bottomContent {
margin: 0 0 0 0;
padding: 0px 0px 0px 0px;
background: #333333;
background-image: url(../BG09c.jpg);
}
#footer {
margin: 0 0 0 0;
padding: 0px 0px 0px 15px;
background: #333333;
}
So, now you've set up your div ids. Now, you need to place the code that calls these ids in the actual HTML page. This is where the style/content division is not as elegant, maybe, as it ought to be, but here we go:
(This is all within the <body> tag of the HTML page)
<!--First, here's a transparent gif placeholder. Change the height to push all the material down on the page - it gives you a top margin:-->
<img src="GRAFIX/transparentPixel.gif" width="15" height="0"/><br />
<!--Next, in blue, is the container div tag, which holds all the other div tags. It's closed at the bottom of the page-->
<!--container div tag-->
<div id="container">
<!--Now, in purple, we have all the parts of the page contained within the container tag, in the order they appear from top to bottom.-->
<!--navigation div tag-->
<div id="navigation">
<iframe src="template_elements/navigation.html" width="770" height="46" frameborder="0"></iframe>
</div>
<!--sidebar div tag-->
<div id="sidebar">
<h3>Sidebar Content</h3>
<p class="sidebarSmall">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
<p class="sidebarSmall">Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis.</p>
</div>
<!--main content div tag-->
<div id="mainContent">
<h1> Main Content </h1>
<p class="medium">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum. Click <a href="" target="_self">here</a> to find out more!</p>
<p class="medium">Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio.</p>
<h2>H2 level heading </h2>
<p class="medium">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla <i>fermentum</i> diam, at nonummy quam ante ac quam.</p>
</div>
<!--bottom content div tag-->
<div id="bottomContent"><iframe src="dummyContent.html" width="795" height="580" frameborder="0"></iframe></div>
<!--footer div tag-->
<div id="footer"><iframe src="template_elements/footer.html" width="780" height="38" frameborder="0"></iframe></div>
<!--And finally, in blue again, we close the container div tag:-->
</div>
Just a couple of observations: 1) note how we use the CSS page to set up things like margin, padding and background, and determine the actual content of the page in the HTML page. That's separating format from content, and 2)note how we use the <iframe> tag to load an existing HTML page. This is especially useful if you're going to be using a particular bit of content over and over, like a header, the navigation, and the footer. This will ultimately save you time, but it does take some time to set it up correctly.
Good luck with the world of CSS!
Comments (0)
You don't have permission to comment on this page.