Creates a paragraph of text which automatically inserts space before and after the paragraph.
This is a new paragraph.Attributes
align:left;
align:right;
align:center;
align:justify;
The size of the font can be defined in many ways. Here we are going to use the pre-defined keywords to control the size which are:
font-size:xx-small
font-size:x-small
font-size:small
font-size:medium
font-size:large
font-size:x-large
font-size:xx-large
The CSS color attribute defines the foreground colour of an element as opposed to the background-color attribute used earlier.
Values can be defined in 2 ways, the hex value or by using a standard CSS Color Name.
Defines an HTML heading of varying size, 1 being the largest and 6 the smallest.
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
The br tag defines a single line break. When you use the return key in Dreamweaver text is automatically enclosed in the paragraph tag which includes by default space above and below the paragraph. When you only want to break one line use the br tag or <SHIFT> + <RETURN> in Dreamweaver to insert a single line break.
Properties can be set for the 4 states of a link using CSS
a:link - The style of an unvisited link
a:active - The activated link (shows briefly while new page loading)
a:visited - The style of a previously visited link
a:hover - The mouse over state
When adding links remember to set the Target attribute for the <a> tag using the Target drop down in Dreamweaver. The target attribute supports 4 properties:
_blank - opens the linked document in a new window
_self - opens the linked document in the same frame as the link
_parent - opens the linked document in the parent frameset
_top
- opens the linked document in replacing the full body
Of these 4 options, 1 and 4 will be the most commonly used in your project. Use _blank when linking to an external site and _top for any internal links.
text-indent is used to indent the first line of a paragraph. It is often used to help highlight a new paragraph start especially in newspapers which do not use spaces between paragraphs to make better use of available space.
text-indent can be used with the usual text size units px, pt, cm, em, etc, px (pixels) being the most commonly used.
CSS example:
text-indent:25px
Lists come in two types, unordered, <ul> and ordered <ol> (numbered).
A HTML list consists of list item tags, <li> between the opening and closing <ul> and <ol> tags.
- list item 1
- list item 2
- list item 3
- list item 1
- list item 2
- list item 3
You can use the font-style CSS attribute to change the style of the font from the default normal to oblique and italic.
font-style:normal;
font style:oblique;
font-style:italic;
Font-Weight
The CSS property font-weight describes the thickness of the fonts used and can be set using the keywords normal, bold, bolder and lighter. You can also specify a numeric value to manually set the weight.
font-weight:lighter;
font-weight:normal;
font-weight:bold;
font-weight:bolder;
font-weight:<numeric value>;
Note: not all browsers support all attributes shown here.
Float allows you to position elements horizontally and has the two main attributes, left and right.
When you insert an image into a web page, by default the image occupies all the horizontal space so text added begins at the bottom of the image as can be seen in the following example.
some text here with wasted space above.
When you use the CSS float:left/right text is allowed to wrap around the image. This technique can also be put to good use when designing layouts which require more than one column of text. An example of this technique can be found in the next section which shows a three column layout produced in this way.
Laying out text in columns is a technique often used and is achieved using a separate div for each column. These div's then have the following attributes set in CSS:
width:29%; - I this case I set the width of the div to roughly a third of the container. Padding has been used in these divs so we cannot use an exact third of the available space.
float:left;
relatively positions the div slotting it in to the next available space.
When float is used content often overlaps due to the unpredictable nature of floated elements. To make sure use the next item on the page is far enough down the CSS property clear is used, this pushes the next element below any floated items above.
clear: all;
If the content you add to a div becomes larger than the container by default the spills out of the container into the adjacent area of the page. You can change what happens in this case by using the CSS property overflow.
If the content you add to a div becomes larger than the container by default the div is expanded to a large enough size to display the content. You can change the way this happens by using the CSS property overflow.
If the content you add to a div becomes larger than the container by default the spills out of the container into the adjacent area of the page. You can change the way this happens by using the CSS property overflow, when set to auto scrollbars are added to the div.