CSS

Why Use CSS?

Using CSS allows webmasters to separate content from its presentation. This is a key strategy for ensuring accessibility and usability. CSS gives users more control over how they will view the content of a web page. At the same time, it gives webmasters more control over the default presentation of their content.

CSS can also save a lot of time. For example, a webmaster can change the font size, color, face, and spacing for every piece of text in every paragraph of a website of any size simply by changing the CSS rule for the HTML <P> tag. They can do this in a matter of seconds from just one location. Think how long it would take to change that many <font> tags if you were using just HTML.

What You Need to Know

The CSS assigns background images, colors, header/footer navigation, and spacing for the XHTML elements.

The CSS are aligned at the top of the page under the META data and above the closing </head>. It is necessary to configure all these elements properly in order to achieve the desired presentation. Please reference the comments within the source code to make your selections.

Note – by default, the Oceanside color scheme “design01.css” is selected and location of files referenced is in a folder title “css” at the root of your site.

EXAMPLE

<link rel=”stylesheet” href=”/css/styles.css” media=”screen, projection, print, tv” type=”text/css” />

<!–

Select your navigation type: Mega Drop-Down, Mini Nav or Single Level Nav

For the Mega Drop-Down or Mini Nav, add one of the following CSS files. For the Single Level Nav, leave this line blank.

<link rel=”stylesheet” href=”/css/navigation-megadropdown.css” media=”screen, projection, print, tv” type=”text/css” />

<link rel=”stylesheet” href=”/css/navigation-mininav.css” media=”screen, projection, print, tv” type=”text/css” />

–>

<link rel=”stylesheet” href=”/css/navigation-megadropdown.css” media=”screen, projection, print, tv” type=”text/css” />

<!–

Select a color scheme:

<link rel=”stylesheet” href=”/css/design01.css” media=”screen, projection, print, tv” type=”text/css” />

<link rel=”stylesheet” href=”/css/design02.css” media=”screen, projection, print, tv” type=”text/css” />

<link rel=”stylesheet” href=”/css/design03b.css” media=”screen, projection, print, tv” type=”text/css” />

<link rel=”stylesheet” href=”/css/design03g.css” media=”screen, projection, print, tv” type=”text/css” />

<link rel=”stylesheet” href=”/css/design03r.css” media=”screen, projection, print, tv” type=”text/css” />

–>

<link rel=”stylesheet” href=”/css/design01.css” media=”screen, projection, print, tv” type=”text/css” />

<!–

Select a footer with or without the dark container:

<link rel=”stylesheet” href=”/css/footer-with-dark-container.css” media=”screen, projection, print, tv” type=”text/css” />

<link rel=”stylesheet” href=”/css/footer-without-dark-container.css” media=”screen, projection, print, tv” type=”text/css” />

–>

<link rel=”stylesheet” href=”/css/footer-with-dark-container.css” media=”screen, projection, print, tv” type=”text/css” />

<script type=”text/javascript”>

</head>

Adding Custom CSS

If you wish to add more styles to your agency’s website, you can do so by creating your own custom .css file.

When creating your own styles, please consider if they could also be helpful for other California agencies. If you feel they might be, please send your suggestions to us for consideration.

0 Comments

Submit a Comment