New Feature: Playlist Center! Pick a topic and let our playlists guide the way.

Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member

Using Modify Page Properties to create embedded styles

From: Creating a CSS Style Guide: Hands-On Training

Video: Using Modify Page Properties to create embedded styles

For Web designers styling the page is one of the most fun activities. This is when your design skills can really be applied to what you are doing inside of Web design and development. We have got the content structure, we have our information designed well and now let's try to make the presentation as cool, neat, readable, and interesting as possible. We can really use our design skills here. We are going to learn how to create embedded styles in the head portion of the Web page using the style tag. I do not recommend this method, as each individual page must be edited in order to change or update your styles. Using an external style sheet allows you to apply styles to a number of Web pages, but only update the styles in one location, that external style sheet, and then those styles will be applied throughout your website. An external style sheet is linked in the head of a Web page with the link tag. Don't worry, more on this later. Again use external style sheets as a best practice.

Using Modify Page Properties to create embedded styles

For Web designers styling the page is one of the most fun activities. This is when your design skills can really be applied to what you are doing inside of Web design and development. We have got the content structure, we have our information designed well and now let's try to make the presentation as cool, neat, readable, and interesting as possible. We can really use our design skills here. We are going to learn how to create embedded styles in the head portion of the Web page using the style tag. I do not recommend this method, as each individual page must be edited in order to change or update your styles. Using an external style sheet allows you to apply styles to a number of Web pages, but only update the styles in one location, that external style sheet, and then those styles will be applied throughout your website. An external style sheet is linked in the head of a Web page with the link tag. Don't worry, more on this later. Again use external style sheets as a best practice.

A great place to start learning how to use embedded styles is with Page Properties. So let's go down to the bottom to the Property inspector and click on the Page Properties button. This brings up the Page Properties dialog box. There are many categories that you can use, and look at and try, but the two categories that we will be looking at is Appearance CSS and Links CSS. It's important to make sure that you start noticing the distinction between styles and structure. We will be concentrating on styles in this particular exercise.

The first thing I like to do is work on what the general Page font for the whole page will be. This will probably be the body text font. It will be used throughout the Website. Let's click on the dropdown menu. As you can see Dreamweaver ships with many, many preset font examples and you can also see they usually have three fonts. For instant Verdana, Geneva, Sans-serif. The way the Web works is that when a browser sees the style, it looks to see if the user has the font Verdana. If the user doesn't have that font in their operating system or on their desktop or in their fonts folder, it then looks to see if Geneva is available. If Geneva is not available it then looks for any Sans-serif fonts and if none of the above are available it will display whatever Sans-serif font the user has.

This makes designing for Web pages for a certain target user very difficult. You have no guarantee that they will have the exact font that you request. So it's important to use fonts that are adopted by both platforms windows in Macintosh and to always use the strings of choices if you can't find Georgia, then do Times New Roman, then do Times, then do serif. There are a number of fonts recently that have been developed just for the Web and for screens. Verdana is one of them. Trebuchet is another one that looks really great. Arial, Helvetica are old standbys, but again there are some problems with Arial and Helvetica. There are many, many different publishers and many manufactures of these fonts, so they may display differently from machine to machine, from user to user. Even from screen to screen and from operating system to operating system.

So be aware when you select a font. Just choose something that most people have. This brings up the question what if I want to use an unusual font. It will probably have to be an image. So just keep that in mind when you are thinking about how to style your sheets and whether to use an image or whether to use a font. Of course pages will download much faster if you use a basic body text font. You don't want to use all images for you body text. For this I'm going to choose Verdana, I know that Verdana was designed for the screen and it looks really, really good. To see how this will look, I can click on the Apply button. This is nice feature inside of this dialog box that let's you make a choice and then see how it might look.

Already the page is looking better. On screen it is much easier to read a font that is Sans-serif. Fonts that are serifs like Time New Roman or curly script fonts or unusual Gothic fonts are very difficult to read because of the boxy nature or the pixelated nature of the screen. So for main, main body text, things like that I try to stick to Sans-serif font. The next thing to consider is the Size of the font. But right now let's choose something we are all familiar with, 12 pixels, which essentially translates to 12 points. If you are in graphic design this will be familiar to you. We will talk about other ways we can choose our font size as we start creating more styles. So I'm going to choose 12, this will be 12 pixels high which means it will be an exact measurement.

Another tip that I would like to give you is although many, many people just keep the font at black, a nice little trick with choosing the color of your font is not to choose black, which is considered to be the default, but to choose the dark gray. It will set you page back a little bit, make it seem as though it's more well designed, be more inviting and not such a harsh contrast on the eye as the person reads the font against the light background. So let's click on this box and with our color picker let's go down the dark gray. Now remember in Preferences we choose to see our styles using the shorthand method. So that's why we are not seeing six numbers or six letters.

Typically a hexadecimal color will have six numbers and six letters or combination of that because this color in it's hexadecimal form is 333333 or six 3s.We can shorten this by simply going # mark 333. It's exactly the same color. If you see this color as 333 or as six 3s, it's the same color. Let's click the Apply button, looks really good. It sets back, beginning to look like it has something to do with the header color palette. It really feels more inviting, more friendly, easier to read.

Then I like to go into the Background color. I'm going to move my dialog box to do this. One of my tricks that I like to use all the time is if I have a header, a nice trick with the Background color is to actually use the header color to help you define what your color palette will be. I'm going to click on the box. This gives me my hexadecimal palette, which is about 256 colors. I can also choose to have no color. Where I can go out to my color will, but a trick that I like to use is go ahead and leave this box and notice that your cursor instantly turns into the eyedropper which is a great little thing. So we are going to go out to our header and look for some colors that might look good.

I am going to try this color right here and then click Apply. That's a little cool, for me. It looks very business like sort of Fortune 500. I like something a little warmer or something a little more lively. So I'll click on my Background color again, go out with my eyedropper, try to find something that's a little bit lighter, in the green or pale green category and then click Apply. That's looking pretty good. I can even go out for some crazy color. Try some contrast. May be this pink, peach color. Click Apply.

As you can see I'm really having some time really looking at how that looks, how it feels and each color that I change really changes the emotional quality of this page. I would like to keep the background light enough so that the dark gray pops forward and looks good. I think this is too much contrast and too much like those are the clowns. I'm going to go for something little bit more subtle. Click on my Background color. Go back up in here one more time, look for that pale gray and it took us maybe 30- 45 minutes when I was working on this project, I finally found a color I like. I'm going to type that in right now.

If you have a palette color that you like or hexadecimal color that you like, remember you must use the # mark. As I said before the # mark is JavaScript way of saying by the name up. So when we are saying, what color are we using, it's this # mark, it's the color by this name. So let me select right here and type in mine. It will be #e8edbb and then Tab to the next box. I'm going to hit the Apply button. That looks much more inviting and friendly and fun at the some time, kind of lyrical.

The last thing that we will change are the Margins. Each browser has it's own set of style sheets. Those style sheets actually make your page move away from the Top edge and from the Left edge by default. I want to be able to override the browsers style sheet so I'm going to do what we call zero out. I'm going to put a 0 in the Left, Top, Right and Bottom. It won't look good, but later on as we are doing more styles we will change it and this will allow us to override what's going on in the browser window. So I'm going to put 0 and then Tab through these. 0, Tab, 0, Tab, 0. Let's click on the Apply button. There we go. Now we are bossing that page around.

We have got the header snug up at the top of the window and we have all of our text on the left. Yes this is tight, no we don't have any negative and positive space but as I said as we continue to work with our styles we will address this issue. Let's go ahead and click OK. So where did these styles go, where can we find them, how can we change them? What I want you to see is up in your upper right hand corner in the CSS Styles panel, you now see the word or tag style. If we twiddle down the triangle here, you can see that we actually made two styles. One for the body, table data, and table header. Let's click on that. Those styles will appear right down here in our CSS Style panel.

If I click on body you can see those styles that we added. But where did they actually go in code because I said these are embedded. Let's click on the Code view. The styles will appear in the head portion or the head tag. So let's find the beginning and end of our head tag. And one of the things I like to do so I can see this just a little bit easier is I put my I-beam right after my closing style tag and then hit my Return key. Now let's just find our opening style tag and our closing style tag. There we go. This is called an embedded style.

As you can see we are using the style tag in the head tag to make this work. As we have talked about before the head tag or the head information really bosses this page around. It tells the browser how to display and in this case what styles to apply. For just a minute, let's take a look at what the styles actually do. We have attached or affected these tags, the body tags, the table data tags and a table header. Within these two curly-Q parenthesis we have descriptors or attributes that we can change.

In this case the descriptor or attributes we are changing with the font family, the font size and the color of the font. When you see the word just color, it refers to the background color. In the second tag we are affecting just the body tag so that's why it appears alone and not up with the other one. Another thing to notice here is we can group our tags or we can simply have one tag that has it's own specific attributes. The way this works is that we have our attribute and then it's actual value.

Our attribute, a colon and then its actual value. In code we don't end sentences with period because periods are used for other things. So you often see a semicolon as a way of ending a line of instruction or ending a thought or ending a command. So if you see the semicolon think of it is being a period in a code line. So our attribute, colon, the value of that attribute, in this case margin-right:0 pixels end of thought, end of instruction. That's where our styles appear. Let's go back to Design view and let's do a Command or Ctrl+Save.

So this was a great place to start learning about styles and we have seen how embedding the styles puts those styles up into the head of our document.

Show transcript

This video is part of

Image for Creating a CSS Style Guide: Hands-On Training
Creating a CSS Style Guide: Hands-On Training

35 video lessons · 27988 viewers

Laurie Burruss
Author

 
Expand all | Collapse all
  1. 6m 58s
    1. Welcome
      1m 9s
    2. Objective of this course
      3m 38s
    3. Using the exercise files
      2m 11s
  2. 28m 26s
    1. Starting Dreamweaver for the first time
      3m 38s
    2. Defining a website
      4m 3s
    3. Understanding the Dreamweaver interface
      9m 43s
    4. Setting up a custom workspace
      4m 10s
    5. Setting essential preferences
      6m 52s
  3. 56m 54s
    1. Laying out a page in a text document
      3m 40s
    2. Creating and saving a new document
      3m 27s
    3. Inserting an image
      8m 22s
    4. Marking up text using the Property Inspector
      6m 48s
    5. Marking up text by hand
      9m 21s
    6. Inserting, formatting, and selecting a table
      8m 16s
    7. Creating links
      12m 26s
    8. Styling a footer
      4m 34s
  4. 22m 15s
    1. Using Modify Page Properties to create embedded styles
      12m 22s
    2. Creating links with CSS
      4m 55s
    3. Working with Code, Split, and Design views
      4m 58s
  5. 8m 52s
    1. Defining browsers to test a web page
      2m 24s
    2. Previewing a web page in a browser
      6m 28s
  6. 16m 44s
    1. Using a span tag to add a class and customize appearance
      10m 34s
    2. Using the Tag Inspector to create and edit additional styles
      6m 10s
  7. 48m 42s
    1. Exporting existing styles into an external style sheet
      7m 0s
    2. Using the CSS Styles panel to add a new style
      5m 43s
    3. Using the div tag to create a content container
      11m 8s
    4. Overriding the default browser styles
      2m 46s
    5. Applying padding and margins
      4m 57s
    6. Styling header tags
      5m 34s
    7. Creating and styling compound tags
      5m 12s
    8. Editing preexisting rules
      6m 22s
  8. 19m 36s
    1. Improving the Footer
      5m 12s
    2. Commenting a CSS style sheet
      7m 0s
    3. Creating a custom color palette
      7m 24s
  9. 3m 6s
    1. Style sheet final review
      3m 6s

Start learning today

Get unlimited access to all courses for just $25/month.

Become a member
Sometimes @lynda teaches me how to use a program and sometimes Lynda.com changes my life forever. @JosefShutter
@lynda lynda.com is an absolute life saver when it comes to learning todays software. Definitely recommend it! #higherlearning @Michael_Caraway
@lynda The best thing online! Your database of courses is great! To the mark and very helpful. Thanks! @ru22more
Got to create something yesterday I never thought I could do. #thanks @lynda @Ngventurella
I really do love @lynda as a learning platform. Never stop learning and developing, it’s probably our greatest gift as a species! @soundslikedavid
@lynda just subscribed to lynda.com all I can say its brilliant join now trust me @ButchSamurai
@lynda is an awesome resource. The membership is priceless if you take advantage of it. @diabetic_techie
One of the best decision I made this year. Buy a 1yr subscription to @lynda @cybercaptive
guys lynda.com (@lynda) is the best. So far I’ve learned Java, principles of OO programming, and now learning about MS project @lucasmitchell
Signed back up to @lynda dot com. I’ve missed it!! Proper geeking out right now! #timetolearn #geek @JayGodbold

Are you sure you want to delete this note?

No

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.