css formatting - camosun college · css formatting this section describes the css formatting model,...

CSS Formatting

© 2011 Camosun School of Business ABT 294 Course Pack

CSS Formatting This section describes the CSS formatting model, and how to use selectors and declarations to define style rules that can be either embedded in the document or contained in a separate CSS file.

Introduction CSS is a powerful formatting language for both page layout and formatting that has been specifically recommended for adoption by the W3C.

CSS allows a site designer to separate content from formatting by collecting formatting and layout instructions in the <head> area of a document or in a separate CSS file which can then attached to the pages in your site. If the style rules are contained in a separate CSS file, the same content can be used for a variety of different devices simply by attaching a style sheet that is appropriate for the destination medium.

Using CSS is far more efficient and accurate than using the HTML formatting model, where formatting instructions are directly embedded in the HTML page code. Using the HTML formatting model, formatting instructions have to be repeated for each element in the site, which makes updating very difficult, and limits formatting to the basic options provided by HTML.

Specifying the formatting for specific elements (such as the <h1> tag) in a separate style sheet, allows the same formatting to be reused for every <h1> element in your Web site, thus providing an efficient way of applying standardized formatting throughout your site, and also allowing for the formatting to be updated for the entire site simply by changing the style definition for each element contained in the style sheet.

Understanding Cascade CSS formatting allows style sheets to be applied to a Web page by the browser, the user, and the site designer, and since only one style rule can be applied to any element, a basic feature of CSS is the cascade, which sets the order of precedence for the application of style rules in a Web site.

For example, all browsers have a default style sheet that specifies the basic formatting for headings, body text and lists. In the absence of any other style information, the browser’s style sheet is used. Styles in the browser style sheet can be overruled if users have specified their own styles to accommodate technical or physical handicaps. A user’s style sheet overrides the default style sheet built into the browser. Web designers also use style sheets to specify the layout and formatting of the pages in a Web site, and this carries the greatest weight in the cascade and overrides the user’s style sheet and the browser’s style sheet (although a user can overrule the designers style sheet under certain circumstances by either turning the style rules off, or by including the keyword “!important” to give more weight to their rules).

CSS Formatting


Understanding Inheritance The concept of inheritance is important because HTML uses a parent-child hierarchy for page elements. Specifying a style rule for a parent element will cause the child elements to inherit the characteristics specified by the rule. For example, the most basic structure of a Web page includes the <head> and the <body> elements; however, the <body> of a Web page has several child elements such as headings, paragraphs and lists. Specifying a style rule for <body> will cause the headings, paragraphs and lists to inherit the formatting defined for <body> unless more specific style rules have been defined for each of the child elements.

The CSS Box Model CSS provides much richer formatting options than the limited options provided by HTML, and provides many of the same formatting features that are found in word-processing software.

The CSS Box Model imposes an imaginary box around each page element that can be selected by a tag, a class, or an ID selector, and enables you to format almost every aspect of how the box and its contents are displayed. You can specify fonts, line spacing, alignment, borders, background shading and graphics, margins, and padding to name just a few of the available options. The boxes themselves are invisible by default and CSS does not require you to specify any formats for the boxes at all.

CSS has been adopted as the visual formatting model for the Web, but has not been fully utilized due to uneven support from early browsers. The latest releases of the main browsers provide much more comprehensive support allowing designers to use this powerful language to develop rich applications.

CSS Formatting


Style Rules A CSS style rule consists of two parts: a selector and a declaration.

The selector is any block-level HTML element on the Web page such as the <body> and <h1> tags to which the style rule will be applied. The declaration is the style (formatting) to be applied to the selected element. CSS also allows you to create your own selectors which let you define your own block level elements and then apply CSS style rules to them.

HTML Selectors HTML has a set of built-in selectors such as Heading Levels (<h1> through <h6>), Paragraphs (<p>), and Lists (<ol>, <ul>, and <li>) that define the structure of the document. You can attach these selectors to text in your Web pages and then control the format using CSS by defining style attributes for each specific selector.

Class Selectors You can use the Class attribute to create a style rule, name it, and then apply it to any HTML element. Class styles can be applied to any text in the document regardless of which tags are used to control the text. Class styles can be combined with existing HTML tags to control the formatting of a selected element (e.g. <p class=”standard”> causes the selected paragraph to be formatted according to the specifications of the standard class).

To create a class, a style rule is defined in the <head> section of the document (or a CSS file), and then combined with any HTML element in the body of the document to format that element. This allows you to define a variety of different formatting that can be used with each HTML tag. For example, you can define a class such as .inset, and then use it with any HTML tag such as <p> or <h1>. The entries below show how a class rule is defined to set the margins for a block of text, and then used with the <p> tag in the <body> to apply the margins to a particular paragraph.

.inset {margin-left: 25px; margin-right: 25px;} (the style rule declaration in the <head> section) <p class=“inset”> (application of the style rule to a paragraph in the <body>)

Class rules can be combined with any block-level element so the same class can be used with a different tag. For example, the formatting of the .inset class could be used with an <h1> tag as shown in the following example: <h1 class=“inset”>.

You can also restrict classes so that they can only be applied to a specific block-level element by combining the tag and the class in the declaration. The style definition below ties the .inset class to the <p> selector so that it can only be used at the paragraph level:

p.inset {margin-left: 25px; margin-right: 25px;}

CSS Formatting


ID Selectors The ID attribute is similar to the class attribute but is restricted to a single element in the document. Once the specific ID attribute has been assigned, it cannot be reused elsewhere in the document.

The ID attribute is especially helpful for the absolute positioning of unique elements on the page, but can also be used to identify unique formatting. For example, the index of a document could be assigned an ID since a document only has one index and it needs to be formatted in a particular way.

The syntax for the ID attribute is similar to the class attribute except that the declaration begins with the pound sign (#) instead of a period (.).

#index {font-weight: bold; font-style: italic;} (style rule declaration) <p id=“index”> (application of the style rule to a paragraph in the <body>)

Div and Span Selectors Div and Span tags are powerful tools used to specify logical divisions of a document.

The <div> tag is used to create and name block level elements in the document such as sidebars, and navbars and to specify their formatting.

The <span> tag is used to create and name in-line elements such as a “span” of characters contained within a block level element. You attach formatting by specifying the range of characters to be included in the span. For example, <span> could be used to apply bold and italics to selected characters in a heading or paragraph.

The <div> and <span> tags can be combined with Class and ID attributes to create your own element names and to define specific formatting for sections of your document.

CSS Formatting


Embedding CSS Rules in a Document CSS style rules can be embedded in the <head> section of a document making them available only to that specific document, or you can store CSS style rules in a separate document so that they can be applied to all of the pages in the site.

Headings and the Body Tag 1) Open or create a new HTML page.

1) Choose Modify | Page Properties… to display the Page Properties dialog box.

2) Select the Appearance (CSS) category and select the Page font, Size and Text color.

3) Select the Headings (CSS) category and select the Heading font, and Size and the

Text color for each of the Heading levels that you plan to use.

CSS Formatting


4) Click OK. Dreamweaver will record the appropriate codes for CSS formatting (<style type="text/css">) and write the style definitions into the <head> section of the document.

5) If you want to modify any of the style information for the body and headings of

your document, open the CSS panel and set the display option to All. The existing style hierarchy will be displayed in the panel.

CSS Formatting


6) Select the style you want to modify from the hierarchy and then click the Add Property option (or double-click the style to open the CSS Rule dialog box). Select a property from the pop-up menu in the properties column, and set the values for that property using the pop-up menu in the attributes column.

Classes and ID’s 1) To create CSS style rules for classes and id’s, open the CSS panel, and click the

New CSS Rule button at the bottom of the CSS panel.

CSS Formatting


2) From the resulting New CSS Rule dialog box, choose the Selector Type (either Class, ID, Tag, or Compound). Type a name in the Selector Name field. For a Class selector begin the name with a period, and for an ID selector begin the name with the pound sign (#) – If you omit these, Dreamweaver will enter them automatically for you. No spaces are allowed in style names. For the Rule Definition option, make sure that the setting is (This document only) if the styles are meant to be document specific.

3) Click OK to move to the next step.

In the CSS Rule Definition dialog box, select the options you require from each Category, then click OK to add your new style to the document.

CSS Formatting


4) If you need to modify the attributes of the style at a later date, open the CSS panel and set the view option to All. Select the Style to be modified and then use the Properties section of the CSS panel to modify existing properties or add new properties (or double-click the rule to open the CSS Rule dialog box).

CSS Formatting


Creating an External Style Sheet Storing your styles in an external style sheet (a CSS file) makes the styles available to any document that the style sheet is attached to. The CSS file can also be attached to the site template(s) and (therefore) to every page in the site. This is a superior method to embedding the styles in a single document as it allows you to efficiently update the formatting on every page in your site simply by changing the style declarations in the style sheet. A collection of style sheets can also be created so that the same Website can be quickly reformatted for display on devices other than personal computers.

To achieve the most universal result, the best practice is to use the styles “as-is” throughout your Web site, and preview the pages in a browser before you specify the formatting for each style. Browsers with limited support for CSS will use these default settings, so you can choose to use the styles that give the best results when the style formatting has not been changed. You can then reformat the styles to match your personal preference knowing that your pages will display properly in browsers with good CSS support, and will “fail gracefully” in browsers that are unable to properly interpret the style settings.

Creating a CSS File 1) Choose File | New to open the New Document dialog box. 2) Select the Blank Page tab (located on the left hand side of the dialog box) and

then select the CSS as the Page Type. Click Create to create the CSS file.

3) Choose File | Save As to specify the site folder to store the file in, and to provide

a name for the file.

For convenience, you can also define the CSS formatting within a page or template and then write (move) the rules to an external style sheet once you are satisfied with the formatting.

CSS Formatting


Adding Styles to the CSS file You can use standard HTML tags (such as <body>, <p>, or <ol>) to create styles, or you can create your own styles using the <div> and <span> tags and Class and ID selectors.

1) With the CSS file open in the document window, display the CSS panel and click the New CSS Rule button.

2) In the New CSS Rule dialog box, choose a Selector Type for your new style. For a Tag selector, choose the tag from the Selector Name drop-down menu. For a Class or ID selector, type a Selector Name. For the Rule Definition, make sure that the setting is (This document only).

3) Click OK to display the CSS Rule Definition dialog box.

4) In the CSS Rule Definition dialog box, select the options you require from each Category, then click OK to add your new style to the document.

CSS Formatting


Modifying Styles 1) Open the CSS panel and set the view option to All.

Select the Style to be modified and then use the Properties section of the CSS panel to modify existing properties or add new properties (or double-click the rule to open the CSS Rule dialog box).

CSS Formatting


Attaching a Style Sheet In order to take advantage of the styles in the style sheet, the CSS file now needs to be attached to the pages in your site. If you are using a DWT (template) file, it is best to attach the style sheet to the template, and then attach the template to the Web pages in the site. If you are not using a DWT file, you can attach the style sheet to pages individually.

1) If you have chosen to attach the style sheet to the template, open the template file; (otherwise open the page(s) that you want to attach the style sheet to).

2) Open the CSS panel and click the Attach Style Sheet button located at the bottom of the panel.

3) In the Attach External Style Sheet dialog box, use the Browse button to select the

CSS style sheet file as the File/URL, and make sure that the Link option is selected.

4) Save the template.

CSS Formatting


5) In the Update Template Files dialog box, click Update to write the changes into all of the pages attached to the template.

6) In the Update Pages dialog box, select Entire Site and select the target site to be

updated. Click Start to complete the process.

Applying Styles Styles are applied from the Property Inspector.

1) Open the page to be formatted and select the element that you want to apply a style to.

2) On the Property Inspector (set to HTML view), select a tag from the Format pop-up menu, or select a Class or ID from the respective pop-ups. On the Property Inspector (set to CSS view), select the style from the Targeted Rule pop-up.

css formatting - camosun college · css formatting this section describes the css formatting model,...

Documents