About CSS
Style Sheets
CSS stands for Cascading Style Sheets. They are used to describe all the style that will be applied to the various elements (tags) on the HTML page. You can think of style sheets as an over-arching style template for your Web pages.
Style sheets come in three types:
1. inline = style attributes are used inline with the HTML tags. For example:
<p style="color: red">When in the course...</p>
This would style the paragraph red, but just this one paragraph on the page. Using this type of style sheet, you would have to individually style other p tags on the page if you also want those to be red. This is an inefficient style sheet concept.
2. embedded (internal) = style information is in a <style> tag which is nested in the <head> tag of a single Web page. For example:
<style type="text/css">
p {color: red;}
</style>
This would style all the paragraphs on this one Web page red. This is more powerful, but if you want to style all the p tags on your other Web pages using this model, then you'd have to add this code to them all. If your site contains hundreds of pages, this could take a while.
3. linked (external) = the style is in one .css file that is linked to multiple Web pages. The link tag on the page is connected to the external file.
In a case like this, all the Web pages in an entire site -- and there could be dozens, hundreds, or thousands! -- could be linked to this one external style sheet file. If that file contained a selector that specified the p tag was red, all the p tags throughout all the pages of the site would be styled that color.
In Web design, this is as powerful as it gets. Your goal is to make it so all of your pages can be connected to a style sheet that contains all the style rules for your site (all pages). In this case, if you want to make a change to all the pages, you just update the style rule in the one .css file, and -- voila! -- all the pages linked to it are automatically updated. This is the most efficient concept.
Cascading
The term cascading refers to which of these takes precedence when it comes to styling a page, a line, or any other element on the page. Usually, the closer to the HTML element, the more power it has. This means that inline style will trump embedded style which will trump linked style. However, the rules that are followed regarding precedence are long and complex, and inline style is not necessarily the best choice in most cases.
The goal for most Web designers is to avoid using inline and embedded style, and move the style information to a separate .css file so that it can be linked to many Web pages. By linking multiple Web pages to one .css file, style changes can be made more quickly to the entire website.
Selectors
Embedded style and .css files contain selectors and not HTML tags. There are three different types of selectors and one combination selector as follows:
Tag selectors are used to style all the tags on a Web page. You usually style these first and they make up your general style rules for the page since they usually have the biggest impact on the overall look of the page
Simply style each tag, e.g.:
In the <head> section your <style> would look like this:
<style>
h1 { background-color: #993366;
color: yellow;
font-family: Broadway, san-serif;
line-height: 150%;
}
</style>
Down inside the <body> tag area you just use the heading tag, <h1>, as you need and they will all be formatted according to the CSS for <h1> tags. This will only effect the <h1> tags and not other <h2>, <h3>,… tags unless you include them in the CSS styling.
For example, if you want to style all the paragraph or p tags on the page so they look the same, use a p tag selector.
1. Class selectors are typically used as exceptions to various general styles on a Web page. If tag selectors are the rule, then class selectors are the exception to the rule.
For example, if you have ten p tags on a page, and you want all but one of them to look alike, create a p tag selector to style the majority, then create and apply a class selector to the odd one in the group. Because class selectors are used as an exception, they tend to be the least frequently used selectors.
Also, showing in the example is a more limited class selector that is intended just to modify a small amount of text in a paragraph. In this case, the code is different in the CSS and content areas.
Example:
p.images
{
text-align: center;
}
This would cause all text and images inside this paragraph to be centered:
.hobbies { font-size: 1.6em;
color: yellow;
font-weight: bold;
font-style: italic;
}
This would only format the text you placed the class selector in front of and you would have to end it right after the text. You use the <span class> attribute. You should name your class selector in a way that makes sense for how or where it would be used.
<!DOCTYPE html>
<html>
<head>
<title>Class selector example</title>
<style>
p.images
{
Text-align: center;
}
.hobbies {font-size: 1.6em;
color: yellow;
font-weight: bold;
font-style: italic;
}
</style>
</head>
<body>
<p>The paragraph below is an example of a class selector<p>
<p class="images"><img src=”us_flag.jpg” width=”260” height=”159” alt=”U.S. Flag” title=”U.S. Flag” /></p>
<p>
My hobbies are <span class="hobbies">Calligraphy and Gardening</span> right now. PCC has a great calligraphy teacher - Rebecca Wild. My main garden is behind schedule due to our wonderful weather. I prefer to work outside only if it is over 50 degrees.
</p>
<p>That is the end of the example.</p>
</body>
</html>
2. ID selectors are typically used to identify divs that are used throughout a website. They are also used to identify other unique elements, such as individual form fields and individual images. They must be used only once each on a page.
For example, if you ID a div "content", then you cannot use that ID on any other element.
In the <head> section your <style> would look like this:
<style>
#header { position: relative;
text-align: center;
}
#footer { position: relative;
text-align: center;
padding-bottom: 15px;
}
</style>
This would set up a div called header and one called footer. These are often used to format the top or bottom areas of a webpage.
Down inside the <body> tag area you might reference the header as such:
<div id="header">
<h1>Karen's CIS 210 Website</h1>
<img src="calligraphy.jpg" width="384" height="288" alt="Calligraphy" title="Calligraphy" />
</div>
In this case the heading <h1> text would be centered and so would the image included within the header div. You can see there are several ways to effect the formatting of your webpage(s) using CSS.
3. Compound selectors, which is what Dreamweaver calls them, or more typically referred to in the rest of the world as Descendant selectors, are not one specific selector, but a combination of selectors used to specify a particular element to style.
For example, if you want to style all of the p tags that are nested inside a div ID'ed as "content", then you would use this selector combination (Compound selector):
#content p
This is a combination of an ID selector followed by a tag selector -- they are always separated by a space. Also, the selectors on the right are always nested inside the ones to their immediate left. Consider this Compound selector example:
#container #nav ul li a
This is styling all of the a tags nested inside list item tags nested inside an unordered list tag which is in turn nested inside an element (probably a div) ID'ed as "nav" which is itself nested inside an element (again, probably a div) ID'ed as "container".
Specificity
What happens when you have two style rules that seem to state opposite ideas? Which one wins? Consider this example:
In your style sheet, you have these two selectors
#content p { color: blue; }
p { color: red; }
The first selector (the Compound) is suggested that all p tags within the div called "content" are to be colored blue, but the tag selector for all the p tags on the page says that all of them, no matter what div they are in, are to be colored red.
So which one gets the style?
The one that's more "specific" is the one that would style the element.
The way browsers work is that, to determine which one is being more specific, they assign a numerical value to the selectors used, with tag selectors getting a 1 point value, class selectors getting a 10 point value, and ID selectors getting a 100 point value. Compounds add all their selectors together. The highest numerical value in total for the selector or Compound will win.
In the case above,
#content = 100 + p = 1, which is a total of 101
Since the other is just a p or a value of 1, then the Compound wins, so those p tags inside div#content would be blue, but the ones outside div#content would still be red.
Check out this site for a really good article that explains the concept of specificity in better detail: HTML Dog: Specificity
Div Tags
Div tags are the most important and versatile layout or structural element in HTML. You should plan to design all your Web pages with a div structure and not use a table structure for layout.
Problems with Table Tags for Layout
While the table tag may appear to be an easier structural element to layout your Web pages, there are several reasons to avoid table tags for layout.
Consider this long list of issues with tables:
1. Editing the content (for example, adding or taking away some text) on tables in Dreamweaver or elsewhere usually causes the tds (cells) or rows to change size. This will then require you to fix the size, row by row, or cell by cell.
2. Tables don't degrade gracefully (i.e., work well) on browsers that are text-only or devices like cell phones that have small screen browsers.
3. Tables load slower than divs with CSS positioning.
4. Positioning ability with tables is limited.
5. Browsers inconsistently display table properties. This is an issue with divs as well, but the inconsistencies are not on the magnitude of the problems displaying tables.
6. All the tds of the table require height and width adjustments to display content properly, otherwise tables from page to page will have different content placement. Visual consistency is not easy to maintain with tables throughout your site.
7. Correcting the inconsistencies in table display routinely requires page by page adjustment of the tables which is time consuming.
8. Presentational data and content are mixed in the table (not separate as they are with div tags) which means the page will load slower with table layout, and your Web page file sizes will tend to be larger.
9. Tables load the content into the browser from left to right and top to bottom. There is no way to control the display order.
10. There is more HTML code required to construct a table which increases your ratio of code to content on the page. This can negatively affect your search engine placement with some search engines, including Google.
11. Tables do not print well.
12. The Web standard layout element is the div tag, not the table tag. Modern browsers are designed to render based on Web standards.
In other words, if it wasn't clear from that list above, follow this one rule: don't use tables to layout your Web pages.
Div tags are industry-standard and you will not be taken seriously as a Web designer among your designing peers if you continue to use table tags for layout.
Instructor Note:
You can still use tables, just use them for tabular data as they were intended, and not for Web page layout. I also like to use them to contain form fields on form pages because forms lend themselves to the row and column separation that tables were meant for.
Positioning Divs
Div tags can be positioned in four ways: static, relative, absolute and fixed. The choice static is the default for all items and behaves very much like relative positioning. (If you don't include a position property for a div, the default is assumed to be position: static.)
Check out this div positioning example and view the embedded CSS source to understand how they work.
Instructor Note:
When you view the link above, be sure to change the size of your browser window and scroll through the text to see how the three types of divs work on a page and with each other. This is a great demonstration of how they work!
Fixed positioning is a novelty (i.e., rarely used) when it comes to placing divs because fixed divs stay fixed in place in the browser window. In other words, when you scroll other content, they will still remain in place so that other content will scroll above or below them. This can pose a serious problem in a small viewport (like on a mobile device) because the fixed div will be stuck in one place and likely take up a significant portion of the viewable area on the device's browser so the user cannot see content around it.