Adobe Dreamweaver makes adjusting to cascading style sheets quite simple. Dreamweaver's user interface allows you to edit CSS styles easily. In fact, using and creating CSS styles is an inherent part of the development workflow. As a developer you must be familiar with Dreamweaver's Group Panel section. This is where you will be working primarily.
Cascading Style Sheets (or CSS) provide a method of controlling how HTML documents appear. Replacing a web site's style sheet can radically alter the way it appears. This can make it easier to rebrand a website or target different display types, such as: print, mobile phones and projectors. By separating visual design elements (fonts, colors, margins, and so on) from the structural logic of a Web page, CSS give Web designers the control they crave without sacrificing the integrity of the data-thus maintaining its usability in multiple environments. In addition, defining typographic design and page layout from within a single, distinct block of code - without having to resort to image maps, tags, tables, and spacer GIFs - allows for faster downloads, streamlined site maintenance, and instantaneous global control of design attributes across multiple pages.
You can use Cascading Style Sheets (CSS) in Dreamweaver to apply style elements consistently across multiple pages of a site. CSS styles offer great flexibility in that style is not confined to text objects. You can define positioning and formatting styles to text, images, tables, layers, and so on.
Some definitions to consider for learning CSS before we get started with some code or in Dreamweaver. These definitions along with more examples of these concepts can be found on the Code Style website http://www.codestyle.org/css/Glossary.shtml.
A collection of one or more style rules, specified in an HTML style element or external CSS file attached by an HTML link element. CSS stylesheets have the content type text/css, typically have the file extension .css and may specify one or more media types to which the styles should be applied:
<link
rel="stylesheet"
type="text/css"
href="Stylesheet.css"
media="screen">
<style
type="text/css"
media="print">
h1, h2, h3{
font-family: sans-serif;
}
</style>
An HTML or markup element to which a CSS declaration might be associated. A named element is the simplest form of CSS selector.
The complete specification of an individual style including the selector, property and value. The term rule applies whatever form the selector takes and however many declaration pairs are present.
A logical "handle" or identifier by which style declarations are associated with specific elements of a document. Selectors may apply broadly to a named HTML element, such as <h3> or <p>, an HTML element with a named attribute value, particularly a class or id value. A simple selector is one which matches an element name only.
A corresponding pair of property and value parameters which suggests a CSS style for a given selector. Numerous declarations can be made in the same style rule, with a trailing semicolon after each, enclosed by a pair of curly braces. In the following example color: red; is a single declaration, background: white; is a second:
em {
color: red;
background: white;
}
A named style attribute or parameter for a markup element specified in a stylesheet declaration, e.g. color, background, font-family, margin etc., which is assigned a specific value. Properties are always followed by a colon to separate them from their value pair.
A length, quality, type or URL assigned to a style property for an element. CSS properties each have specific ranges of value or token types which may be declared for them. For instance, color properties have values specified by named color tokens (silver, purple, maroon), or RGB colour components in the decimal range 0 to 255 or hexadecimal equivalent. Other style properties take length values, URL values or other tokens such as float, repeat-y and both, which define how an element is rendered in a specific user agent.
A syntax for specifying a CSS selector by means of a unique id attribute of an element. The name of id selectors in style rules is preceded by a hash or pound symbol, #, e.g.:
#Subtitle {
letter-spacing: 0.1em;
}
A syntax for specifying a CSS selector by means of a general purpose, repeatable class attribute of an element. The name of class selectors in style rules is preceded by a full stop or period, ., e.g.:
.Condensed {
letter-spacing: 0.1em;