CSS for Beginners with Dreamweaver

By Brian Rinaldi

Dreamweaver has had a long history. I recall using it heavily back in the UltraDev days, for those of you that remember that. While the tool has evolved quite a lot over the years, it remains a powerful web development IDE. Sure, everyone seems to love a lightweight code editor nowadays for their HTML, CSS and JavaScript development, but Dreamweaver packs a ton of features that can make it easy to do some complex things.

Nonetheless, Dreamweaver can be intimidating for someone new to web development. It isn’t necessarily a beginner’s tool, in large part because it assumes you have a fairly solid understanding of Cascading Style Sheets (CSS). Even though Dreamweaver simplifies working with CSS, you simply cannot create a web page that looks good without understanding CSS.

In this guide I hope to cover all the CSS knowledge you’ll need to get your web page looking the way you want within the Dreamweaver CC (though much of what we discuss is just a primer to CSS, so it is applicable even if you don’t use Dreamweaver). We’ll examine the new CSS panel and then walk through all the aspects of CSS that will allow you to fully leverage the panel’s styling capabilities. Now witness the firepower of this fully armed and operational design station!

Sample Project

While it isn’t a requirement to follow along, as I do my best to explain every example in detail, the examples I will be using come from a simple example project you can download. We’ll be using a pre-built page from Intializr. Initializr is a site that let’s you generate a page template with a number of optional extras and using best practices. As you can see from the screenshot below, I am starting with the Responsive template option but removing every optional item. The reason I have chosen the responsive template is mostly because it includes a default layout and styles (the classic H5BP default page simply has some brief text).

Once you download the zip file, expand it wherever you would like to place your project and open index.html within Dreamweaver. If you’d like to see what the design will look like, within Dreamweaver you can click the Live button in the upper left corner to enter Live View. In my screenshot below, I have both Live View and Split View turned on whereby I can preview the output and view the source code at the same time.

The CSS Designer Panel

Dreamweaver CC came with a new way of interacting with CSS called the CSS Designer Panel. It offers you quick access to any linked CSS files within the current document as well as all the style definitions and media queries within them (don’t worry if you don’t know what these are as we’ll discuss those later). It also gave you the ability to quickly add, modify and remove style definitions with visual cues to help you better understand the effect of certain style changes. In this tutorial, any directions will generally assume we are working within the CSS Designer Panel in Dreamweaver CC unless otherwise indicated.

I should briefly note, that in all cases here, I have my CSS Designer Panel in an expanded view. To access this view, find the dropdown in the upper-right hand corner of Dreamweaver that will by default read “Compact” and select “Expanded.”

CSS Basics

Once upon a time, every HTML page would contain all of the information used to style that page, oftentimes defined in attributes to the HTML tag. While beneficial in its simplicity, this meant that you would have to repeat styling rules across or even within pages, which was especially problematic for maintaining or updating.

Early CSS helped solve many of these issues by taking this styling information and placing it in rules defined in an external document (the .css file). This allowed designers and developers to reuse styles, better organize them and update them in a single location. However, back then much of the actual layout was still done within the HTML, while the CSS focused on things like the size, color or other basic visual attributes.

Nowadays, CSS is extremely powerful, generally handling everything from the appearance of items to their placement on the page and even basic animation, both 2D and 3D. While HTML focuses purely on the markup, indicating, for the most part, what an item is (i.e. this is a paragraph, this is a heading, this is a container – referred to as a div). Using just CSS, you can completely rearrange the look and feel of your page by just changing your CSS, regardless of the order in which things appear within the HTML markup. You can even adjust styles or appearance based upon factors such as the size or orientation of the screen, for example.

Defining the CSS for Your Page

I told a little white lie earlier in this tutorial in saying that your CSS is external to your HTML document. Technically, this is not a requirement. You can, if you choose to, define your styles directly in your page inside of a <style> block in your header or even on an individual tag basis within the style attribute. However, these approaches are not generally recommended as you don’t get the benefits of reuse that I mentioned.

Within Dreamweaver’s CSS Designer panel, it is trivial to either create a new external CSS file or link an existing one. Within the “Sources” section of the panel, click on the plus symbol. You’ll see three options, “Create A New CSS File,” “Attach Existing CSS File” and “Define in Page.” Each of these options should be fairly self-explanatory. As you can see however, in our sample document, we already have two external CSS files added which are already listed in this panel: normalize.min.css and main.css.

Click on main.css, as that is the file we’re primarily going to work with here. You may notice that the “Selectors” section of the panel will re-populate when you do this, we’ll talk more about selectors in a moment. First, however, we should understand the cascading part of Cascading Style Sheets.

Cascading in CSS

Honestly, this can get very tricky and a full discussion could go well beyond the scope of a beginners CSS tutorial. However, I thought it was important, before we begin understanding how to write CSS, that we understood how CSS rules can influence one another, as, without this understanding, one can easily get confused by certain aspects of how styles are being applied

The cascading aspect of CSS refers to the way in which certain properties in one rule can be passed down to other elements or applied to other potentially conflicting rules. When you see either in Dreamweaver or in your browser tools that it mentions “calculated” in reference to CSS, that is usually because it is showing you all the styles that apply to this element regardless of where they were defined, including styles that were “inherited” from other rules. I know this sounds confusing (and, honestly, sometimes it is), so let’s look at a common example to explain this.

Oftentimes you will want to specify a default font, font size or even font color for the entire document. Now, I could create rules to apply to every possible HTML element that can contain text, but that would be tedious and redundant. However, because certain properties in CSS can cascade, I can use this to my advantage and reduce this redundancy by applying the default text styles to the entire HTML page or body and let everything within the page inherit this style unless I choose to override it.

As it happens, our sample document applies some basic text styles in this manner. To see this, click on main.css in “Sources” and then click on the first item in “Selectors” that starts with “html.” Within the “Properties” section of the CSS Designer panel, click the text icon (it looks like a T). Doing so, you will see that a color is defined for our text (#222 which looks not completely black). What you aren’t seeing so clearly, however, is that, because it is defined on a higher level element (the html tag in this case), it affects most elements inside of it.

To see how this works, simply click the color picker and choose a new color (in my screenshot below, I chose a red). Once you do this, you’ll see that the paragraph and header elements inside your page all change color as well – that is cascading. Also, you may notice that the white text in the header has not changed, and that is because these elements define their own text color, thereby overriding the inherited color from the html tag.

Go ahead and set the color back to #222 by simply clicking the text of the color (rather than the color picker) and manually enter the value.

One other important thing to note about cascading is that it also applies in cases where two rules are applied to the same element or where there are potentially conflicting rules, even across CSS files. Let me explain. Let’s imagine, for instance, that in main.css we have set all paragraph elements to use the text color blue (I know that’d be ugly as sin in most cases, but just ignore that for the sake of our example). In the actual CSS code, you could define it like this.

p {color: blue;}

Now, recall that our sample page also includes another CSS file named normalize.min.css. Let’s imagine that we also have a style set in this .css file that sets the font size in paragraphs as 10 pixels high. That might look like this:

p {font-size:10px;}

In this case, although both rules are defined separately and in different .css documents, they would both apply whereby we would end up with paragraphs containing blue text of 10 pixels in height. The same basic rule applies if you apply two CSS classes to the same HTML element. Obviously, things get decidedly more complex if both rules affected the same properties (say, for example, they both set the text color) but that’s a more advanced topic that, if you are curious, I suggest you research as you become more experienced.

Selectors

Ok, hopefully I haven’t bored you to death with all the prerequisites, but just trust me that this information will be important to you as you begin to delve deeper into CSS. Let’s get down to the nitty gritty of actually creating rules and applying them by looking into selectors. A selector is essentially how you tell CSS which elements it should apply to. You’ve actually already looked at a couple selectors in this tutorial, the html and p selectors used in the prior section are what are called element selectors – we’ll look at those first.

Element Selector

As you might have been able to determine from the above example, an element selector will match the corresponding HTML element: p{} will match <p> and html{} will match <html> and so on. Within the Dreamweaver CSS Designer panel, the easiest way to differentiate an element selector from other selectors we’ll discuss below is that it has nothing preceding it (as in, no period, hashtag, colons or at symbol). Of course, they are also recognizable because they use the name of an HTML element.

Let’s see how this works by using Dreamweaver to edit an existing element selector for the horizontal rule tag. First, let’s add a horizontal rule to our document. You can add it anywhere you like, but I added mine right beneath the header block at line 38 in index.html. Once your live preview updates, you’ll see that the horizontal rule is a 1 pixel thick line colored grey. This is done even though you haven’t specified any styles because our stylesheet has a rule applied to any and all <hr> tags.

In the CSS Designer panel, make sure you choose main.css from the sources and then find hr in the selectors (you can use the search to help limit the results in this box by typing hr in the search field at the top of the selectors section).

Click on hr and you will see some of the style properties applied to it such as a height of 1px and, if you scroll down to view the border properties, a border-top color of “#CCC.” Click on the color selector, choose the eyedropper tool in the lower right of the color panel and take your little eyedropper and click on the light orange color in the header. You’ve now changed all <hr> tags to appear orange, and your live view of the page should now reflect that.

The CSS code equivalent of the rule we just modified in the CSS Designer panel is:

hr {
    display: block;
    height: 1px;
    border-top: 1px solid #F16529;
    margin: 1em 0;
    padding: 0;
    border-bottom: 0;
    border-right: 0;
    border-left: 0;
}

You can see the color we chose in the border-top property.

To add a new element selector, click the plus button on the selectors section and then start typing the HTML tag name you want to create a selector for. Dreamweaver will automatically start hinting you any matching tag names.

Class Selector

You may be familiar with the class attribute on an HTML element. This attribute is used to assign a CSS class (or classes) to the element. Within a CSS document, you can easily distinguish a class selector as it starts with a period (note that when assigning the class in the class attribute of an HTML element you do not include the period however).

Our sample project already includes a number of CSS classes. Let’s look at the header-container class. You can see in the image below that I have selected the .header-container under selectors (again, feel free to use the search in the selectors tool to limit your results).

On the properties panel to the right, I have scrolled down to the border properties as these are primarily what has been defined in this class. As you can see if you view this in Dreamweaver yourself, if defined a border-bottom-color of #e44d26 (which is a shade of orange) and a border-bottom-width of 20px. Finally, it defined a border-bottom-style of “solid.” All three of these items combined give the header the thick dark orange border along the bottom that you can see in the preview pane.

Let’s see what this translates to in CSS:

.header-container {
    border-bottom: 20px solid #e44d26;
}

As you can see, all three of the properties discussed above are written using a shorthand within the border-bottom property. These properties can be defined individually, but whenever a shorthand is available it is generally considered preferable to use it.

You may be wondering how the header-container manages to get its other style properties, such as the lighter orange background color, since they are clearly not defined in this CSS class. Within the selectors panel, you can find a selector listed as “.header-container, .footer-container, .main aside” (note: some of the text of the selector may be cut off in the display). Let’s see what is defined in this class by examining the CSS.

.header-container,
.footer-container,
.main aside {
    background: #f16529;
}

In the case of the above, multiple selectors are being combined as they all share a common property. The header-container, footer-container and the aside (this is called a descendent selector, we’ll discuss this in more detail later) all share the lighter orange background. It is often recommended that, in order to write shorter, more efficient and more maintainable CSS, you combine elements, as in this case, so as to avoid repeating the same property across multiple related selectors.

ID selector

As you may know, any HTML element can be given an arbitrary ID via its id attribute. For example, the below <div> element has an ID of “main.”

<div id="main"></div>

In order to style this element in CSS, you could use an ID selector which would look like this:

#main {
    background: #f16529;
}

Our sample project doesn’t include any ID’s. Why? Well, not to get sidetracked, but there is a lot of debate in the front-end development community about ID selectors. Some argue they are overly specific, thereby limiting their reuse. For instance, the .main class selector can be reused on multiple elements but the ID selector can only apply to one specific element on the page. Nonetheless, ID’s are a legitimate and regularly used HTML property, frequently used to make JavaScript DOM selection easier, and many within the community believe they are plenty of legitimate uses for ID selectors in CSS.

Descendant and Child Selectors

Descendant and child selectors are very similar but have one significant difference. To understand the difference, first let’s look at an example of a descendant selector from our example files.

nav a {
    display: block;
    margin-bottom: 10px;
    padding: 15px 0;

    text-align: center;
    text-decoration: none;
    font-weight: bold;

    color: white;
    background: #e44d26;
}

In this case, we are selecting any <a> element that is a descendant of a <nav> element. The Document Object Model (DOM) defines the structure of an HTML page as a tree of elements, sort of like a family tree. In that tree, any HTML element contained within another HTML element is considered a descendant of it. Let’s look at some HTML from our sample to make this concept clearer.

<nav>
    <ul>
        <li><a href="#">nav ul li a</a></li>
        <li><a href="#">nav ul li a</a></li>
        <li><a href="#">nav ul li a</a></li>
    </ul>
</nav>

In the above HTML, there are three HTML elements that are descendants of the <nav> element: <ul>, <li> and <a>. The DOM tree for this might look like:

Therefore, the descendent selector above will style any of the <a> elements that are beneath the <nav> element, regardless of how many levels beneath they are.

On the other hand, a child selector will only select children, which are those elements one level below. The prior example written as a child selector rather than a descendant selector would look like this:

nav > a {
    ...
}

In the case of the HTML I showed above, this child selector wouldn’t apply to anything at all as there are no <a> elements that are one level beneath the <nav>. However, let’s look at an example that would work:

nav > ul {
    ...
}

Because the <ul> element is directly beneath the <nav> and not contained within another tag, this child selector would apply to that element.

I should note here that it is generally recommended that you avoid using descendant or child selectors whenever possible as they have been shown to be the least efficient (i.e. slow) selector you can use. Overuse of poorly performing CSS can begin to adversely affect the rendering performance of your page in the browser. If you are curious about this topic, check out Writing Efficient CSS on MDN or Google’s best practices guide.

* Selector

The asterisk is a universal selector and will match every element. For instance, if used by itself, it will match every element on the page. In our example page, there is one use of the universal selector.

* {
    background: transparent !important;
    color: #000 !important; /* Black prints faster: h5bp.com/s */
    box-shadow: none !important;
    text-shadow: none !important;
 }

It is important to note that this particular universal selector is being applied to the print stylesheet only using something called a media query. It is dropping the background colors and drop shadows on every element, which aren’t necessary for printing, and changing the text color of all elements to black, which prints better.

You can combine the universal selector as a descendant selector. For instance, we could select every element within elements that have the CSS class “main” applied.

.main * {
    ...
}

Attribute Selectors

Attribute selectors, as the name implies, allow you to match elements with a specific attribute value. For example, HTML has a number of types of the <input> element. A text input type would look like this.

<input type="text" name="FirstName">

This HTML element has two attributes, type and name. If I want to style all text elements, I can use a selector like this.

input[type="text"] {
    ...
}

The square brackets indicate that this is an attribute selector. The first half is the attribute that we would like to match and the second, following the equals, is the text that should be matched, surrounded by quotes. In this case, we are matching all inputs with a type of text. As this input has a name attribute, we could have used the following CSS to match this specific input element.

input[name="FirstName"] {
    background-color:red;
}

Pseudo Classes and Pseudo Elements

Pseudo classes are special keywords that can be added to a selector specifying the state of the element. For example, a selector of a:hover is an element selector (for the <a> tag) but will only be applied when the element (a link in this case) is being hovered by the mouse.

First let’s look a simple example from our sample page that styles links (i.e. <a> tags) on the page, which is the most frequent use of pseudo classes.

nav a:hover,
nav a:visited {
    color: white;
}

nav a:hover {
    text-decoration: underline;
}

The first selector is selecting <a> tags within the <nav> in both the hover and visited states (visited being a link that the user has already clicked). It is setting the text color to white to override any default link styling that may exist. The second selector selects <a> tags within the <nav> also in the hover state and sets them to be underlined. Thus when you hover over links in the page navigation, they are underlined but have no underline by default.

However, there are many more pseudo classes than :hover and :visited – MDN has a thorough list of all of them. Some pseudo classes allow you to select a specific element amongst a group of elements. Let’s look at an example from our sample page.

nav li:first-child a {
    margin-left: 0;
}

nav li:last-child a {
    margin-right: 0;
}

In this case, the pseudo classes are specifying which element out of a list of elements the style will apply to. The first selector selects the first <li> element that is a child (i.e. only one level beneath) the <nav> element and applies a left margin to this element. The second selector, as you might have already guessed, applies a right margin to the last <li> that is a child of <nav>.

Additional Selectors

While I’ve tried to discuss most of the commonly used selectors, this list isn’t comprehensive. For instance, I did not cover sibling selectors or complex selectors that use regular expressions or the use of not(). At the end of this article, there is a list of resources that can provide you more detail on these items if you are curious to learn more.

Media Queries

Going into great detail about media queries and how they work would be beyond the scope of a beginner’s tutorial. However, most basic CSS nowadays includes some amount of media queries within them, so knowing how to recognize them and understand what they are trying to do is at least a minimum requirement.

Media queries are easily recognizable as they always start with @media. After that, there are two parts to a media query, although in practice you may often only see one of them.

The first part is the media type. In theory, there are a ten different media types but, again in practice, you will generally only see two: screen and print. As you may have guessed, a media type of screen targets a computer screen and print targets a printed page (as in, the user is printing out the web page). Below is an example of a media query using just the media type from our main.css example file:

@media print {
    * {
        background: transparent !important;
        color: #000 !important; /* Black prints faster: h5bp.com/s */
        box-shadow: none !important;
        text-shadow: none !important;
    }
}

This media query is targeting print. Inside the media query, additional CSS rules are defined. In this case, a new rule is being defined with the universal selector to remove some decoration from elements, such as background colors and shadows, that are irrelevant to the printed version. There are a number of nice tricks you can use in your print stylesheets to also display information that gets hidden on the printed page such as the URL for links. In fact, you can see this in the example CSS file in the following rule within the print media query:

a[href]:after {
    content: " (" attr(href) ")";
}

The second part of the media query are the expressions. The expressions contain one or more media features. If an expression evaluates to true, then that media query and the CSS rules it contains will be applied. Media features encompass a long list of properties but, in practice, you will most commonly see expressions based upon the screen size. In fact, these types of media queries form the basis of Responsive Web Design, which is essentially an approach that uses CSS to modify the page layout to accommodate the various screen sizes of desktop computers, tablets and phones (among other devices).

Let’s look at an example of an expression from main.css.

@media only screen and (min-width: 1140px) {

/* ===============
    Maximal Width
   =============== */

    .wrapper {
        width: 1026px; /* 1140px - 10% for margins */
        margin: 0 auto;
    }
}

This media query actually contains both parts, the media type and the expression. Expressed in normal language you could say this media query applies to “only screens with width greater than 1140 pixels.” This means that the rule nested within the media query would not apply when printing nor would it apply on smaller screens, such as those on mobile phones or tablets. In case you are wondering, the “only” keyword is there to prevent older browsers that do not support media queries with media features (as in, they only support the media types like screen and print) from applying the styles nested within the media query.

There’s a lot more to media queries such as using logical operators like “and” to combine expressions or “not” to negate the expression. However, the goal here was simply to introduce the concepts so that when you see a media query in a stylesheet, you can understand what it is trying to do.

Layout and Positioning

This tutorial isn’t going to cover layout and positioning as it is a very broad topic. I will offer a link to a good tutorial that covers all the basics of handling layout and positioning in pure CSS.

Dreamweaver does a great job of offering ways to visualize the layout and positioning aspects of CSS however, so, in many cases, the impact of certain CSS is obvious when viewed in the CSS Designer. For example, in the screenshot below I’ve selected the “nav a” rule from main.css and you can see that the CSS Designer illustrates the impact of the margin and padding settings.

If position values were defined, they would also be nicely illustrated. However, positioning gets more complicated when you start dealing with the difference between relative and static.  For understanding these sorts of complexities, I recommend the Learn CSS Layout tutorial mentioned earlier in this section.

Where to Go From Here

Hopefully this article gave you a good overall sense of CSS and how to read and modify it from within Dreamweaver. There’s a lot I didn’t cover but, thankfully, there are a ton of resources available to help you learn more.

MDN (Mozilla Developer Network), which is a great resource overall for web development, has a whole section on learning CSS. If you are interested in learning more about selectors, Quirksmode has a browser compatibility table covering all the CSS selectors, with each linking to detail on the selector and its usage. NetTuts also had a good walkthrough of most of the important CSS selectors. For more on pseudo-classes, you can refer to two articles by Smashing Magazine, one covering how to use CSS pseudo-classes and the other covering the before and after pseudo-classes specifically. These are only a few of the resources available – best of luck in your learnings.