CSS: Dreamweaver 8 / PDF
Table of Contents:
------------------------------------------
Sample of the pdf document :
Cascading Style Sheets
What are Cascading Style Sheets?
Cascading Style Sheets (CSS) are a
collection of rules we use to define and modify web pages. CSS are similar to styles in Word. CSS allow Web designers to have much more
control over their pages look and layout.
For instance, you could create a style that defines the body text to be
Verdana, 10 point. Later on, you may easily change the body text to Times New
Roman, 12 point by just changing the rule in the CSS. Instead of having to change the font on each
page of your website, all you need to do is redefine the style on the style
sheet, and it will instantly change on all of the pages that the style sheet
has been applied to. With HTML styles, the font change would be applied to each
instance of that font and have to be changed in each spot.
CSS can control the placement of text and
objects on your pages as well as the look of those objects.
HTML information creates the objects (or
gives objects meaning), but styles describe how the objects should appear. The
HTML gives your page structure, while the CSS creates the “presentation”. An external CSS is really just a text file
with a .css extension. These files can
be created with Dreamweaver, a CSS editor, or even Notepad.
The best practice is to design your web
page on paper first so you know where you will want to use styles on your page.
Then you can create the styles and apply them to your page.
Css Rules:
A Style Sheet is made up of Rules. A Rule is one or more properties that will be
applied to one or more elements. Each
rule will have a selector and a definition.
A Style Sheet can be collection of Styles; however, a style sheet could
have just one style.
A style rule consists of a selector and the
properties or attributes of that selector that are to be affected. These properties or attributes are contained
within curly brackets and called the style definition. For example in the style rule: h2 {color: red; font-family: Arial ;}, h2
is the selector and the rest (within the curly brackets) is the style
definition. The standards of the style rules are that each attribute is
followed by a colon (:) followed by the value for that attribute. Then each set (of attribute and value) is followed
by a semicolon (;). Several style
attributes can be assigned at one time to a tag or selector or multiple tags.
For example you could specify the font family and color of all the heading tags
at once (with a comma between each one) and then give each one a separate size
in a different rule.
Several tags being defined at once:
h1,h2,h3,h4 {
color: #ff3300;
font-family: Arial;
}
color: #ff3300;
font-family: Arial;
}
Then define the size of this one tag
separately:
h1{
font-size: 160%;
}
font-size: 160%;
}
To define a style using Dreamweaver, you
can either redefine the predefined tags such as the Heading 1 tag, Heading 2
tag, the paragraph tag, etc. or define a custom style that you create. The tag or the custom style is the
selector. One custom style is called a
class. Classes can be used many
times. Another custom style is an
ID. An ID is similar to a class, but it
can only be used once. You can also
create specific styles by combining selectors.
For example you could set up a sidebar for News and specify that only
paragraph text within that section should be a particular color or size.
.news
p {
font-size: 80%;
color: blue;
}
CSS Styles
There are three kinds of Styles: Inline,
Embedded (or Internal), and External (or Linked). One or more types of styles can be used for
each web page.
Inline styles are very similar to HTML
styles in that they are placed in the <body> of your document and good
for only that one instance. The style
definition must be marked by <style= attributes:values;> tags.
This type is not commonly used because they are specific to each instance and
would be time consuming to change and could not be used for other pages in your
site.
Embedded / Internal styles are placed in
the <head> of your document with the tag
<style type=”text/css”> tags.
The selector and the definition will be enclosed by comment markers <!-- --> and end with </style> and will be good for the whole page. Comment markers are good for documentation or to hide information from older browsers.
<style type=”text/css”> tags.
The selector and the definition will be enclosed by comment markers <!-- --> and end with </style> and will be good for the whole page. Comment markers are good for documentation or to hide information from older browsers.
An External (Linked) Style Sheet is a totally
separate document from the HTML document and can be linked to and utilized by
many pages. Create the link in this
manner:
<link rel="stylesheet" type="text/css" href="full/path/to/stylesheet.css">
This is telling the browser that the link relates to a CSS style sheet, it is in text and the path to the sheet follows the href tag.
<link rel="stylesheet" type="text/css" href="full/path/to/stylesheet.css">
This is telling the browser that the link relates to a CSS style sheet, it is in text and the path to the sheet follows the href tag.
The
external style sheet contains no HTML tags.
HTML tags in a style sheet can cause it to not function properly. It even has it’s own comment tag :
/* CSS Comment */
Using External Style Sheets takes advantage
of one of the most powerful features of CSS which is the ability to make
changes to the style and have it immediately change all of your web pages. For example if you have a particular color
scheme that needs to be changed you would just have to change the properties in
the style sheet and all of the pages linked to that sheet would be
changed. Also if you create a style and
reuse it several times you shrink the size of your file. Therefore, the External style sheet is the
type of style sheet used most often. .......
Click here for Download PDF / FREE
0 commentaires: