Download 4 - Cascading Style Sheets

Basic Dreamweaver Lesson 4
Cascading Style Sheets
INTRODUCTION TO CASCADING STYLE SHEETS (CSS)
Cascading Style Sheets were created as the answer to the limitations of HTML, and they are
the current standard for layout and formatting of web pages. CSS is a collection of styles that
is either inserted in the head of the HTML of a web page and used throughout that page (an
internal style sheet), or is attached as an external document and used throughout the entire
web site (an external style sheet). A CSS style is a rule that defines the appearance of an
element in a web page either by redefining an existing HTML tag or by creating a custom
style. CSS styles define the appearance and position of text and graphics, and control most
aspects of Web page layout.
When you create a CSS style, first you choose a selector type, then you choose the the
selector name, and finally, you choose the location of the style. The four types of CSS
selectors are:
 Class – can be applied to any tag even if that tag has been redefined or has other
styles applied to it. The class selector is the most versatile.
 ID – similar to class, but can only be used once in a page. These are frequently used to
create page layouts where you define each section of a page only once.
 Tag – changes the appearance of an HTML tag, such as all of the <p> tags.
 Compound – combination of the ID, class, and tag styles, and is used to redefine
formatting for a group of tags only when those tags appear in the defined order. For
example, if you define the footer area of the page using an ID style, you could create
a compound style that tells the browser to display any text in a paragraph tag inside
that area of the page in a smaller font size.
The declaration defines the attributes that are included in the style. The eight categories of
attributes that you can combine to create a style are as follows:
 Type – Font and type settings and attributes such as font family, font size, color,
decoration, and weight.
 Background – A color or an image, fixed or scrolling, that can be placed behind a
page element such as a block of text.
 Block – Spacing and alignment settings for tags and attributes, including spacing
between words, letters, and lines of text. Also includes indention.
 Box – Attributes that control the placement of elements in the page.
 List – The number format and its position used with ordered lists and the bullet shape or
image and its position used with unordered lists.
 Positioning – Attributes that determine how a tag or selected content is positioned on
the page.
 Extensions – Attributes that control page breaks during printing, the appearance of
the pointer when positioned over objects in the page, and special effects added to
the objects. Most browsers do not support ALL extensions’ attributes.
The term cascading means that if an attribute is defined in two styles that affect the same
object, the style that is “closer” to the object in the code will override the value of the
attribute in the tag that is farther away from the object in the code.
Web Technologies I
Basic Dreamweaver Lesson 4 – Cascading Style Sheets
Page 1
CREATE CSS FORMATTING FOR TAGS
If previously closed, define your Next Best Fest site, and open the
index.html file
1. Double-click the CSS Styles tab to expand the panel
Existing Styles
group, and then click the All button if necessary, and drag
the bottom border of the panel down to expand the
Properties For portion of the panel (see illustration to the
right).
2. In the CSS Styles panel, click the New CSS Rule button.
3. For the Selector Type, change the drop-down to the
Tag option.
Properties of
Attach existing
Existing Style
4. Click the Selector Name drop-down arrow, and
external CSS
find the <h2> tag
5. Click the Rule Definition drop-down, and make sure (This
document only) is selected to create an internal style sheet.
New CSS
Edit CSS
6. Hit OK.
Rule
Rule
7. In the Type Category, set the font-size to 20px and the color to #666633,
then click OK.
8. Notice that the text “Welcome to the Next Best Fest Website” changes appearance because it
uses the <h2> tag.
CREATING CSS CLASSES
1. In the CSS panel, click the New CSS Rule.
2. Change the Selector type to Class.
3. In the Selector Name box, type .sub2 (you must include the period before the name of
the class).
4. Make sure the Rule Definition box is set to This Document Only, then hit OK.
5. Set the Type to font-size 20 px, and the color to #ccccff. In the Background category,
set the background color to #666633. Click OK.
6. In the Document window, position the insertion point after the text at the bottom of
the home page, and press ENTER twice to move down four lines.
7. Type Rumor Has It, then press SHIFT+ENTER to insert a line break and move to the next
line.
8. Type It looks like amazing things might just come in small packages. It is possible that
Little Kiss might be making the rounds at the next Next Best Fest. More info coming
soon.
9. Select the Rumor Has It text in the Document Window.
10. In the Property Inspector, click on the button for Class in the HTML portion. Choose the
sub2 style.
11. Click anywhere in the page to deselect.
Web Technologies I
Basic Dreamweaver Lesson 4 – Cascading Style Sheets
Page 2
CREATING AN EXTERNAL STYLE SHEET
Locating all of the styles for a Web site in one place is one of the greatest advantages of
using CSS styles. An external style sheet enables you to separate the style of the Web site
from the content of the Web site, enabling you to make stylistic changes throughout the site
by updating a single file.
1. In the CSS Styles panel, select ALL RULES by
clicking the first style in the list, pressing and
holding the SHIFT key, and clicking the last
style in the list. Release the SHIFT key and all
styles should be selected.
2. Right-click the selected styles, and then click
Move CSS Rules on the context menu.
3. In the Move To dialog box, click the A new
style sheet option button, then click OK.
4. In the Save as box, create a new folder by
clicking the folder icon, and naming it
stylesheets.
5. Inside the folder, save the style sheet as
nbf_styles.
6. Click the Save button.
7. Click the New CSS Rule botton in the CSS panel.
8. Set the Selector Type to ID, the selector name to #nav (IDs must have a # sign in front
of them), and set the Rule Definition to nbf_styles.css. The style will now be saved in the
external style sheet.
9. In the Box category, set the Float list to right, then hit OK.
10. Back in the Document window, select the links at the top of the page.
11. In the Property Inspector, set the ID drop-down box to Nav. This assigns the section an
ID of nav, and floats it to the right.
EDITING CSS STYLES
1. In the CSS panel, click on the h1 tag so that it is selected.
2. Click the pencil icon in the bottom of the CSS panel to open
the CSS Styles dialog box. Hit Cancel.
3. In the bottom of the CSS panel, click the AZ icon to view all available properties.
4. Scroll down to find font-weight, and change the drop-down menu to read normal.
5. Select the h2 tag, and use either method to edit the style to also have a normal fontweight.
6. To temporarily disable a property setting without deleting it,
hover your mouse to the left of the property name and click
the Disable icon. Click it again to enable it.
7. Go to File > Save All to make sure both the index.html and
nbf_styles.css page saved.
8. To view the external style sheet, click its name at the top of
the document window. When finished, click on the Source
Code link next to it.
Web Technologies I
Basic Dreamweaver Lesson 4 – Cascading Style Sheets
Page 3