Cascaded Style Sheets (CSS) Defining styles for your entire web site Creating CSS style Sheets Defining CSS style rules Linking Style Sheets to your pages Using CSS styles in your pages

Introduction If you want your Web site to have a unique character and be easy for visitors to get around in, it’s important to maintain a consistent look and feel throughout all pages in your site. This involves thinking about what kinds of design elements you might use in your site. To maintain a consistent look and feel, it’s best to predefine the exact appearance of all these items in style sheets. The technology we use to create style sheets goes by the name Cascading Style Sheets, or CSS for short. CSS is a language that works in conjunction with HTML to define the exact appearance of any element in a Web page. You can use it in conjunction with the style= attribute in any HTML tag.

What is Cascading…..? Certain stylistic elements cascade down through child elements Example I’m Heading I am Paragraph. Heading and I are children of body. Example with CSS I’m Heading I am Paragraph. Heading and I are children of body.

Unless …if…otherwise …specified Example I’m Heading I am Paragraph. Heading and I are children of body. So we don’t want to fill up code in the page like style= Instead we create a Style Sheet with all the CSS rules we will use. This sheet will have CSS rules of the form : Body {font-family: ‘Bookman Old Style’} Two major components : SELECTOR DECLARATION The DECLARATION has the form property:value It is another LANGUAGE A rule can contain multiple properties. Example Body {font-family: ‘Bookman Old Style’; font-size: 12pt}

CREATING A CSS Style Sheet To create a new style sheet, follow these steps: In Solution Explorer, right-click the folder in which you want to place the style sheet and choose Add New Item. In the Add New Item dialog box, click Style Sheet. In the Name box, type a name for your style sheet. (For example MyStyles.css). Click Add. A new style sheet opens in the CSS Editor, at first just showing an empty rule for defining the style of the HTML body tag.

Opening the CSS Editor

Versions of CSS

Creating Style Rules A style sheet can contain any number of rules of several different types. In a CSS style sheet, you follow these steps to create an element-rule selector: Click the Add Style Rule button in the CSS toolbar, or right- click in the CSS style sheet and choose Add Style Rule. (The Add Style Rule dialog box opens.) Choose Element, and then choose the HTML element for which you want to design a style. Example  Choose the H1-Element Click OK. With the selector and curly braces in place, you can use the Style Builder described later to define the style of the element. If you already have a style sheet from a previous Web site, you can just copy and paste that sheet’s contents into the new sheet you’ve created in VWD.

Creating CSS class selectors You don’t have to apply a style to all instances of an HTML element. You can create “special circumstance” rules that are applied only as needed. For example,you might have to create two types of tags for table cells: one for regular table cells, and one for the column headings across the top row of the table. To create “special circumstance” rules, you define CSS class selectors. Unlike an element selector, a class selector doesn’t have to match an HTML tag. You can give the class selector any name you want. Just avoid using spaces and punctuation in the name. Keep it short and simple. Click the Add Style Rule button or right-click the page and choose Add Style Rule. In the Add Style Rule dialog box, choose Class Name.

Example for Class Selectors.Mono { } The leading dot that VWD adds to your name isn’t actually part of the name.It’s just a signal to the Web browser, indicating that the name that follows the dot is a class name rather than an HTML element.

Assigning a style class to a particular HTML element You can also assign a style class to a particular HTML element, and use that style class with only certain instances of the element. For example, you might create a DIV (division) class that creates sidebar text. Use the Add Style Rule dialog box to create the rule. Choose Class Name and type in a name of your own choosing for the class. Then select the Optional Element check box, and choose an HTML element from the dropdown list. For example, create a new CSS class named DIV.BoxedText. Click OK, and the result is as follows: DIV.BoxedText { }

Defining Rules with the Style Builder Manually typing the declaration for a rule isn’t easy. The syntax rules are strict, and there are a lot of property names to remember. Steps to do it with the style builder: Position the cursor just to the right of the opening curly brace of the selector you want to style. Click the Build Style button in the Style Sheet toolbar, or right-click near the cursor and choose Build Style. Add the styles that you like.

Setting to Many of the drop-down lists you encounter in the Style Builder will have a option, like the Italics drop-down list. It may seem odd that you have the choice to set an option to “not set,” but there is a reason for it: If you previously set the option to a specific setting, choosing ensures that the old setting is removed. In the rule that the Style Builder creates, you won’t see anywhere because choosing removes the property:value pair from the rule. That means the element you’re styling will inherit the style from its parent element.

Styling fonts The Font category of the Style Builder lets you define the font of the selector (the item you’re styling). It’s important to know that fonts come from the client computer, not from your computer. To gain some control over how the client PC chooses substitute fonts, specify multiple fonts in order of preference. Generic fonts are good for this purpose, because they allow the client PC to choose a font that at least resembles your preferred font.

Ways to size a font Set a specific size, in points (or some other unit of measure) You might want to do this when defining the default font for body text (in the body{} selector in the style sheet). To set a specific size, choose Specific. Then type in a size and choose your unit of measure Set an absolute size This option defines the size as a value, ranging from XX- small to XX-large. The exact size of the text, in points, is defined by settings in the visitor’s Web browser. Set a relative size This defines the size of the text relative to neighboring inline text, either smaller or larger. Relative size refers to the size of the parent element’s size.

Styling the background The options in the Background category of the Style Builder relate directly to the CSS properties that control background color, Background image, background-repeat, background-position, and Background attachment.

Styling text alignment and spacing Clicking the Text button in the Style Builder takes you to styling options for text Under the Alignment heading, The Horizontal option lets you choose how you want the text, or item, aligned between the margins of the parent object The Vertical Alignment options are:

Styling position The Position category of Style Builder,offers options for sizing and positioning pictures (the tag), tables (the tag), and block elements that contain text like the... (division) tags. From the Position Mode drop-down list, you can choose from the following options: Position in normal flow: The element is “glued” to its neighboring text (usually a paragraph). Offset from normal flow: Same as above, but the item can be offset from its default position. Absolutely position: Places the block at a specific position on the page. The block is not “glued” to any neighboring text.

Styling position Example

Styling layout In the Layout category of the Style Builder, you find options that control how elements appear on your page in relation to one another. The Flow Control options are: Visibility: This option controls whether or not the block is visible on the page. Display: This option determines whether the item is displayed as a block element or inflow element. If treated as a block element, the item is placed in its own box on the page, like a table or image. If treated as an inflow element, the style is applied inline. Do Not Display: This option omits the element from the page altogether. The Do Not Display option prevents the element from being sent to the browser. That reduces the download time Allow Text To Flow: These options determine whether (and where) text flows around the block element you’re styling.

Styling layout Example

Styling boxes and borders Many design elements, like pictures, tables, and chunks of text enclosed in... tags, form boxes on your page. The Edges category in Style Builder allows you to define the spacing outside the box, inside the box, and the appearance of the borders around the box. If you’re defining the style of a box that contains text or an image, the settings apply as follows: Margins: Defines the margins outside of the box (how near neighboring text can get to the box). Padding: Defines margins inside the box (how near text inside the box can get to the box border). Borders: Defines the style, width, and color of the border surrounding the box.

Styling boxes and borders-Continue

Saving Style Builder choices When you’ve finished choosing options from the Style Builder, just click OK. Your selections are translated into appropriate CSS property: value pairs and inserted between the curly braces for the rule. Here’s a general example:

Linking to a Style Sheet When you’ve finished working with a style sheet, just close and save it as you would any other document. The styles you defined won’t be applied to anything until you link the style sheet to a page. The rules you create in a CSS style sheet are applied only to the pages to which you link the sheet. If you’ve created a Master Page, you can link the style sheet to the Master Page. The styles automatically carry over to all content pages that use the Master Page.

Linking to a Style Sheet-Continue The easy way to link to a style sheet is just to drag its icon from Solution Explorer into the page you’re editing. To use your style sheet in an HTML page (or an.aspx page that doesn’t use the master), just open that page in Design view and drag the style sheet’s icon from Solution Explorer onto the page. Unless there are styles in the style sheet that apply to tags already in the Master Page, you won’t notice any difference. But if you switch to Source view, you’ll see that VWD has inserted a link to the style sheet between the and tags near the top of the page. That link will look something like this example:

Using Styles in a Page After you’ve linked a style sheet to a page, HTML element styles will be formatted automatically. For example, if you styled the body{} element, then body text in the page takes on the style you defined immediately. As you format text in the page, any new styles will come into play as you use the element. For example, let’s say you created a style for Heading 1 elements in your CSS style sheet, like this: H1 { font-size: 16pt; font-family: ‘Arial Black’; font-style: italic; } Any text in the document that is already formatted as H1 will automatically be displayed in the new style. Exactly how you use a style rule to format new or existing content on the page depends on which type of selector defines the rule.

Applying CSS element selectors A CSS element selector is any CSS rule whose name does not contain a dot. The name of the selector matches the name inside the HTML tags of the element. Applying such a selector takes no real effort at all. You just apply the element as you normally would

Applying CSS class selectors CSS class selectors aren’t associated with any particular HTML element. In a style sheet, their names are preceded by a dot, as in this.Mono class selector Using CSS class selectors in VWD is a bit of a pain, because their names don’t show up in IntelliSense menus or any drop- downs anywhere. You have to remember the names and type them yourself.

Applying CSS class selectors-Continue Note that within the tag you don’t include the leading dot, just the name. The class name must be enclosed in single or double quotation marks. You’ll need to work directly in Source view to type the tags. An easier way: You first select that text in Design view (drag with mouse). Switch to Source View. Click a space just to the left of the first character you want to format, and manually type :

Applying element class selectors Element class selectors have a dot embedded in the name. The first part of the name defines which tag you use to apply the style. For example, here is an element-class selector named ColHead that can only be applied to table cells ( tags).

Applying element class selectors-Continue To use an element class like TD.Colhead, you have to apply the class to text that’s already formatted by the HTML element, TD in the previous example. You can take a shortcut and select the items you want to format. For example, to apply the TD.ColHead class selector to all the cells in a row, select the row of the table cells. The Properties sheet won’t show a tag name when you have multiple elements selected. But you can still type the class name, ColHead, in the Class property for the selection. Press the Tab key to complete the entry.

Applying element class selectors- Continue

Using DIV styles A div is a box or “division” of text, set off from the normal flow of body text. The tag is to block styles what is to inline styles. An empty pair of... tags creates a new box in which you can place text, tables, pictures etc. However, text inside the box inherits its font and virtually everything else from its parent element, most likely the tag for the page. Instead of manually creating and formatting a pair of... tags each time you put a centered element on a page, you could create a CSS style that already defines how you want centered elements to appear on the page. Example :

Using DIV styles - Continue In the Style Builder you’d choose the following categories and options: Background: Choose Transparent. Text: Choose Horizontal, Centered. Position: Choose Width property and set it to 100%. Layout: Set Allow Text To Flow to Don’t Allow Text On Sides. Set Allow Floating Objects to Do Not Allow

The CSS 2.1 Specification Starting with HTML + CSS: Introduction to CSS 2.1: CSS 2.1 Specification: