This page is about using CSS for creating page layouts as well as manipulating text. All the style sheets will be built within the page to ensure that they stay with the document. However, you can also keep these styles in a linked external sheet.

Start:

We need to make one basic decision, do I want to build the layout without any final content to play with, or do you want to build it around existing content. There's only a bit of a difference between the two approaches. I've listed them below:

  1. You will spend more time playing in conceptual arenas without content.
  2. You may find that some things need tweaking after content is added.

I'm going to build the initial part of this page without content. I'll add it in after I've built a basic structure.

The Basic Structure:

Lets start by conceptualizing our document. I'll assume that I'm building it for a maximum width of 760 pixels. That will fit just about any monitor these days. Ideally I'd sketch this out so that I can have a visual reference of how I want my layout to look as well as notations to size.

  1. Go to Window | CSS Styles
  2. click on the new style icon
  3. select Advanced, name the style #container, select "this document only" and click "OK"
  4. enter the following values for the different categories:
    1. Type - Font: Arial, Helvetica, sans-serif, Size: 1 ems
    2. Box - Width: 760 pixesl
    3. click "OK"

You have just created your first layout style. Its a container or box that applies some text formatting as well as a width.

To apply this style, simply add some text to your page. You'll notice that this style does not appear in the style pull down menu on the properties panel. We've designated this as a div ID, not class by using the # ... so now it can only be applied as a id and we can do this through the code view .

  1. Add some text to your page
  2. click on the "Split" layout view.
  3. highlight your text, notice it is now highlighted in code view. At the begining of the first tag that starts your text, add: <div id="container"> and at the end of your text, after the closing tag add: </div>
  4. The result is below:

Here's the text that I formatted. Here's the text that I formatted. Here's the text that I formatted. Here's the text that I formatted. Here's the text that I formatted. Here's the text that I formatted. Here's the text that I formatted.

Now lets look at doing a little more formatting. Lets break this into a column spread, where we can have text in the left column for items like a sidebar, and text in the right column for the main body. Since my width is 760 pixels, I'll give myself a 5 column spread, with 10 pixel gutters between each column. There will be 4 gutters, so my 760 is now 720 (760-40). I'll divide 720 by 5 to get 144 pixels per column. I'll set the text below first into two sections, one for bodycopy, one for the sidebar.

Sidebar: Here's the text that I formatted. Here's the text that I formatted.

Main body: Here's the text that I formatted. Here's the text that I formatted. Here's the text that I formatted. Here's the text that I formatted. Here's the text that I formatted. Here's the text that I formatted. Here's the text that I formatted. Here's the text that I formatted. Here's the text that I formatted. Here's the text that I formatted. Here's the text that I formatted. Here's the text that I formatted. Here's the text that I formatted. Here's the text that I formatted. Here's the text that I formatted.

Now lets create a second style, called sidebar.

  1. Click in the CSS palette to add a new style
  2. Select Advanced
  3. Name it #sidebar
  4. give it the following characteristics:
  5. select the sidebar copy and add the folowing at the beginning <div id="sidebar"> and </div> at the end of the tags surround it in code view.

Main body: Here's the text that I formatted. Here's the text that I formatted. Here's the text that I formatted. Here's the text that I formatted. Here's the text that I formatted. Here's the text that I formatted. Here's the text that I formatted. Here's the text that I formatted. Here's the text that I formatted. Here's the text that I formatted. Here's the text that I formatted. Here's the text that I formatted. Here's the text that I formatted. Here's the text that I formatted. Here's the text that I formatted.

Notice how now the sidebar is in its own field, with the color background, shifted to the left. Also notice how the bodycopy is snug up against the sidebar. Well, now we want to create a style for that! We need a style that will give some padding and allow the bodycopy to sit snug against the top of the container tag.

Lets create the following tag:

  1. select new style from the CSS palette
  2. select Advanced
  3. name it #bodycopy
  4. Set the following characteristics:

Main body: Here's the text that I formatted. Here's the text that I formatted. Here's the text that I formatted. Here's the text that I formatted. Here's the text that I formatted. Here's the text that I formatted. Here's the text that I formatted. Here's the text that I formatted. Here's the text that I formatted. Here's the text that I formatted. Here's the text that I formatted. Here's the text that I formatted. Here's the text that I formatted. Here's the text that I formatted. Here's the text that I formatted.

Or you could try this:

  1. select new style from the CSS palette
  2. select Advanced
  3. name it #bodycopy 2
  4. Set the following characteristics:
  5. Click in the CSS palette to add a new style
  6. Select Advanced
  7. Name it #sidebar2
  8. give it the following characteristics:
  9. If I changed margin right and bottom to padding right and bottom of 10 pixels you'd see the sidebar's pink field spread to the edge of the bodycopy, but keep the clear space inside the sidebar.
  10. Or you could change the width to 134, add a margin right and bottom of 10 pixels and the padding right of 10 pixels. This would still give you the 144 total width plus 10 pixel gutter, but would change the way in which the text and the pink interact.

Sidebar: Here's the text that I formatted. Here's the text that I formatted.

Main body: Here's the text that I formatted. Here's the text that I formatted. Here's the text that I formatted. Here's the text that I formatted. Here's the text that I formatted. Here's the text that I formatted. Here's the text that I formatted. Here's the text that I formatted. Here's the text that I formatted. Here's the text that I formatted. Here's the text that I formatted. Here's the text that I formatted. Here's the text that I formatted. Here's the text that I formatted. Here's the text that I formatted.

Keep in mind, we're using that sidebar for text, but you could just as easily wrap that tag around a picture.

Now lets look at some formatting of the actual text.

We're going to look at the standard H1-6 tags. These are good to modify as they are pretty basic, and will help to make sure you're working in a good hierarchy.

Lets create two headings. One for the bodycopy, one for the sidebar.

  1. click on the new style in the CSS style palette
  2. click on Tag, and select/find the H1 tag
  3. click on OK
  4. Enter the following:
  5. click OK
  6. click on the new style in the CSS style palette
  7. click on the Tag and select/find the H2 tag
  8. click on OK
  9. enter the following:

Now apply the H2 to the title for the sidebar and the H1 to the title of the bodycopy

Sidebar:

Here's the text that I formatted. Here's the text that I formatted.

Main body:

Here's the text that I formatted. Here's the text that I formatted. Here's the text that I formatted. Here's the text that I formatted. Here's the text that I formatted. Here's the text that I formatted. Here's the text that I formatted. Here's the text that I formatted. Here's the text that I formatted. Here's the text that I formatted. Here's the text that I formatted. Here's the text that I formatted. Here's the text that I formatted. Here's the text that I formatted. Here's the text that I formatted.

Lets add a bit more finese to the bodycopy. Lets add a drop cap!

This time, instead of an "Id" we'll make a class.

  1. click on the new style icon in the CSS palette
  2. select class
  3. name it .dropcap
  4. click OK
  5. enter the following:
  6. Type: size = 4ems
  7. Type: line height = .75ems
  8. Box: float = left
  9. Box: padding top = 2px

To apply this class, simply highlight the first letter of the first paragraph in the bodycopy and select "dropcap" from the style pulldown menu in the properties panel. Notice that I also made the rest of that word uppercase. This is a traditional approach to make the characters larger for the rest of or the next word (if the dropcap is one letter only) - it helps the transition.

Sidebar:

Here's the text that I formatted. Here's the text that I formatted.

Main body:

HERE'S the text that I formatted. Here's the text that I formatted. Here's the text that I formatted. Here's the text that I formatted. Here's the text that I formatted. Here's the text that I formatted. Here's the text that I formatted. Here's the text that I formatted. Here's the text that I formatted. Here's the text that I formatted. Here's the text that I formatted. Here's the text that I formatted. Here's the text that I formatted. Here's the text that I formatted. Here's the text that I formatted.

As a side note, when applying these styles directly into the page, some, such as the H1s can be done through the page properties. In this document, look under Page Properties | Headings.

Now lets build a menu with CSS. To start with I'll create the following text in the existing layout. As I'm adding it in after the fact, and I want it to go at the top, I'm going to add this in code view. I've made each of these a unordered or bulleted list item. After adding it, I'll select each text and make it a link as I normally would.

Sidebar:

Here's the text that I formatted. Here's the text that I formatted.

Main body:

HERE'S the text that I formatted. Here's the text that I formatted. Here's the text that I formatted. Here's the text that I formatted. Here's the text that I formatted. Here's the text that I formatted. Here's the text that I formatted. Here's the text that I formatted. Here's the text that I formatted. Here's the text that I formatted. Here's the text that I formatted. Here's the text that I formatted. Here's the text that I formatted. Here's the text that I formatted. Here's the text that I formatted.

Now lets build the styles to format it!

  1. Click to add a new CSS style in the CSS palette
  2. select advanced
  3. enter #navigation for the name
  4. set the following characteristics:
  5. click OK
  6. add nested style adding another new style
  7. select advanced
  8. enter #navigation ul (looks at unordered lists) for the name
  9. set the following characteristics:
  10. Click OK
  11. add another nested style
  12. select advanced
  13. enter a #navigation ul li for the name
  14. set the following characteristics:
  15. click OK
  16. create another nested style
  17. enter #navigation ul li a
  18. set the following characteristics
  19. create another nested style
  20. enter #navigation ul li a:hover
  21. set the following characteristics:
  22. create one final nested style
  23. select advanced
  24. enter #navigation ul li a:link, #navigation ul li a:visited (you can combine these with the use of the comma so that the same formatting can be applied to each) for the name
  25. set the following characterisitcs

Now to apply all these styles,, we just need to add the <div id="navigation"> and </div> around the text that represents our links. The result is below.

Sidebar:

Here's the text that I formatted. Here's the text that I formatted.

Main body:

HERE'S the text that I formatted. Here's the text that I formatted. Here's the text that I formatted. Here's the text that I formatted. Here's the text that I formatted. Here's the text that I formatted. Here's the text that I formatted. Here's the text that I formatted. Here's the text that I formatted. Here's the text that I formatted. Here's the text that I formatted. Here's the text that I formatted. Here's the text that I formatted. Here's the text that I formatted. Here's the text that I formatted.

So, there are the basics of creating a layout using CSS. There's lots more that you can do, but this will give you a good start into playing. I'd recommend chedking out the resources that are provided in the course readings/resources link. Also, there are a variety of basic CSS layout templates available in Dreamweaver that can be reviewed and modified! CSS Zen Garden (csszengarden.com) will provide you a variety of great examples of the creativity that can be achieved with CSS!