Class 1-3
Another HTML Tag: <div>
The HTML div tag "divides" up your content into logical or positionable segments. The div tag is at the heart of CSS Zen Garden. By determining which portions of the page below to a sidebar, or a intro section, a header or footer, you allow the content to be styled without being touched - all by applying css to the <divs> or sections of the content. More on using divs
Intro to CSS
- Example CSS download (right click and Save Target As..)
- Example HTML download (right click and Save Target As..)
What is CSS?
Cascading Style Sheets or CSS are special text statements used to apply styles or look-and-feel to HTML content. Actually CSS refers not only to the language used to write these statements, but to the files or "style sheets" we use to group together and store the CSS statements. The "style sheets" are simply text files (as are HTML files) but are filled with CSS statments rather than HTML statements. They are preferentially stored in separate files of type ".css" such as style.css and basic.css to differentiate them from html files. These are called external style sheets. CSS statements can also be written directly in your html header (internal style sheets) or even directly embedded in the HTML code (inline styles).
- Syntax of CSS elements: how are they coded?
- Types of Selectors in CSS
- CSS Properties: some of the most commonly used
Where does it go?
Internal and External Style Sheets: Applying CSS to your HTML file
What does "Cascading" mean?
The CSS that determines the look of a specific element is determined first by the position of the style and second by its specificity. Since CSS cascading can get very difficult to untangle, design it early and keep it simple!
The order or position of your css files as they are called out in the header as well as the order of the CSS selectors as they are called out in each file is significant. Later call-outs "trump" or override earlier ones. Here is the basic order of application:
- Browser defaults - if you don't style it there's a default style that each browser provides. For example linked images will have a border around them and hyperlinks will be blue and underlined for most browsers.
- External style sheets - separate files referenced in your header - are applied in the order you list them in - the last one trumps the earlier ones for the same element.
- Internal styles sheets - local css styling in the header - overrides the externally referenced css files.
- Inline styles - applied to an element in the body of the html - override everything before it. However use these VERY sparingly as they are messy and often lead to unpredictable results.
Furthermore the specificity of the CSS statement is significant. If all p tags are styled blue, but the p with id "#special" is red, no matter what order they're listed in the id tag wins out because it's more specific. Here is the basic order of specificity from lowest (least significant) to highest (most significant):
- element (html tag name)
- class (indicated by .xxx)
- id (indicated by #xxxx)
Now try it yourself at w3schools.com
Another resource: CSS Reference - illustrated, with "must know" and complete list of css
Positioning and Layout
HTML elements, particularly divs, can be positioned by default, with a relative offset, absolutely or fixed on the screen.
The basic idea - start with the default, add float as necessary, then do fixed, absolute or relative positioning ONLY to get special effects. Do not over use these, just understand how they can be used. Review CSS Zen Garden if you want to see some cool, design-appropriate uses of the specialized positioning options.
See visual examples for these types of positioning:
- By default items come right after one another (like images) or on new lines (like paragraphs), depending upon whether they are inline or block elements. Elements so placed will not occur on top of each other.
- Float items will push up against each other within the limits of their parent. Applying the value clear stops the float and pushes the next item BELOW the longest of the floated items.
- Relatively positioned items are positioned with an offset from where they would be placed by default. This may result in them overlapping other items. Subsequent items appear where the item would have been had an offset not been applied.
- Absolutely positioned items are taken OUT OF THE FLOW and positioned at a particular location. They may then occur on top of or below something else on the page. Subsequent items appear as if the absolutely positioned item did not appear at all.
- Fixed items are absolutely positioned with respect to the VIEW PORT, not the page. So as you scroll they are fixed in position while other elements scroll past them.
Lesson with examples: on Layouts with Positioned Divs
Try it out
- Practice Session with floats (see U drive uploading instructions)
EXTRA: Great tutorial on combining Relative and Absolute Positioning and Floats. Note that his issues with IE have been substantially if not completely resolved by the later versions of IE (always check dates on technical pages!)
Fixed, Floating, or Expandable?
We will spend more time with these next term, but get familiar with these options:
Initial position can be Fixed (to left edge) or Floating. Fixed or floating position has to do with whether the content is pushed to one side (fixed) or centered (floating).
*{margin: 0;} /*creates a site positioned at full left */
*{margin: 0 auto;}/*creates a site centered L-R in window with no margin top or bottom */
Size can be fixed or expandable (fluid) depending whether the sizes of the content areas are set to a fixed number, or a percentage of the whole body. If you want the content areas to change size as the window is increased by the user, choose Expandable. If you want more control over the page layout, choose Fixed. Define your main content area one of these ways:
width: 80%; /*creates an expandable layout*/
width: 60em; /*creates a fixed size layout*/
width: 850px; /*creates a fixed size layout*/
- Example of expandable site (also called fluid), can be fixed or floating in position
Hints on Thinking about Layout
Although we introduced relative and absolute positioning, they are generally reserved for special effects. I recommend you start your layout with these steps:
- Draw your layout on paper
- Figure out which items are fixed in size (and what size), which are expandable
- Create containers around any items that have to be next to each other horizontally - use <div> with either a class or id for each.
- Assign width to any container that is to be fixed in size. Don't forget that the width of anything INSIDE the container is limited to the container width + margins + padding
- Float any item that you want the next item to be NEXT to rather than below.
Design your site - some thoughts
- Know your User
- terms they use (words of art)
- style they'd be comfortable with (psychodelic or folksey)
- technical savvyness (computer literate or barely a browser)
- subject savvyness (are you writing for newbie or connoisseur)
- Navigation
- how flexible / how much growth needed
- tabs across top can be limiting
- sublevels on nav bar or within page
- knowing your user - how will they expect topics to be named
- how flexible / how much growth needed
- Look / Theme: color / font / whitespace / graphics / background
- Layout choices
- The Grid (Designer's Friend)
- odd numbers are more visually interesting
- floating / fixed / expanding layout choices
- levels of info (sidebars / images)
- Top and Bottom - headers / footers / navigation
- The Grid (Designer's Friend)
- Designb the Flow of information - navigation tree / site map
Projects
Fish 'n Clips | Maude Byrnes | Alberg, Applethorne, and Folkes | BrianBuys |
Sizzle.org | WoolGathering | JavaJive
Summing Up
Designer's Dilemma
Or... If I can do anything I want to the styles of my page, what SHOULD I do?
As a designer, you should match the look of the site to the purpose. But unless your purpose is to shock and confuse, there are things we expect in a web site and there are some things
For text-heavy sites - make it easy to read and easy to re-size - screens are hard enough to read from. Some principles for text-heavy sites:
- Dark fonts on light backgrounds are easier to read than the reverse. And in general lots of contrast is helpful
- Use sans-serif for general text. These include Verdana (designed for screens), Arial or Georgia.
- Use relative font sizes (em or %) so the user can re-size using the browser tools. A system I like is to use 1em for paragraphs and then set the body to something between 75% and 100% depending on what size you like. H1 and H2 can be a little larger in em units.
body {font-size: 80%;}
p {font-size: 1em;}
h1 {font-size: 1.3em;} etc. - Shorter newspaper-type columns are easier to read than long lines that snake across the page
More CSS Resources
CSS Reference - illustrated, with "must know" and complete list of css
More info on Cascading from David's Kitchen