CSS
Planning the Site and its Navigation
Planning the Site
Here are some techniques that many experienced Web developers use when planning a site.
Create a site specification - A site specification identifies the site and its purpose.
Identify the goal of the content - What type of things will go into the site?
Analyze the audience - Who will be visiting my site? How do I design the site with them in mind?
Build a Web development team - Given my site, do the people working on the site have the correct skill set?
Do I need to outsource? What about training?
Create standards for filenames and paths.
Establish a directory structure and make sure that everyone on the team understands and follows it.
Create a site storyboard.
Introduction to CSS
CSS stands for
Cascading Style Sheets
CSS defines how HTML elements are to be displayed. CSS is a language of its own, with syntax requirements and keywords
that are different than what we've seen in HTML and any other Web programming language.
There are three ways to apply CSS style rules in the Web pages.
The style attribute of an HTML tag (inline)
The <style> element (embedded)
A linked CSS file (external), also called an external style sheet
Style Attribute
CSS is applied by creating style rules. These rules consist of two parts: the selector (HTML tag; the part of your document to
which you want to apply the formatting) and the declaration (the formatting you want applied). In the CSS rule here, text designated
as h1 in the HTML code will be formatted with the color red.
h1 {color: red;}
In this example, color is the property of the h1 tag, and red is the value of that property. The declaration is always enclosed in curly
braces unless it's the value for a style attribute, as in the example below. The CSS property is connected to its value by a colon.
To specify multiple properties and values in a single CSS declaration, each pair is separated by a semicolon following each value, as shown below.
h1 {color: red; font-size: 12px;}
To use this basic concept within the style attribute of an HTML tag, you would need to add the property and value to the style attribute of
the tag as follows.
<h1 style="color: red;">Heading Text</h1>
With external style sheets, the specifications and declarations are contained in a separate file. As such, they can be applied to all
of the pages in the website. External style sheet rules are sometimes referred to as being global in scope. External style sheets usually
have the file extension .css.
It is a good idea to add comments in the external style sheets to help you figure out what you did and why. If you haven't looked at the page
for a while, you might forget. Comments in a CSS file are formed with a slash asterisk (/*) to start the comment and the reverse (*/) to end the comment.
Types of Selectors
There are three types of style declarations to which you can add properties and values.
Tag selectors: These are the tag abbreviations (p, h1, h3, div, ul, ol, li).
ID selectors: These are tag IDs preceded by a pound/hash sign (#).
Class selectors: These are named CSS classes that are preceded by a dot (.).
