Welcome to our free Adobe Dreamweaver tutorial. This tutorial is based on Webucator's Introduction to Dreamweaver Creative Cloud (CC) Training course.
While HTML is a language for structuring web pages, Cascading Style Sheets (CSS) is the language used for styling and laying out web pages. Although Dreamweaver provides a nice interface for working with CSS, to use it effectively, you must understand the different ways CSS styles can be applied to elements and pages. In this lesson, you will learn how CSS works in general and how Dreamweaver implements it.
Lesson Goals
Before learning CSS, it is important to understand how HTML is structured. HTML is made up of elements that describe the structure of the content on a web page.
HTML elements describe the structure and content of a web page. Tags are used to indicate the beginning and end of elements. The syntax is as follows:
<tagname>Element content</tagname>
For example, a paragraph would be marked up as follows:
<p>This is a paragraph.</p>
Tags often have attributes for further defining the element. Attributes come in name-value pairs:
<tagname att1="value" att2="value">Element content</tagname>
For example, an important paragraph might be marked up as follows:
<p class="important">This is an important paragraph.</p>
Block elements are elements that separate a block of content. For example, a paragraph (<p>
) element is a block element. Other block elements include:
<ul>
and <ol>
)
<table>
)
<form>
)
<div>
)Inline elements are elements that affect only snippets of content and do not block off a section of a page. Examples of inline elements include:
<a>
)<img>
)<b>
, <i>
, <tt>
, etc.)
<em>
, <strong>
, <code>
, etc.)<span>
)Strong knowledge of HTML makes working with CSS much easier, but with the basic knowledge covered above, you should be able to get a good start with CSS.
CSS rules are statements that define the style of an element or group of elements. The syntax is as follows:
selector { property: value; property: value; property: value; }
Each property: value pair is a declaration. Multiple declarations are separated by semi-colons. The selector defines which elements are affected by the rule. Take a look at the following rule.
p { color: darkgreen; font-family: Verdana; font-size: 10pt; }
This rule specifies that all paragraph text should be dark green and use a 10-point Verdana font.
To illustrate how to add rules in Dreamweaver:
The are several different types of selectors. The most common ones are listed below:
Selectors identify the element(s) affected by the CSS rule.
Type selectors specify elements by tag name and affect every instance of that element type. Looking again at a previous example:
p { color: darkgreen; font-family: Verdana; font-size: 10pt; }
This rule specifies that the text of every <p>
element should be dark green and use a 10-point Verdana font.
In Dreamweaver CC 2017, you must type the beginning . or # to note a Class or ID type selector.
Descendant selectors specify elements by ancestry. Each "generation" is separated by a space. For example, the following rule states that <strong>
tags within <p>
tags should have red text.
p strong { color:red; }
With descendant selectors generations can be skipped. In other words, the code above does not require that the <strong>
tag is a direct child of the <p>
tag.
To illustrate:
In HTML, almost all elements can take the class
attribute, which assigns a class name to an element. The names given to classes are arbitrary, but should be descriptive of the purpose of the class. In CSS, class selectors begin with a dot. For example, the following rule creates a class called "warning" that makes the text of all elements of that class bold and red:
.warning { font-family: Impact; font-size: large; font-weight: bold; color: #F00; }
Following are a couple of examples of elements of the warning class:
<h1 class="warning">WARNING</h1> <p class="warning">Don't go there!</p>
To create class selectors in Dreamweaver, you type ".warning" as the name of the Selector:
To illustrate how to add a class selector in Dreamweaver:
Now we have to apply the class to an element on the page:
As with the class
attribute, in HTML, almost all elements can take the id
attribute, which is used to uniquely identify an element on the page. In CSS, ID selectors begin with a pound sign (#
) and have arbitrary names. The following rule will indent the element with the "maintext" id
20 pixels from the left and right.
#mainText { margin-left:20px; margin-right:20px; ] <div id="mainText"> This is the main text of the page... </div>
To create id selectors in Dreamweaver, you type "#mainText" as the name of the Selector:
Again, the id
attribute is used to uniquely identify an element on a page, so no two elements may use same id
.
Classes, on the other hand, can be applied to many elements on the page.
Sometimes you will want to modify the rule after you have created it. For example, that warning class we created is a little too standout-ish. Let's make it less so, by changing the font-family
from Impact to Arial:
Beneath the file name at the top of the Document Window, you will see a line that begins with the words "Source Code." This line lists the source files associated with the HTML file:
Notice above that there is an asterisk next to the test.css file name. That's because the file has been changed and not saved. When you close the HTML file, you will be prompted to save the associated files that have been changed; however, you can save them earlier by selecting File > Save All Related Files:
The asterisk should disappear.
There are many CSS properties and it is beyond the scope of this course to cover each in detail. However, we will go over them quickly and you will be able to learn a lot more on your own by exploring the CSS Designer Properties area.
Dreamweaver breaks CSS properties into the following categories:
In this exercise, you will style some pages.
caption
elements should be bold and left-aligned with white text and a dark blue background.th
) should have dark blue text and should have 4 pixels of padding on all sides.td
) should have 4 pixels of padding on all sides.h1
) should be centered.There are different ways to accomplish this look. To compare how you did it with our solution, look at the CSS Styles panel. In the Selectors part, you will see the selectors. Ours look like this:
Style sheets that are saved as separate files can be used over and over again. To illustrate this:
Style sheets that are saved as separate files can be used over and over again. To illustrate this:
Web designers can define style rules in three different places:
In the examples above, we have been using external style sheets. This is generally the best approach as it allows you to apply a single style sheet to an unlimited number of HTML files.
To create and embedded style in Dreamweaver, select "(Define in Page)" for the Rule Definition:
Inline styles are applied directly to an element within the HTML code using the style
attribute. The value of the style
attribute is a list of one or more property-value pairs separated by semi-colons. The code snippet below illustrates how inline styles are used:
<p style="color:red; font-weight:bold;">Hello, world!</p>
To illustrate how to add inline styles:
Generally, you should avoid using inline styles as you will not be able to reuse them in the same document or in others.
CSS allows you to specify font size, border size, margins, padding, etc. using many different units of measurement. The table below shows the units available.
Name | Unit | Example |
---|---|---|
Pixels |
px
|
margin-top: 10px;
|
Pixel is the measurement unit most often used for designing web pages is pixels. A pixel is not an absolute measurement like, for example, an inch or a point. The actual size of a pixel depends on the resolution and size of a user's monitor. Consider an image that is 900 pixels wide. If the monitor resolution is set to 800 by 600 pixels, then the image will not fit on the screen. However, if the monitor resolution on the same computer is set to 1024 by 768 pixels, the image will fit with room to spare. | ||
Points |
pt
|
font-size: 12pt;
|
Points should be reserved for print. There are 72 points in an inch. | ||
Inches |
in
|
padding-top: .5in;
|
Although inches are one of the most common units of measurement in life, they should be avoided in web design. | ||
Centimeters |
cm
|
top: 5cm;
|
Although centimeters are one of the most common units of measurement in life, they should be avoided in web design. | ||
Millimeters |
mm
|
left: 45mm;
|
Although millimeters are one of the most common units of measurement in life, they should be avoided in web design. | ||
Picas |
pc
|
bottom: 12pc;
|
Picas should be reserved for print. There are 6 picas in an inch. | ||
Ems |
em
|
font-size: 1.5em;
|
An em (or Mutt) is a relative unit that refers to the size of the letter "M" in a font. Because em is a relative rather than absolute measurement, it is often used in web design, especially for font sizes. | ||
Exs |
ex
|
font-size: 1.5ex;
|
The "x-height" is the height of font's lowercase "x". Exs are used to set the size of content based on the size of the surrounding font. | ||
Percentage |
%
|
width: 80%;
|
The percentage is based on the default size had no value been specified. |
This is an optional exercise if time allows.
There is no right answer. Just have fun and share with your instructor and classmates.