Dreamweaver - HTML and CSS Using Dreamweaver

What is CSS?

Questions

Course info

34 lessons / 3 hours

Overview

Dreamweaver (and web design in general) is such a hard program to teach yourself. We know, because as Dreamweaver trainers we have all taught ourselves. We wish we had a resource like this when we were learning.

Hand coding a website from scratch is now a thing of the past. Web designers use tools like Dreamweaver to a lot of the heavy lifting. We imagine this is your first website build and we're glad we're here to help make this process a little less troublesome. 

Who should use this?

Anyone that is brand new to Dreamweaver and anyone brand new to web design in general. If you're reasonably experienced in web design you might find this course a little slow going.

What do you need?

  • You'll need a laptop (Mac or PC)
  • Dreamweaver CC installed. Dreamweaver can be downloaded from theAdobe website here.

Can I use this tutorial with Adobe Dreamweaver CS4, CS5 or CS6?

No. Unfortunately there were some fundamental changes in the Dreamweaver CC update that makes CC and previous versions very different.

Remember you can download Dreamweaver CC free for 30 days. Don't worry - after your free trial has expired your files will still be updatable using any other web design program.

If you like the tutorials we'd love you to like, share and tweet it. We'd be very grateful.

Daniel Scott

Daniel Scott

Founder of Bring Your Own Laptop & Chief Instructor

instructor

I discovered the world of design as an art student when I stumbled upon a lab full of green & blue iMac G3’s. My initial curiosity around using the computer to create ‘art’ developed into a full-blown passion, eventually leading me to become a digital designer and founder of Bring Your Own Laptop.

Sharing and teaching are a huge part of who I am. As a certified Adobe instructor, I've had the honor of winning multiple Adobe teaching awards at their annual MAX conference. I see Bring Your Own Laptop as the supportive community I wished for when I was first starting out and intimidated by design. Through teaching, I hope to bring others along for the ride and empower my students to bring their stories, labors of love, and art into the world.
True to my Kiwi roots, I've lived in many places, and currently, I reside in Ireland with my wife and kids.

Downloads & Exercise files

Transcript

Hi, and welcome to this Dream Move tutorial. My name is Daniel Walter Scott,  and I'm a trainer here at Bring Your Own Laptop. Um, in this course, what we're gonna look at is CSS. What CSS will allow us to do is to style all of our HTML. So currently we've got our vintage camper page  and we've got our H ones, our H twos, our paragraph tags,  and some links, but we haven't been able to change the color  or the size of the font. So this is what this next, next section is about.

So we're gonna create, um, uh,  a separate sheet called a CSS sheet, which is short  for cascading style sheet. And we're gonna style those fonts. So I've got this file here open for you. This is, um, one of my websites. It's the Bring Your Own Laptop website that I created  for the Australian site. Now you can see it's kind of like our, uh, vintage camper.

It's quite simple images, everything's in line. But what I'll show you is I've created a CSS sheet. I've turned it off for the moment just to show you  what it looks like without the CSS. So quite similar. There's a lot more, um,  text in this version,  but quite similar to the vintage Camper one. So what I'll do is I'll turn the CSS back on.

So let's find this view style rendering display style. So this is gonna turn my CSS back on. And can you see it's changed the site quite substantially. Okay. All the CSS styles, um,  all the fonts, it styles the layout. And this, um, part of the tutorial,  we're gonna look at just styling the fonts to start with.

We'll look at layout and the later one. So, um, let's have a look at split view. So on the right here is my HTML with a CSS applied. And this is what CSS looks like. It's quite similar to HTML, okay? But it's a little simpler, okay?

It's nice and easy to use. So on this right hand side here, um, I've got this bit  of text highlighted, and you can see down the bottom here,  it's called Blog two. Um, okay, so it's got this thing called blog two  that I've added to it, just the name. Um, and over here I've styled blog two  and I've told it to be a font size of 1.2 ems,  which is the size of the font. I've given it a font family. So Museo Sands rounded,  that's what I've decided for this one.

Um, it's got a tech shadow. So drop shadow, um,  it's a white one that's over the side there. And these are the colors that make that work. And the line height is the leading  or the space between lines  and the font weight is how heavy it is. Um, so is it a light, is it medium? Is it a bold, is it a black?

So those are the things. Styling. Um, this, um,  blog post two here, text. Okay? So I can make changes in my code in the CSS  and watch an update on the right hand side. So I'm gonna change this to a bigger size.

So 1.7 and your watch over here, it updates to 1.7. Great. So that's what we're gonna do. We're gonna, um, create our, um, CSS sheet, okay? And we're gonna do some font styling and try  and get our vintage camper site looking a little more trick. All right.

To see you in the next tutorial.
Bring Your Own Laptop
  • Powered by Marvin
  • Terms of use
  • Privacy policy
  • © Bring your Own Laptop Ltd 2025