In design view you page is rendered as shown in image below.

You can turn off CSS rendering to see how this page will look without CSS. Right click on the gray area at the top of the DW window and activate Style Rendering.

Click on the toggle displaying of CSS button, this will toggle your CSS styles on and off in the document’s design window. Turn if off and your page will look similar to as shown in the image below.

When you turn CSS off, your blocks of code will appear in the order they were coded inside of the document.

DIV Tag

Div tag is used to create empty boxes and you can use these boxes to divide the area of your page. Look at the code of primer.html as shown in image below, we have a container for the page and then we have div tag for header, sidebar1 and mainContent. If you scroll down further you would find one more div tag for footer.

Inline elements

Inline elements only takes up the space they need. Have a look at the image shown below. Here each element is taking its own place; heading, image, and the text. These kinds of elements sometimes referred to as block elements.

Image below shows the inline image element, as you can see image is taking up only the space it needs in the page.

CSS Syntax

We create CSS rules to enhance the design of the page. Let us first understand the CSS syntax. Have a look at the example shown below.

.smallText {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #000099;
}

smallText is called Selector that we want to style. The curly bracket follows selector, you would also notice a curly bracket at the end of the code. This whole arrangement is called a block or declaration block. Font-family, font-size and color are the properties that we want to modify and “Arial, Helvetica, sans-serif”, “10px”, “#000099″ are the values we want to apply to the properties. Also notice semicolon at the end of the declaration statement which represents end of the statement.

CSS Selector Types

Click on the New CSS style button in the CSS panel. A new window will popup.

At the top you can see the Selector Type. A Class type is that you create and attach manually. For example if you want to create a 14 px red color heading for your page. You can create a class RedHead14px. To apply you have to first select the text and apply RedHead14px class to it.

Another style is tag style and used widely. This style applies globally to an individual HTML tag. Suppose you want to display Heading 1 tag (<h1>) in red color. Select the h1 tag from the drop down list and create red text formatting for it.

Advanced selector types are used for Ids and pseudo-selectors. An ID is a type of selector that lets you format a unique item in the page. It is frequently used with <div> tag. Div tag is used to define a logical division of a page. An Id style is similar to class style, however the class style begins with a period (.) while ID styles begin with a hash (#).

#mainContent {
	font-family: "Times New Roman", Times, serif;
	font-size: 18px;
}

You can apply an ID to only one tag per page while you can apply class many times on a page.

···<div id="mainContent">

Each ID name should be unique. We will talk about Advanced Ids in detail in later chapters. Lets talk a little about pseudo selectors. Most commonly used Pseudo selectors are

a:link - initial state of the link
a:visited - the state of the link after user has visited the link
a:hover - state of the link when user hover mouse over it
a:active - when user clicks on the link but does not release the mouse

When you use these pseudo styles make sure that they appear in a specific order in your document.

a:link, a:visited, a:hover, a:active.

Internal Vs External Style Sheets

Each time you create a new style, it is added to a style sheet stored either in the webpage (in header section) itself or in another style sheet called external style sheet. It has an extension .CSS. Internal style sheet is good option when you have limited formatting. External style sheet can be linked to as many pages as possible. You can even attach multiple style sheets to one page.

If you use an external style sheet link tag is used in head section to attach the file to the page.

···<link href="oneColLiqCtr.css" rel="stylesheet" type="text/css" />

Creating Styles

When All button is selected, panel displays both the external and internal style sheets attached.

Three buttons at the bottom left corner defines how the property list is displayed.

How to apply a style?

Select the whatever element you wish to style and right click, choose CSS Styles and then select the style you want to apply.

You can also apply it from properties window.

And also by right clicking on the tag bar and selecting style.

And also by right clicking on the CSS tab and clicking Apply.

When you apply a class style to a tag Dreamweaver modifies the HTML code to accommodate that change. Suppose if you have applied a class, “banner” to a paragraph, the code in Dreamweaver will look like this.

···<p class="banner">

If you apply style to a selection, that is not a tag; Dreamweaver wraps the selection with in the span tags.

···<span class="banner"> </span>

To unapply a style, apply right click, choose CSS Style > None. If you have applied style to a selection of text, to remove styling just place the cursor anywhere inside the selection and choose None from the menu.

So this was the primer of CSS, in future tutorials and articles we dig deep into Dreamweaver and CSS.

Subscribe to the post comments feeds or Leave a trackback