introduction to css with dreamweaver 8

8/13/2019 Introduction to CSS With Dreamweaver 8

1/24

Introduction to CSS with Dreamweaver 8

What is CSS

CSSstands for Cascading Style Sheetswhich are definitions for a document such as an

HTML page that define that page's style or presentation. By presentation we mean howcontent 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 beused with many styles without being modified $ a separation of presentation and content.

Why are They Cascading?

The term cascadingin %## 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 creatingand 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 optionsfor 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.htmlinto text0document0styled.html.It will help better familiari1eyou 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 fewaccompanying headings. There are no styles applied so what you see in the browser arethe default for those element types.
http://www.senocular.com/dreamweaver/tutorials/cssintro/examples/style_text.ziphttp://www.senocular.com/dreamweaver/tutorials/cssintro/examples/style_text.ziphttp://www.senocular.com/dreamweaver/tutorials/cssintro/examples/text_document.htmlhttp://www.senocular.com/dreamweaver/tutorials/cssintro/examples/text_document_styled.htmlhttp://www.senocular.com/dreamweaver/tutorials/cssintro/examples/text_document_styled.htmlhttp://www.senocular.com/dreamweaver/tutorials/cssintro/examples/style_text.ziphttp://www.senocular.com/dreamweaver/tutorials/cssintro/examples/text_document.htmlhttp://www.senocular.com/dreamweaver/tutorials/cssintro/examples/text_document_styled.html


2/24

To start styling the page& you can begin with the basic properties of the page& things likethe 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 thedocument.


3/24

4. 5nder /age font& select rial& Hel"etica& sans$serif6. 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 examplesdownload.

This image is a tall thin image that is meant to only be repeated hori1ontally. Bydefault 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 seenwhere the background image is not.


4/24

(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 headelement

you should see a new styletag that was automatically added to the page with the

definitions relating to the properties set in the /age /roperties dialog.

)ou may notice that the properties listed are di"ided into two groups& one for body& td& thand 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


5/24

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& seeBasic #tyle #heet 7ormat.

The CSS Styles Panel

Though you are free to edit styles using the source code& it is easier using the %## #tylespanel& 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 associatedwith it
http://www.senocular.com/dreamweaver/tutorials/stylesheetformat/http://www.senocular.com/dreamweaver/tutorials/stylesheetformat/http://www.senocular.com/dreamweaver/tutorials/stylesheetformat/http://www.senocular.com/dreamweaver/tutorials/stylesheetformat/


6/24

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 shouldtake effect immediately.

6. Aow double$click the body rule or click on the 2dit 1tyle+++ icon to open

up the %## rule definition dialog.


7/24

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 $ allmanaged through %##.

8. %hange the %ourier font back to rial and hit !.

;. 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.


8/24

ll of the text in the document will go bold

5sing the /age /roperties dialog will always produce styles that are embeddedwithin 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 themain header.
http://www.senocular.com/dreamweaver/tutorials/addingcss/http://www.senocular.com/dreamweaver/tutorials/addingcss/http://www.senocular.com/dreamweaver/tutorials/addingcss/http://www.senocular.com/dreamweaver/tutorials/addingcss/


9/24

2. #elect the main page header that reads @Lipsum Ipsum -olor@. )ou'll want to

make sure the htag 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 htag 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 to open the Aew

%## Cule dialog.

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 selectordefinition if ad"anced was selected within the radio buttons before it.


10/24

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 styletag& the This document only option is automaticallyselected 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 theTag 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 htag shouldautomatically be filled within the second option& Tag.

:. 7or -efine in> select the Aew #tyle #heet 7ile radio button and click !. The

#a"e #tyle #heet 7ile s dialog should open.


11/24


12/24

If you look at the new0style.css file& you can see the %## that's affecting the tag.

h {font-style: normalcolor: #777777bac&'ro(nd-color: #..$$))text-ali'n: centerpaddin': .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 headyou will see a new

lin&tag linking to the style sheet.


13/24

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 1heeticon in the %## #tyles panel. The ttach

3xternal #tyle #heet dialog appears.

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 +seessociating#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 ! to add the style sheet or %ancel to cancel. +Ao other style sheets arebeing 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 stylesheets 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.
http://www.senocular.com/dreamweaver/tutorials/addingcss/http://www.senocular.com/dreamweaver/tutorials/addingcss/http://www.senocular.com/dreamweaver/tutorials/addingcss/http://www.senocular.com/dreamweaver/tutorials/addingcss/http://www.senocular.com/dreamweaver/tutorials/addingcss/


14/24

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 htag& 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 h9tag 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 thismanner. 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 h9tag.


15/24

;. Make sure the new rule is being defined in new0style.css and click !. The

-efine Cule -efinition dialog will appear for the tag.:. Cepeat this for each of the h9& hand ptags using the following settings>

h2tag"

o Type color> 9777777

o Border bottom width> 2 pixels

o Border bottom style> solid

o Border bottom color> 9==::%%

h3tag"

o Type color> 9::::::

o Type style> italic

ptag"

o Type line height> 4 ems

o Block text indent> 4 ems

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

panel.


16/24

If you open new0style.css& you can see the new %## that was added for each tag.

h9 {color: #777777border-bottom-0idth: pxborder-bottom-style: solidborder-bottom-color: #..$$))

%h {

font-style: italic

color: #$$$$$$%p {

line-hei'ht: 9emtext-indent: 9em

%

Classes


17/24

#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 htag 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 /ropertyInspector +by non tag$specific I mean things other than bold or italic which are applied

through specific tags such as bor stron'and emor 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 markedstyle2. 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.


18/24

%hecking the source of the embedded style in the document head will re"eal the newclass definition.

+style {font-sie: lar'ecolor: #......

%

Aote> The new style may be defined in a new styletag in the source code. This will

occur if your current styletag is not the last tag within the headtag of the documentwhich 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 headto be abo"e your styletag 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.


19/24

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 selectionshould 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 !.

The Cesults panel will appear showing that all instances of the style ha"e been renamedfrom 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 orpresentation 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 contentas 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. Toassign 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 aliuet egestas [email protected]. !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 %##Dccessibility 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 meaningthe class attribute here will be used. The style attribute is for inline styles.


20/24

;. In the class field& type noticeto gi"e the ptag 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 ptags 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 !.

;. In the %## Cule -efinition dialog define a style for the notice class gi"ing it a

Type style of italic.


21/24

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 cancreate 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& usethe #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= or so of the styles you create are basedin 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(leicon .

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.


22/24

8. #elect a>link and click !. The %## Cule -efinition dialog will appear for thea>link pseudo$class definition.

;. #elect a Type color of 9==::%% and none for decoration

:. %lick !.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. Ifdesired& 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 uniuely 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 htag containing the @Lipsum Ipsum

-olor@ text. The tag will be gi"en the id @master$heading@ indicating that it is the sole andprimary heading of the page. s such it will also recei"e a uniue 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@.


23/24

6. 5sing the %## #tyles -ialog& create a new rule in new0style.css by clicking the

5e0 )11 6(leicon . The appropriate settings should already be selected.

Aote> (ith ad"anced selectors like id selectors& you would need to specify apreceding 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 basicpage 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 documentas 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.


24/24

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.

introduction to css with dreamweaver 8

Documents