You are on page 1of 24

Introduction to CSS with Dreamweaver 8

What is CSS
CSS stands for Cascading Style Sheets which are definitions for a document such as an HTML page that define that page's style or presentation. By presentation we mean how content on a page is displayed. Is it displayed as simple black text on a white background !r is it displayed in a more complex layout consisting of images and content di"ided into columns #tyle sheets are capable of specifying that presentation without interfering with the content of the page. This means that the same content can be used with many styles without being modified $ a separation of presentation and content.

Why are They Cascading?


The term cascading in %## refers to how many style sheets can affect a single document in a cascading manner. This means that they all come together to create one single style that decides the o"erall presentation of the page. If styles between sources conflict& a weighting system is used to decide which style has precedence.

Dreamweaver and Style Sheets


's a ()#I()* +(hat )ou #ee Is (hat )ou *et, editor& -reamwea"er makes creating and using style sheets a snap. -reamwea"er . introduces a unified %## panel that keeps track of all styles used in a document gi"ing you easy access to either use& edit& or create any style you need. The /roperty Inspector also continues to pro"ide css$related options for the current selection.

The following will work with styling text in -reamwea"er .. *et the source files to follow along yourself.

This tutorial will show you how -reamwea"er can use styles applied with style sheets to turn text0document.html into text0document0styled.html. It will help better familiari1e you with the %## panel and how it and the /roperty Inspector can be used to manipulate styles within your HTML documents.

Getting Started
In text0document.html you ha"e a simple text document with a few paragraphs and a few accompanying headings. There are no styles applied so what you see in the browser are the default for those element types.

To start styling the page& you can begin with the basic properties of the page& things like the page background and the default font for text within the page. This can be managed using the /age /roperties dialog. 2. In -esign "iew& open the /roperty Inspector +if not already open, and click on the /age /roperties button to open the /age /roperties dialog.

The /age /roperties dialog opens with options for changing the document's appearance. 3ach option relates to a %## style that will be applied to the document.

4. 5nder /age font& select 'rial& Hel"etica& sans$serif 6. 7or #i1e +text si1e, select small. )ou could choose a numeric "alue which can be associated with a type of measurement such as pixels& ems or percent. The small option is simply small. 8. 7or Text color& pick 9:::::: ;. 7or Background image& browse to find the gradient.png file in the examples download. This image is a tall thin image that is meant to only be repeated hori1ontally. By default all background images are tiled and repeated both hori1ontally and "ertically. (ith %## +and only with %##,& you ha"e control o"er how background images repeat& if they repeat at all. :. 5nder select repeat$x to only repeat the background image hori1ontally. This type of repeating& howe"er& lea"es the rest of the document's background re"ealed. That can be filled in with a default background color which will be seen where the background image is not. <. 7or Background color& pick 9%%%%%% $ this matches the bottom color of the background image allowing for a seamless blend. .. The margins for left and right can be set to 2==px. Top and bottom can be left alone lea"ing them to the browser defaults.

(ith those settings& the page should look like the following>

'lready there has been a dramatic change. To see the styles that are making this happen& switch o"er to %ode "iew in -reamwea"er to see the source code. In the head element you should see a new style tag that was automatically added to the page with the definitions relating to the properties set in the /age /roperties dialog.
<style type="text/css"> <!-body,td,th { font-family: Arial, Hel etica, sans-serif! font-si"e: small! color: #$$$$$$! % body { bac&'ro(nd-color: #))))))! bac&'ro(nd-ima'e: (rl*ima'es/'radient+pn',! bac&'ro(nd-repeat: repeat-x! mar'in-left: -..px! mar'in-ri'ht: -..px! % --> </style>

)ou may notice that the properties listed are di"ided into two groups& one for body& td& th and one simply for body. The reason for this is that certain %## properties like font properties are not inherited from the HTML body to table cells +td and th,. 7or this

reason& font properties ha"e to be applied to each the body and elements used for table cells. To learn more about the format of this code& see Basic #tyle #heet 7ormat.

The CSS Styles Panel


Though you are free to edit styles using the source code& it is easier using the %## #tyles panel& especially if you are unfamiliar with the format. )ou can open this panel using /indo0 > )11 1tyles.

The %## #tyles panel shows all styles associated with the document +with the option to "iew only the styles associated with the current selection using its %urrent "iew,. There you can see the styles or rules +body& td& th? and body, which were applied using the /age /roperties dialog. )ou can edit properties within those rules when selected in the %## #tyles panel or& add new ones using the 'dd /roperty option in the /roperties pane. 2. In the %## #tyles panel& single click the body rule to see the properties associated with it

4. #elect the left column for font$family where it should say 'rial& Hel"etica& sans$ serif and change it to @%ourier Aew@& %ourier& monospace. The changes should take effect immediately. 6. Aow double$click the body rule or click on the 2dit 1tyle+++ icon to open up the %## rule definition dialog.

This dialog is similar to the /age /roperties dialog but it allows you to change "irtually any property for the current style. /roperties are grouped by categories listed on the left. They range anywhere from the appearance of text to the appearance of the @box@ or element boundaries in which they are contained $ all managed through %##. 8. %hange the %ourier font back to 'rial and hit !B. ;. Back in the %## #tyles panel& with body& td& th selected& click on 'dd /roperty in the /roperties pane. :. In the drop$down list& select font$weight and gi"e it a "alue of bold.

'll of the text in the document will go bold <. (ith the font$weight property selected& click on the 3elete )11 4roperty icon to remo"e it. The %## rule definition dialog will be a commonly used tool for creating and edit style definitions. It would be a good idea to become familiar with where things are and what you can change using it. Though not as accessible as the %## #tyles panel& it is a little more organi1ed making style definitions& especially new ones& a little easier to manage.

External Styles
The styles created so far ha"e been specific to the document& i.e. they ha"e been defined inside the document in the head tag. This is fine& but there are other ways of applying styles to pages. The most "ersatile means is through an external style sheet. 7or more on the different ways styles can be applied& see 'ssociating #tyle #heets with -ocuments. Aote> 5sing the /age /roperties dialog will always produce styles that are embedded within the current document. #o far the page properties ha"e been set& but no properties specific to any of the text within the page? global properties& yes& but not specific properties. (e can start with the main header.

2. #elect the main page header that reads @Lipsum Ipsum -olor@. )ou'll want to make sure the h- tag that contains this text is fully selected. )ou can check this using the Tag #elector in the status bar area of the document window.

If the h- tag isn't highlighted there& click on the tag in the Tag #elector to select it completely. 4. In the %## #tyles panel& click on the 5e0 )11 6(le+++ icon %## Cule dialog. to open the Aew

This dialog pro"ides options for a new %## Cule. The first set of radio buttons allows you to choose whether you want to define a style for a class& an HTML tag& or a more ad"anced rule such as those used with id attributes. 7ollowing that you ha"e the name of your class or HTML tag or selector definition if ad"anced was selected within the radio buttons before it.

7inally there is the option letting you specify where you want this style to be defined& whether it be in an external style sheet or in the current document +which should currently be selected,. The default is for a new style sheet file. Howe"er& this option will automatically select the setting which reflects the selection in the %## #tyles panel. #ince the text0document.html already has styles embedded in the HTML in a style tag& the This document only option is automatically selected for you. The second option for the classDtagDselector will also do this& especially when dealing with selections ha"e ha"e class or id attributes defined for them. 7or those tags without those attributes& recognition of the selection will only occur if the Tag selector type radio is already selected. 6. #elect the second radio& Tag& for the #elector Type. 8. %lick %ancel. ;. In the %## #tyles panel& click on the 5e0 )11 6(le+++ icon to reopen the Aew %## Cule dialog. The Tag radio should still be selected and the h- tag should automatically be filled within the second option& Tag.

:. 7or -efine in> select the Aew #tyle #heet 7ile radio button and click !B. The #a"e #tyle #heet 7ile 's dialog should open.

<. Aame the new style sheet new0style and click #a"e. The familiar %## Cule definition dialog should open allowing you to specify a style for h- tags. .. In the Type category& set color to 9777777. E. In the Background category& set Background color to 9==::%%. 2=. In the Block category& set Text align to center. 22. In the Box category& for padding& with #ame for all checked& use 2= pixels. 24. %lick !B. )ou will notice the Lipsum Ipsum -olor title has changed in style. 'lso the new0style %## file has been opened in -reamwea"er and is listed in the %## #tyles panel along with the embedded styles.

If you look at the new0style.css file& you can see the %## that's affecting the tag.
h- { font-style: normal! color: #777777! bac&'ro(nd-color: #..$$))! text-ali'n: center! paddin': -.px!

Aotice that the text$align property was used to center the heading& not the align attribute. #ince HTML 8& the align attribute has been deprecated in fa"or of the text$align %## property. -reamwea"er& howe"er& will still use the align attribute to center if not managed through %## $ something you might want to be wary of. If you look back at the source of text0document.html& in the head you will see a new lin& tag linking to the style sheet.

<lin& href="ne08style+css" rel="stylesheet" type="text/css" />

This tag allows styles defined in new0style.css to be seen in this document. If you ha"e a pre$existing style sheet you want to use& you can link that to your document using the %## #tyles panel as well. 2. %lick on the Attach 1tyle 1heet icon 3xternal #tyle #heet dialog appears. in the %## #tyles panel. The 'ttach

4. Browse to find the style sheet you want to link 6. #elect how you want the style sheet added& as a link or imported +see 'ssociating #tyle #heets with -ocuments,. 8. #elect the media. -epending on the de"ice or browser "iewing the page& the media can determine whether or not the style sheet is to be used. ;. %lick !B to add the style sheet or %ancel to cancel. +Ao other style sheets are being used for text0document.html so you can cancel if you opened this dialog in that document., (ithin the 'ttach 3xternal #tyle #heet dialog& you may ha"e noticed the sample style sheets link at the bottom of the window. This may be helpful to explore if you want to try using some pre$built styles or Fust see some examples of completed style sheets.

dding dditional CSS !ules


Aow that a new %## file has been created for the text0document.html page& additional rules can easily be added to it through the %## #tyles /anel. !ther than the h- tag& other tags which are to ha"e styles associated with them for this document include h9& h:& and p. 2. /lace your cursor in the heading 4 title labeled @%ras Gusto Lacus@. 4. %lick on the h9 tag in the Tag #elector area to select the tag completely. Aote> It is not actually necessary to select the entire tag when adding rules in this manner. Howe"er& it is a good habit to get into when you want to affect entire tags and not Fust specific text within those tags which other operations can affect. 6. In the %## #tyles panel select new0style.css in the 'll Cules pane. 8. %lick on the 5e0 )11 6(le+++ icon to create a new style for the h9 tag.

;. Make sure the new rule is being defined in new0style.css and click !B. The -efine Cule -efinition dialog will appear for the tag. :. Cepeat this for each of the h9& h: and p tags using the following settings>
h2

tag"
o o o o

Type color> 9777777 Border bottom width> 2 pixels Border bottom style> solid Border bottom color> 9==::%% Type color> 9:::::: Type style> italic Type line height> 4 ems Block text indent> 4 ems

h3

tag"
o o

tag"
o o

The style of the page will change to show the new properties now listed in the %## #tyle panel.

If you open new0style.css& you can see the new %## that was added for each tag.
h9 { color: #777777! border-bottom-0idth: -px! border-bottom-style: solid! border-bottom-color: #..$$))! font-style: italic! color: #$$$$$$! line-hei'ht: 9em! text-indent: 9em!

% h: { % p { %

Classes

#o far& the styles created ha"e been redefining HTML tags. In doing this& any and all tags that ha"e a style associated with them will use that style. This method offers no specificity o"er which tags in particular are gi"en certain styles and which are not. #etting a style for the h- tag affects all uses of that tag. %lasses& on the other hand& allow you to assign styles to specific tags within your document. -reamwea"er uses classes for non tag$specific styles applied through the /roperty Inspector +by non tag$specific I mean things other than bold or italic which are applied through specific tags such as b or stron' and em or i,. 2. 5se your mouse to drag and select the first sentence in the first paragraph. It contains the text @Lorem ipsum dolor sit amet& consectetuer adipiscing elit.@ 4. In the /roperty Inspector& select a si1e of large. 6. Aext& still within the /roperty Inspector& select a color of 9======. The si1e of the selected sentence increased and its color has changed from gray to black. The /roperty Inspector also now shows a new selection in the #tyle drop$down marked style2. If you look at the source code for the selection& you'll see a new span was added and gi"en the new style in the form of a class.

%hecking the source of the embedded style in the document head will re"eal the new class definition.
+style- { font-si"e: lar'e! color: #......! %

Aote> The new style may be defined in a new style tag in the source code. This will occur if your current style tag is not the last tag within the head tag of the document which is may not be if a lin& tag was placed after it when creating new0style.css. If you want to ha"e this style and others you create like it to be added to the same s tag& mo"e the s and any other tags within head to be abo"e your style tag if not already. 's a class& you can now select any other text within the document and easily apply the same style using the #tyle drop$down in the /roperty Inspector.

If you want to rename the style& you can also do this easily from the #tyle drop$down +as style2 is not a "ery informati"e style name,. 2. /lace your cursor in or select the text defined as style2. The style2 selection should be "isible #tyle option in the /roperty Inspector. 4. In the /roperty Inspector& select Cename... in the #tyle drop$down. The Cename #tyle dialog will appear.

6. If not already selected& select style2 in the Cename style drop$down. 8. 7or the new name& type first$sentence. ;. %lick !B. The Cesults panel will appear showing that all instances of the style ha"e been renamed from style2 to first$sentence. %lasses can also be defined within the %## #tyles panel. There are two approaches to take when doing this. )ou can work with the tags and classes +attributes, first& or define style first. If you know the classes you want to associate with your content prior to any styling or presentation being applied& then you would want to include class attributes with the HTML created with your content. This way& styles can be created to cater to the content as it is defined by those styles& much in the same way styles were created for specific tags before. The text0document.html page didn't ha"e any classes assigned to it to begin with. (e will want to use a class to specify the last two paragraphs in the page as being notices. To assign a class to a tag you can use the Tag Inspector panel. 2. #elect the second to last p tag in text0document.html. It should begin with the text @%ras aliHuet egestas libero@. 4. !pen the Tag Inspector panel +/indo0 ;a' > <nspector,. 6. #elect the 'ttributes tab if not already selected. 8. In the Tag Inspector panel& expand the %##D'ccessibility pane if not expanded already. There you should see options for defining class& id& style& and title. Though we are dealing with styles& we are adding them through classes meaning the class attribute here will be used. The style attribute is for inline styles.

;. In the class field& type notice to gi"e the p tag a class called notice.

:. Cepeat for the last paragraph in the document. Aote> The Tag Inspector /anel can also be used to add multiple classes to one element& something not possible using the #tyle option in the /roperty Inspector. Aow& the HTML specifies these paragraphs as representing notices. 's the designer& its your Fob to determine what notices look like using styles. 2. #elect one of the p tags that has a class of notice. 4. In the %## #tyles panel select new0style.css in the 'll Cules pane. 6. %lick on the new %## Cule icon . The Aew %## Cule dialog will open with all the necessary selections already made.

8. %lick !B. ;. In the %## Cule -efinition dialog define a style for the notice class gi"ing it a Type style of italic.

Both the second to last and last paragraphs in text0document.html are now displayed as italic. )ou may also decide to create a style before deciding where to add it. 7or this& you can create a new style using the %## #tyles panel Fust as was done with the notice class only prior to ha"ing assigned the notice class to any HTML tags. Then& when completed& use the #tyle drop$down in the /roperty Inspector to assign the class to your selection.

%lasses tend to be the primary means of applying styles because of their "ersatility. They don't affect all tags like tag styles do and you can be selecti"e of which selections recei"e which styles. )ou may find that as much as E=I or so of the styles you create are based in classes.

Pseudo#classes
/seudo$classes represent styles for definitions that exist outside those specified in code through HTML. The most common of these are associated with the different states of an anchor +a, tag. 'nchor tags in the text0document.html page will ha"e different styles when rolled o"er. This is possible through the use of pseudo$classes. 2. In the %## #tyles panel& for new0style.css& add a new rule using the 5e0 )11 6(le icon . 4. In the Aew %## Cule dialog& select the 'd"anced selector type radio button. 6. !pen the #elector drop$down to re"eal the a"ailable pseudo$class selections for the anchor tag.

8. #elect a>link and click !B. The %## Cule -efinition dialog will appear for the a>link pseudo$class definition. ;. #elect a Type color of 9==::%% and none for decoration :. %lick !B. <. Cepeat the steps for the a>ho"er pseudo$class applying the following properties>

a"hover" o Type color> 9777777 o Type decoration> none o Border bottom width> 2 pixels o Border bottom style> solid o Border bottom color> 9==::%%

Aow all links in text0document.html ha"e different styles when they are rolled o"er. If desired& you may also want to set styles for a>"isited and a>acti"e to ensure proper styling for each state. !ther pseudo$classes can be specified manually in the #elector option of the Aew %## Cule dialog as needed.

ID ttri$utes and ID Selectors


The other common association of styles to HTML tags is through id attributes and id selectors. Id attributes in HTML tags uniHuely identify that tag with a name. #tyles can be linked to that id Fust like they can with classes. The big difference is that ids cannot be used on more than one tag. This also means that style definitions for ids only relate to one tag per page. In text0document.html& an id can be applied to the h- tag containing the @Lipsum Ipsum -olor@ text. The tag will be gi"en the id @master$heading@ indicating that it is the sole and primary heading of the page. 's such it will also recei"e a uniHue style. 2. #elect the heading 2 tag at the top of text0document.html. 4. In the Tag Inspector panel& gi"e it an id of @master$heading@.

6. 5sing the %## #tyles -ialog& create a new rule in new0style.css by clicking the 5e0 )11 6(le icon . The appropriate settings should already be selected.

Aote> (ith ad"anced selectors like id selectors& you would need to specify a preceding number sign +9, before the selector name. (ith classes& assuming the class type is selected& no preceding period +., is necessary& only the class name. 8. #et a border style for all sides to be outset& thick and 9:::::: in color. Aow any tag with an id of master$heading in any HTML page that uses new0style.css will ha"e a thick& outset& gray border around it.

Conclusion
(ith that& you ha"e completely con"erted the original text0document.html from a basic page into a page with a little more style& literally. !ne thing to keep in mind is that styles created with the /age /roperties dialog and the other options a"ailable in the /roperties Inspector are embedded in the current document as embedded header styles. )ou may find it ad"antageous to define these styles using the %## #tyles panel instead. This will let you define them in external style sheets which can be shared among many pages.

The %## #tyles panel is an essential tool for styling pages in -reamwea"er. -o your best to make the most of it. It will undoubtedly help impro"e workflow.

You might also like