You are here: Home / Computer / Web Site / Dreamweaver 8 / CSS in general

CSS in general

CSS (Cascading Style Sheets) is a language that permits you to change the characteristics of your page.

It is in fact thanks to CSS that you can personalise your page. There is no need to use tables for this anymore.

The new display can be attached directly to your page, or through a link to a folder that has a .css extension

As a reminder, all commands associated with tags, styles, classes or pseudo classes are enclosed inside brackets, and each individual code finishes with a semi-colon.

For instance: h1 {code1; code2; ...;} or

In order to makes things as simple as possible, there is a minimum you have to know.

How to make a box

Before we start, we have to know what we mean by a box.

format of a box

 

 

Structure of a line

One more thing. We have to know the structure of a line, actually the units of length.

pixels in a letter

Fixed sizes

The pixel (Px) is a size that is predetermined.

The problem with using pixels is that the size of the character will never vary. It is fixed.

Variable sizes

These are much more interesting. Indeed, this allows the size of your text to vary with the size of your browser.

- Ems (EM is in HTML):

This will determine the relative size of your text compared to the one of your browser.

1em: nothing changes

1.3em: the size increases

0.8em: the size decreases

- Percentage (%)

Also gives your text a relative size to the norm of your browser.

100%: nothing changes

120%: the size increases

80%: the size decreases

- Name of the size:

xx-small,..., xx-large

 

 

How to position a box

To make this as simple as possible, we will say that a box has 3 different positions.

We will say that the box floats.

  • To the left.

Your box will be situated to the left of the main box

  • To the right

Your box will be situated to the right of the main box

  • None

Your box will be situated wherever there is room

 

 

Display of the CSS window

The CSS menu is on the right side. Under the CSS tab, you will find the CSS Styles tab, in which there are 2 areas, or Zones.

CSS display window

 

All the rules (Zone 1)

All t he rules fall under 3 categories.

  1. Tags (h1, h2, ..., p,...ul, ...a, ...)
  2. Classes or styles ( .tables, .images,...)
  3. The Id's or pseudo-classes (#menu, #menu p, a:hover,...)

 

Properties (Zone 2)

Posts the result of your selection by theme, by alphabetical order, or by usage order.

The easiest is to select the icons when you select or create a style.

 

Creating a CSS folder

 

scg anywhere in the white area of zone 1 of CSS styles and select new

New CSS rule

Select Tag, and chose the name body.

Inside CSS File (Valid only for the active page)

Make sure that in the "Define in" you chose This document only

Outside CSS File (Valid for all your pages)

This time make sure that the content is in New Style Sheet File

Then confirm your selection by selecting OK

save a CSS file

Give your style sheet file a name, and make sure that this is relative to the Document then Save .

DON'T FORGET the .css AT THE END OF THE NAME

 

Saved CSS File

There you go, we created a style file that you can see in the All Rules section of the CSS tab. In our example, we are in the <body> tag adjustments. You can change the background of your page. (See the next chapter - Background).

 

CSS Code

Dreamweaver 8 already has most of the codes that are compatible with the various browsers, which you will find in the CSS properties Zone 2 . For those who are familiar with the CSS codes, you may also find this chapter interesting. The offered choices allow you to bypass the CSS editor.

Since it's not easy to memorise all the various codes, Dreamweaver 8 has integrated the editor of CSS Rules, which makes it easy to find the code in English.

This is why we will not go into detail in this chapter. With practice and curiosity, you will find the translation of the code that you have saved with the editor.

  1. Font
  2. Background
  3. Block
  4. Border
  5. Box
  6. List
  7. Positioning
  8. Extensions
  9. Tables, Content, Quotes

 

1. Font

Your choice page

CSS font adjustment window

And the corresponding information in the CSS editor tab

CSS editor tab font adjustment

 

 

2. Background

CSS editor tab background adjustment

 

 

3. Block

CSS editor tab block window

 

 

4. Border

CSS editor tab border adjustment

 

 

5. Box

CSS editor tab box adjustment

 

 

6. List

CSS editor tab list

 

 

7. Positioning

CSS editor tab position adjustment

 

 

8. Extensions

CSS editor tab extensions

 

 

9. Tables, Content, Quotes

CSS editor tab: tables, content, quotes