What are CSS style sheets?
A style is a group of formatting attributes that control the appearance of one
or many elements in a document. Style sheets work well as text styles, to design and format type but today CSS styles are used to apply many more attributes like borders and backgrounds and even page layout.
However not all styles are
visible in all browsers. To be user friendly you should be aware of using
simple styles, which are supported by all browsers.
Why “Cascading”?
The name cascading style sheet describes a phenomena that we are familiar with in regards to HTML: Like a cascade the
most direct definition of a tag will be visible: The font tag definition will
overwrite the text color that’s located in the body tag. The styles, which are
defined in the head of a document, will overwrite the styles defined in the
external style sheet because they are "closer" to the tag.
What is an external
style sheet?
An external style sheet is a
document with the extension ".css". It's a page that is It contains code to define colors, borders and positioning of
text and other elements. From one or more documents you can link to the
external style sheet to apply those attributes. The syntax of the code of a style sheet can look
like this:
.first{ font-family: Verdana, Arial, Helvetica,
sans-serif; color: #999999; text-decoration: blink; border: thick #003399
double;
text-align: justify; white-space: normal; vertical-align: sub}”
h1 { color: #0066FF}
a:active { color: #993300}
a:hover { color: #99FFFF}
a:link { color: #00FF66}
a:visited { color: #990066}
The advantage of using
a style sheet over a local CSS
is that:
·
It
can be linked to multiple documents.
·
When
it is updated or changed, the formatting of all the documents that use that
style sheet are automatically updated as well.
Three different style
definitions:
1.
Class
.first defines a class that can be applied to any text or even other html objects. The name ".first" stands for all the code contained in the curly brackets. Therefore each time the class is applied using just the name all the code in the style sheet will be applied. This is how the code of the style looks :
.first{ font-family: Verdana, Arial, Helvetica,
sans-serif; color: #999999; text-decoration: blink; border: thick #003399
double;
text-align: justify; white-space: normal; vertical-align: sub}”
The
class will be added to an HTML tag. This is how the code would look if it would
be added to the <p> tag in the HTML document:
<p
class=”first”>text</p>
The text in between the p tags would take on the attributes contained within ".first"
2.
Redefined
HTML tag:
In this
case I defined the h1 (heading) tag. Every time I use the tag the color of that
heading will be 0066ff = bright blue.
h1
{ color: #0066FF}
3. Compound selections:
Gives the option of defining a specific selection of tags.
Lets say in your code you have words that are bolded and italic.
Selecting the string of code to be linked to a style would automatically
change
all type or elements with these attributes.
4. IDs:
You can name elements and create a style that has an id (=name).
This style will apply to every object that has the same id.
CSS Styles panel
This window displays all
the styles and external style sheets created for this document:
Redefined HTML tags, CSS selectors and external
style sheets as well as styles created by Dreamweaver. Use the CSS Styles panel
to view, make, attach and apply custom CSS styles throughout your web page.
Choose Window / CSS Styles
to display the CSS Styles panel.
Choose "NEW" from the drop down menu on the top-right of the CSS Styles Panel:New opens the New Style dialog box.
Create a new style for a particular document or create a new external style
sheet. Later you can add more styles to the same external style sheet or create several ones.
To create CSS styles
1. Defining a type of
style.
To open the New Style
window click the arrow in the CSS
panel and choose New Style.
You have the choice between a named class, a redefined HTML tag an Id or Compound
selector.
2. Defining the location
of a style
In DW there are
two choices of applying a style to a document:
This
Document Only: writes the code for that particular style in the head of that page.
New Style Sheet File: creates an entirely new file that has the
extension css and can be linked to multiple pages of a site.
NOTE: If you already saved and attached a .css document you also have the option to add more styles to it.
To create and attach an external style sheet:
If you choose to create an external style
sheet and decided about the type of style, you will be prompted to save the new
external sheet. Think about the structure of your site: If you will create many
external style sheets save all of them into a style sheets folder so you can
find and link them easily from anywhere. The only reason to have more then one style sheet is if you have different link colors or headings in different sections of your site .
After you saved the style sheet and defined the attributes you must click the
arrow in the
CSS panel and choose Attach and browse to the file .
Note: You can view an external style sheet in Dreamweaver and edit the code directly.
To create and apply a class:
-
Choose Make Custom Style Class and name the class.
-
Choose location: This document only or external style
sheet.
If you choose external style sheet decide if
you want to create a new style sheet or add the class to a sheet that already
exists.
- Define the style in the Site Definition Dialog Box.
- The class will be displayed in the Style Sheet panel.
If you create a class that’s located in an external style sheet you will see a
little link icon besides the class icon in the CSS panel.
-
To apply the class, make a selection and click the
class icon in the CSS panel or choose it from the style drop down menu in the
properties inspector.
To create and apply a redefined HTML tag:
·
Choose redefined HTML tag and select a tag from the
drop down menu.
·
Choose location: This document only or external style
sheet.
·
Define the style in the Site Definition Dialog Box.
·
Redefined tags will be accessible and visible in the
Edit Style Sheet Window!!!
·
To apply the style insert the tag into your code.
To create and apply new CSS selectors:
·
Choose New CSS selector and either select a link tag
from the drop down menu or insert tags
you want to apply the style to: write
the tags with one space in-between.
·
Choose location: This document only or external style
sheet.
·
Define the style in the Site Definition Dialog Box.
·
CSS selectors will be accessible and visible in the
Edit Style Sheet Window!!!
·
To apply the style insert the selectors into your code.
If you defined a pseudo class (a,v-links)
you just create your links and new
styles will be added.
Defining attributes for a Style
After you defined the type and location of the
style, the style definition window will
open.
There are following style
categories:
Type attributes: define basic type settings for a
CSS style.
Background attributes: Define background settings.
Block attributes: Define typographical constraints
to alignment and spacing.
Box attributes: Define boxes of color or images.
Border attributes: Define different size, color and
style borders.
List attributes: Are applied to ordered or
unordered lists.
Extensions: Are not yet supported in most browsers.
Note: Choose the help menu to get information about each
setting within these categories.
To edit CSS styles
You can edit styles directly in the styles panel by selecting them. You can view the properties of the selection the bottom part of the panel. You can add properties or delete styles.
Converting CSS styles to HTML tags
If you have used CSS styles to specify text formatting (such as the family,
size, color, and decoration of fonts) and later decide that you want to make
the formatting viewable on a 3.0 browser, you can use the File / Convert /
HTML 4.01 command to convert as much of the style information as possible to
HTML tags.
Note: Not all CSS styles can be converted to HTML, because HTML
tags do not cover or support all the attributes possible in CSS.
|