<div> and <span> Elements
This topic discusses the methods of adding style to your HTML documents. As with many of the topics that we're covering in this class, there is a lot to learn about CSS, and it can take a long time to learn it well. I don't expect everyone to become CSS experts overnight. We could spend the entire semester learning only CSS, and we would still run out of time to learn everything about CSS. Even so, learning CSS is an essential part of being a web developer, at least if you want your web content to look attractive. Web documents without CSS tend to look boring. But there's another reason we're going to learn CSS: CSS impacts accessibility. CSS is powerful enough to make a document more accessible. It's also powerful enough to ruin a document's accessibility. We'll talk about ways to use CSS wisely.
Before we go too far, I want to introduce you to a tool that will make your life as a web developer much easier. It's the Web Developer Toolbar developed by Chris Pederick. This is an extension available for the Firefox web browser (it won't work in Internet Explorer). Some of you may already have it installed. If so, skip to the next section.
To install the Web Developer Toolbar:
Click on "install now" in that window.Note: You can install other extensions for the Firefox browser through this same web site, or by going to the Firefox menu and selecting Tools > Extensions, then clicking on "Get more extensions."
After restarting Firefox, the toolbar should appear. This is a powerful tool. I won't get into all the details in this topic, but one of the features that is useful to this topic is the ability to quickly turn off styles. You can do this with the keyboard shortcut Shift+Ctrl+S, or by going to CSS > Disable Styles > All Styles.
Go to the CSS Zen Garden site at http://www.csszengarden.com/. This site was created as a showcase for the power of CSS as a design tool. The idea behind the site is simple: create one HTML page and allow other people to create styles for it. The home page of the CSS Zen Garden looks like this:
When you turn off the CSS styles, you'll see the underlying HTML structure in the document. To turn off CSS styles using the Web Developer Toolbar in Firefox, use the keyboard shortcut Shift+Ctrl+S or use the menu system: CSS > Disable Styles > All Styles, as mentioned previously. You can also use the Opera browser (www.opera.com), which allows you to turn off styles quickly by clicking on the "User Mode" icon. Or you can use the link provided in the text on the web page itself. The paragraph right below the CSS Zen Garden site title, on the left of the screen near the lily pad, contains a link to view the sample HTML file. Without styles, the page looks like this:
You can toggle between the plain HTML and the styles view to see the dramatic effect that the styles have on this otherwise boring web page.
Many designers and artists have created their own graphics and styles for this web page. You can view their efforts by clicking on the links under the heading which says "Select a design." Here are a few of the many designs:
Believe it or not, all of these designs contain the exact same HTML. The styles have changed, but the HTML hasn't changed at all. If you don't believe me, look for the link that says "Download the sample HTML file and CSS file" and click on the HTML file. It may take you a moment to find that link, because it's likely in an entirely different place this time, due to the different styles that have been applied. If you compare the HTML file here to the one on the previous page you'll find that it's exactly the same.
Keep going through the list of designs. Explore this site. Find designs you really like. Find designs you don't like. There is a wide enough variety here to keep you busy for hours.
Of course, in order to create sites of this caliber, you have to know a thing or two about graphic design. These people are artists. They're professionals. They know what they're doing, and they're showing off. If you have the artistic skills to do this, great! If you don't, that's ok too. At the very least I want you to get a feel for the potential of CSS.
You can view the CSS (or in other words, the style definitions) of any site on the web. An easy way to do this is with the Web Developers Toolbar. Go to CSS > View CSS or CSS > Edit CSS. Both of these methods will show you the styles for that particular page.
Note: The "Edit CSS" option has the additional advantage of allowing you to edit the styles and see how your edits affect the design. In case your curious: you are the only one who can see your edits. When you play around with the styles, it does not affect the real web site. When you refresh the page, all of your edits disappear.
If you've never seen styles before, you're likely to be a bit confused when you look at them. It looks like strange computer code, because that's what it is, but you'll understand it a little better by the time that we're done. I'll give you a quick example that will hopefully help demystify things a little bit. Here is an example of a simple style:
body {
background-color: white;
color: black;
margin: 0;
}
The above style says that the background color for the body of the HTML will be white, the text color will be black, and there will be no margins around the edge of the page, meaning that the text will go all the way to the edge of the screen in the browser. The "curly brackets" { } are used in CSS in a way that is similar to the "pointy brackets" in HTML. You have an opening curly bracket { and a closing curly bracket }. The word before the opening curly bracket — "body" in this case — indicates where to apply the style: to the <body> tag in this example. If we want the style to apply to something else, we have to change the word before the first curly bracket. In the example below, the same style is applied to the <p> tag, rather than the <body> tag:
p {
background-color: white;
color: black;
margin: 0;
}
This means that every paragraph will have a white background, black text, and no margin. We could change things up a bit, by applying different styles to all of the level 1 headings, like this:
h1 {
background-color: red;
color: white;
margin: 10px;
padding: 10px;
font-size: 200%;
font-weight: bold;
}
The above style will give all level 1 headings a red background, white text, and a margin of 10 pixels. In addition, the text will have a padding of 10 pixels around it, and the font will appear twice as large as normal text, and it will be bold. It will look like this:
Here is an example with the styles applied.
Note: In case you didn't know, pixels are "The basic unit of the composition of an image on a television screen, computer monitor, or similar display" (American Heritage Dictionary, 4th edition). There are other units of measurement for use in CSS too, such as inches, centimeters, percentage, and even units you probably haven't heard of before, such as em. Pixels is usually NOT the preferred unit of measurement. Usually em and % are preferred. I'll discuss this in more detail later.
Now you've seen some style definitions, and you've seen how they can look in a browser. Of course we've only scratched the surface. Styles can do a lot more than these few things. We'll get into those details as we go along. First, though, it's helpful to know how styles work.
Styles are just bits of typed text saved as a file with a .css extension at the end (e.g. styles.css). You can create styles by opening up a simple text editor, such as Notepad, and typing the styles directly into the text editor. You can also use the WYSIWYG (What You See Is What You Get) tools in Dreamweaver or other tools to create styles.
There are three main ways to include styles in your documents:
<head> of an HTML document<body> of the HTML file (for example, in <p> or <h1> or <ul>, etc.) External style sheets are defined separately from the HTML code, in a separate file. The browser takes the HTML and the CSS, combines them, interprets them, then shows us the final result. For example, if you have three web pages, all three of these pages can refer to the same external style sheet.
The great advantage to this type of arrangement is that you don't have to re-type all of your styles if you want the same styles to appear on multiple pages. All you have to do is create a link in your HTML document to your style sheet.
There is more than one way to link to external style sheets, but in general these ways fit under two categories:
A link to a style sheet using a <link> element would look something like this:
<link type="text/css" rel="stylesheet" href="styles.css" />
This line of code would be placed somewhere between the opening and closing <head> elements. It does not matter if you type it before or after the <title> element.
The @import methods, using the <style> element, would also be placed between the opening and closing <head> elements, and would look something like this:
<style type="text/css">
<!--
@import url(styles.css);
-->
</style>
Note: The opening and closing comment tags <!-- --> are optional, but they help to make the document more compatible with older browsers which cannot interpret styles at all. Older browsers will ignore the opening and closing <style> tags, but would not ignore the content between them, so we comment it out. Modern browsers can interpret the styles whether the comment tags are present or not.
There is more than one @import method to import style sheets. Both of the following examples will also import the styles into the HTML document, despite their minor syntax differences from the first example above.
@import with parentheses and quotation marks:
<style type="text/css">
<!--
@import url("styles.css");
-->
</style>
@import without parentheses, but with quotation marks:
<style type="text/css">
<!--
@import "styles.css";
-->
</style>
All of the methods mentioned above are acceptable, but browser compatibility is a concern. Modern browsers are able to read all of the above methods, but older browsers cannot. In the case of Netscape 4, for example, the browser understands the <link> method, but does not understand the @import methods. If you want styles to show up in Netscape 4, you have to use the <link> method. However, the problem with Netscape 4 is that it supports only a few style properties. Sometimes this can lead to pages that look horrible in Netscape 4 because only some of your styles are displaying properly while others are being completely ignored, as shown in the partial screen shot below.
In these cases, it would be better if all of the styles failed, because you would at least be able to see the plain HTML version of the page, even if it's not as snazzy as the styled version. One way to ensure that all of the styles fail is to use one of the @import methods of linking to the style sheet. The end result will be a web page that "looks right" in all of the modern browsers, and a page that is at least still readable in older browsers such as Netscape 4, even though it looks plain and boring.
In general, I recommend using the @import methods because it's usually too much of a bother—or else completely impossible—to make styles work properly in Netscape 4.x and other older browsers. Which @import method is best? It doesn't really matter, though I tend to prefer the one with parentheses but no quotation marks.
<head> of an HTML documentSometimes you have styles that you want to apply to only one page. In these cases it makes sense to write the styles in the <head> of that document, rather than write them in an external style sheet, to avoid bogging down the external style sheet with too much clutter that doesn't apply to the majority of the pages. To create styles in the document <head>, just type the styles in between the opening and closing <style> elements, like this:
<style type="text/css">
<!--
body {
background-color: blue;
color: white;
}
p {
margin: 2em;
}
-->
</style>
Question: Can you link to an external style sheet and create page-specific styles in the document <head>?
Answer: Yes. In fact, this is a very common scenario. You usually define most of your styles in the external style sheet, then define page-specific styles in the document <head>. The style complete declaration would look like this:
<style type="text/css">
<!--
@import url(styles.css);
body {
background-color: blue;
color: white;
}
p {
margin: 2em;
}
-->
</style>
Question: What if your external style sheet already defines the style that you want to change? For example, what if your external style sheet sets a blue background color for all paragraphs, but on one of your pages you want to define a page-specific style so that all the paragraphs have a white background?
Answer: Your page-specific styles would override your external style sheet, as long as the page-specific styles are defined after the link to the external style sheet, as in the example shown above. The last definition of a style takes precedence over all other definitions.
The last method for creating styles involves defining the style in the tags in the <body> of the document. Inline styles override all previous style declarations in both the external style sheet and the document <head>. Here is an example:
<p style="background-color: red; color: white;">Here is a paragraph.</p>
This method is easy to understand, because you're applying the style directly to the item that you want styled. However, you should almost always avoid this method. It's "legal," but it usually creates sloppy code that's hard to manage, especially in large sites. I'm explaining it here for the sake of completeness. Why is it hard to manage inline styles? Well, imagine that you create a style for one paragraph, then later on you realize that you want the same style on another paragraph. Then another. And another. You would have to rewrite the style four times. Now imagine that you changed your mind and wanted to change the background color and font color of that style. You would have to change it in four places instead of one. It's better to type the style only once, then reference it in the appropriate locations.
They call them cascading style sheets because you can have multiple layers of styles, with the last styles overriding the first styles. It is somewhat like a multi-level ("cascading") waterfall or a series of steps, hence the word "cascading."
The last style declaration wins. In other words, if you declare a style in your external style sheet (such as setting the background color of all paragraphs to blue), then re-declare the style in the document <head> (setting the background color to green), then again in the inline tags (setting the background color to purple), the paragraphs will be purple. However, users can override all of these with a custom style sheets of their own.
No matter how many times you declare a style, the user can undo your style. The user is the king (or queen) of the world as far as styles are concerned. Users can create their own style sheets with their own preferences. Some users with low vision, for example, require all web pages to appear in high contrast colors and enlarged font. They might set the background color to black, the font size to 250%, and the font color to a light yellow. This is a relatively common combination of styles for people with very low vision.
You've already seen how to apply styles to HTML tags, such as paragraphs ( <p> ) , headings ( <h1> ) , or the body of the page ( <body> ) . When you create styles for HTML tags, you don't have to change the HTML code at all. However, there are times when you need to be more specific, such as when you want to create styles for just one paragraph, or just one heading, or for other situations. In these cases, you will need to employ other techniques.
The three main methods for applying styles are as follows:
id (this method applies the style to only one item on the page, because each id must be unique, and only one item per page can have that id)class (this method can be used to apply the same style to an unlimited number of items on the page, by assigning the same class to the items that you want to receive the style) The concepts of id and class are probably new to you. I'll explain those shortly.
I've already given examples of this technique. Here is an example of a style that will apply to all links (e.g. all instances of the <a> tag):
a {
background-color: blue;
color: white;
text-decoration: underline;
}
To use this technique, just write the name of the tag, then type the style attributes inside of the curly brackets. Remember to put semi-colons at the end of each style declaration.
id AttributeID attributes can be assigned to any tag. The example below shows a <p> tag and an <a> tag with id attributes:
<p id="first_paragraph">Here is my paragraph. It has a link to <a href="http://www.gmu.edu" id="gmu">George Mason University.</a></p>
The name of the id is completely up to you. It doesn't matter what you call the id. You could call it "horseradish" or "red_balloon_number_5" if you like. Usually it makes sense to choose names that make sense in the context of the page, though. When naming id attributes, you should observe these rules:
In your style sheet, you can create a style for a tag with an id by using the pound sign ( # ) and the name of the id, like this:
#first_paragraph {
background-color: white;
color: black;
}
#gmu {
background-color: green;
color: yellow;
}
I will re-emphasize that you can have only one id per page with any given name. You can only have one tag with the id of "first_paragraph" and only one tag with the id of "gmu".
Question: If you can only have one item with any given id per page, is the id method very useful at all?
Answer: Actually, yes, it is very useful. Most styles on most web sites can be applied either directly to tags or to items with specific id attributes. This is because you can set the global styles (e.g. for all paragraphs) using styles applied to tags and as far as the rest of the items are concerned, most designs have only one of each item. For example, there is usually only one main menu in a web site design (often a list of links across the top of the page). There is usually only one site logo (often in the upper left hand corner). There is usually only one main content area, one footer (with links to copyright info or contact info), and perhaps one side menu. Given the fact that there is only one of each, it makes sense to use the id technique in these cases.
class AttributeIf you need to apply the same style in multiple places throughout a web page, it makes sense to use the class attribute. Here are two paragraphs with a class attribute:
<p class="highlight">This paragraph has a highlight background color.</p> <p class="highlight">This paragraph also has a highlight background color.</p> <p>This paragraph does NOT have a highlight background color.</p>
The CSS file uses a period ( . ) to reference items with class attributes, as shown below:
.highlight {
background-color: yellow;
}
Question: But what if you want to apply the "highlight" class to only part of a paragraph? How do you do that?
Answer: You would use a generic tag called a <span> element (explained in more detail in the next section), and apply the class to that element, as follows:
<p>This is a paragraph with <span class="highlight">a highlighted phrase</span> inside it.</p>
Notice that there is an opening <span> element and a closing </span> element. The "highlight" class will be applied to the text in between the opening and closing tags.
<div> and <span>There are a couple of generic HTML tags called <div> and <span> which have no real semantic meaning. They're not paragraphs or headings or list items or table cells or links, or any other meaningful tag like the ones we've talked about up until now. The <div> and <span> tags don't mean anything from a semantic or grammatical point of view. Their primary purpose is to allow web developers to apply styles to areas within the web page that are not easily defined by other kinds of tags.
Note: By the way, if you're wondering what "semantic" means, here's one definition: "Of or relating to meaning, especially meaning in language" (from the American Heritage Dictionary). Headings, paragraphs, list items and all those other things provide meaning to text. The <div> and <span> elements do not.
Sometimes you want to apply a style to the semantic elements (headings, paragraphs, etc), but sometimes it makes more sense to apply styles to a chunk of text that doesn't really fit into a semantic unit. Maybe you want to apply a style to four paragraphs, or to three words. In these cases it sometimes makes sense to use a unit that can successfully group the items, but which doesn't apply any semantic meaning. In the example screenshot below, a border was applied around two paragraphs, but not around the others. The border groups the paragraphs visually.
The HTML code looks like this (with the paragraph text shortened):
<p>Paragraph here, etc., etc.</p> <div id="border_here"> <p>Paragraph here, etc. etc.</p> <p>Paragraph here, etc. etc.</p> </div> <p>Paragraph here, etc. etc.</p>
The CSS code looks like this:
#border_here {
border: red solid 5px;
padding: 1em;
}
To give another example, you might want to create a visual column of text. A column doesn't really have semantic meaning. Columns are just ways of formatting the text. If you have a two-column article and convert it to one column, you haven't lost any meaning. You've only lost the visual formatting. You can create column-like effects by grouping the text using <div> tags and then applying the appropriate styles.
At this point it would be good to revisit the idea of block level content versus inline content.
<div><span> The <div> tag is a block level tag. That means that anything within the <div> tag takes up a rectangular "block" of visual space. Without any extra styles, this block of space extends all the way across the browser window. For the sake of illustration, I've created a <div> tag below and applied a background color of purple so that you can see what it looks like.
<div> tag.Using styles, I can make this block of text as wide or high as I like. I can change the color, add a border, and do all kinds of fancy things with it. But the main point for now is that a <div> is a rectangle that starts on a new line, meaning that you can't insert a <div> in the middle of a paragraph or any other semantic block level tag.
The <span> tag, on the other hand, is an inline tag. Inline tags can be added in the middle of block level tags. They can even be added in the middle of other inline tags. They don't start on a new line. They don't change the flow of the text. Other inline tags include links, <strong> and <em>.
In this paragraph, I've created a span around these words. Like the <div> example above, the <span> is styled to give the text a purple background. the difference is that the <span> is within the paragraph, and does not cause the text to start on a new line.
Reminder: Neither the <div> nor the <span> which I created give the text any additional meaning. They only change the color of the background. The <div> and <span> elements can be useful under some circumstances to enhance visual appeal. They're not good for conveying extra meaning. A blind person using a screen reader will not know that the background color has changed. In fact, screen readers ignore styles almost completely. (There are a few exceptions to this, but a discussion of those exceptions would take us beyond the scope of this lesson.) If you use styles or colors to try to convey meaning (for example, by saying "all the green words are important"), you are probably going to make the content inaccessible to a person using a screen reader, since they can't see the styles.
Question: Which methods can you use to apply styles to <div> and <span> elements?
Answer: You can use any of the methods already discussed. You can apply a style to all <div> or <span> tags, or you can apply a style to only one <div> or <span> tag using the id attribute, or you can apply a style to multiple tags, including <div> and <span>, using the class attribute. All methods are ok.
You can apply style declarations to more than one element:
h1, h2, h3, .side_items, #top_paragraph
{
color: red;
}
In the above example, all of the items specified will have red text. Notice that there are commas between all of the items that will receive the style, and that there is no comma at the end of the list. Also notice that all three methods of applying styles are represented in this example, the first three items are tags, the next item references a class, and the next item references an id. It's ok to mix and match them like this.
In a related idea, you can specify more than one class for any given tag:
<p class="highlight style2 style3">Here is the paragraph, with three classes applied.</p>
Notice that the class attributes are separated by spaces, not commas. I don't know why they use commas for one technique and spaces for another, but that's just the way it is. Sorry.
You cannot apply multiple id attributes to anything:
WRONG:
<p id="id1 id2 id3">This is wrong.</p>
But you can apply both a class and an id:
OK:
<p id="id1" class="class1">This is ok.</p>
Or even an id plus multiple class attributes:
OK:
<p id="id1" class="class1 class2 class3">This is ok.</p>
If you apply multiple styles to a tag, remember that the last style declared is the one that has precedence in cases where more than one style reference the same property. For example, if all three of the styles above deal with font color, the font color in class3 will be implemented.
Sometimes you need to be very specific when assigning styles. Here is an example:
#main_content #section1 h1.highlight {
background-color: orange;
}
If you read this style in a sort of backwards way, the style (background-color: orange) will apply to the item with a class of highlight (class="highlight"), which is inside of the heading level 1 ( <h1> ), which is inside of an item with an id of section1 (id="section1"), which is inside of an item with an id of main_content (id="main_content").
Note: Notice that there is no space between the h1 and the .highlight, but there are spaces between the references to id attributes. Why? I don't know. Just because. That's the way CSS works.
Here is another example:
p a img.special {
border: none;
}
This one says that all images with the class of special (class="special") which happen to be inside of links ( <a> ) inside of paragraphs ( <p> ) will have no border.
And here is another example:
.dark_background strong {
color: white;
}
This one says that all <strong> tags which happen to be in items with a class of dark_background (class="dark_background") will have white text.
In the examples I've shown so far, I've typed out the names of colors, such as black, white, green, red, blue, etc. What if you want a non-standard color, such as "puce" or "dark bluish green" or a "really light gray with a hint of purple"? How do you specify those colors? The answer is that you have to use a hexadecimal code for the color, or use the RGB value. There are hexadecimal and RGB codes even for common colors such as black (hexadecimal code: #000000; RGB value: 0 0 0) or white (hexadecimal code: #ffffff; RGB value: 255 255 255), but hexadecimal codes are most useful for less common hues.
Note: RGB codes consist of the values of Red, Green, and Blue, respectively, on a scale of 0 to 255. Hexadecimal codes are just a bunch of strange combinations of numbers and letters invented by mathematicians with nothing better to do. You can quote me on that.
Dreamweaver can help you find the hexadecimal code for pretty much any color that you need, but not the RGB value, so I'm going to stick to hexadecimal codes here. When you create styles in the code view in Dreamweaver, a box of color options pops up to allow you to choose the color you're looking for. The box pops up as soon as you type the colon when defining color, background-color, or other color-related attributes.
You can then use the "eyedropper" tool to select the color you like. As soon as you select the color, the hexadecimal value of that color appears in the text.
If you click on the "color wheel" icon 
, you will be given even more color options to choose from.
When setting the size of things, there are many options in CSS, including inches, centimeters, pixels, ems, and other units. The most commonly-used are em, %, and px (pixels).
An "em" is defined as "the width of a square or nearly square piece of type, used as a unit of measure for matter set in that size of type" (American Heritage Dictionary, 4th edition). The definition of "em" is in some ways even more confusing than the term itself, but I've also heard it explained as "the size of the letter M in a particular font." I'm not sure if the latter definition is entirely accurate, but the key point to remember is that "ems" are relative to the size of the font, whereas units such as pixels or inches or centimeters are not.
| Unit | Brief Explanation | When to Use |
|---|---|---|
| em | Relative to font size | Use em when you want to be able to enlarge or shrink items as you enlarge or shrink the font. |
| % | Relative to the container | Use % when you want items to resize in proportion to the size of the browser window, which means that areas will shrink or grow as you shrink or enlarge your browser window. An item with a width of 50% would be half the width of the browser window. If an item inside the first item also has width set to 50%, the second item will actually be 25% of the total width of the browser window (because it is 50% of the container, which is already at 50%). |
| px | Relative to the size and resolution of the monitor | Don't use px unless you absolutely have to. The trouble with pixel-based measurements is that users may not be able to resize the items in when resizing fonts or their browser window. This can be bad for accessibility. Sometimes it is acceptable use pixels for things like borders, though borders can be set using other units also, such as ems. |
NOTE: I did not finish writing all of the content that I wanted to in some of the sections below, but I'm providing links to resources that explain these concepts. I may fill in these sections later when I get the time.
http://www.w3schools.com/css/css_mediatypes.asp
Note: This is an important section. Don't skip it.
To learn about accessibility issues with style sheets, read the WebAIM CD-ROM Chapter 19: Presentation and Style. All of the parts of this chapter present important information, but at a minimum, you should read:
The other sections are more "advanced" but also useful.
One way to create styles in Dreamweaver is to start a new file (File > New) and choose "CSS" as the file type, then start typing the styles in text mode. Experienced CSS coders usually use this method. But there are other methods available for those who don't like to type things out in plain text.
Another way is to first create the HTML file, then click on the CSS icon in the upper right area of the screen.
This will open up a new side window and will allow you to create styles, link to style sheets, and edit existing styles.
to link to external style sheets.The chainlink icon will cause a popup window to appear.
icon to create new styles.This will cause a popup window to appear.
class, tag, or id (or pseudo-class).class attributes or the pound sign ( # ) for id attributes.<head> of the document. 
Once you specify the type, name, and location of the style, you will see another popup window. From here you can specify styles by selecting your specifications from lists of options.
Some people like this method better than typing all of the styles. Others (like me) find it easier to type them, rather than hunt for all the properties in Dreamweaver's interface. One advantage to using the Dreamweaver interface is that it shows you what the options are for particular types of styles, and helps to give you ideas on how to apply the styles.
icon to edit existing styles.
You can also edit the style properties directly in the side bar if you feel comfortable doing so. This method does not provide you with drop-down lists of options, but is faster for those who are familiar with the capabilities of CSS.
icon to delete styles. The following instructions assume that you have already created your style sheet and you just need to add the styles to the HTML page.
When applying styles to tags such as <p> or <body> or <h1>, etc., you don't have to do anything to the HTML code at all. As long as a style is declared in the CSS document, the style will work.
When applying styles using the id attribute, you have to get into the code view in Dreamweaver. You just go to the tag in the code and type id="whatever" in the proper spot.
When applying styles using the class attribute, you have a choice. You can either go to the code and type class="whatever" in the proper spot, or you can follow the steps below:
If you want to apply a style to a portion of a sentence, or some other portion of a block level tag (e.g. if you want to highlight a phrase in a paragraph):
When you do this, Dreamweaver will automatically create a <span> tag with the appropriate style.
Dreamweaver may be a powerful in many ways, but it is not powerful enough to display all of the styles correctly. When you start experimenting with advanced CSS, you'll notice that Dreamweaver can't handle it all. It would be nice if Dreamweaver could handle it, but it can't. You should preview the page in real browsers (Firefox, Internet Explorer, Safari, Opera, etc.) to see what the page actually looks like.
Dreamweaver allows you to preview pages by clicking on the F12 key. This will open the HTML file in your default browser. You can configure keyboard shortcuts for other browsers by setting your preferences in Edit > Preferences > Preview in Browser.
Avoid the following buttons in Dreamweaver's "Properties Bar", because they will either produce code that is not valid XHTML or add unnecessary items to your style sheet:
text-align instead (e.g. text-align: center;) 
font-size instead (e.g. font-size: 120%;) 
font-family instead (e.g. font-family: Verdana, Arial, Helvetica, sans-serif;) 
color: red; or background-color: red; etc.) 
As you experiment with styles, make sure you avoid these common mistakes:
Your styles won't work unless you create a link in your HTML file to the CSS file as explained in the section about external style sheets.
If you leave off the semi-colon, the styles won't work properly.
Correct:
p {
color:red;
background-color:white;
}
Incorrect:
p {
color:red
background-color:white
}
Note: Technically speaking, if you leave off the semi-colon on the last style declaration, it won't matter, but if you have more than one style declaration, such as color, margin, padding, and background-color, all of them except the last one must have semi-colons at the end. I usually put semi-colons at the end of every line, just in case I need to add to the list of styles later.
If you type "maggenta" (incorrect) instead of "magenta" (correct), or "margen" (incorrect) instead of "margin" (correct), the styles won't work. All misspellings will cause the style to fail. The word "grey" has two spellings: "gray" and "grey." Both are acceptable.
You have to follow the syntax given in the example files. You have to use curly brackets, for example { } not parentheses ( ). You have to remember the colon in-between the style type and the style declaration.
Correct:
background-color: white;
Incorrect (colon missing):
background-color white;
Also incorrect (hypen missing):
background color: white;
Note: you can write the style declaration with or without a space after the colon. The empty space doesn't matter in this case.
Correct:
margin:25em;
Incorrect:
margin: 25 em;