Previous Next

Dreamweaver - HTML and CSS Using Dreamweaver

How to create CSS?

Daniel Walter Scott || VIDEO: 16 of 34

Download Exercise Files

Contents

Introduction

I recommend hosting your new website with Bluehost, you can get a big discount by signing up with this link: https://www.bluehost.com/track/byol/byol_dwhacud_16

Dreamweaver tutorial 16: How to make a CSS file in Dreamweaver CC

  1. Open the HTML page you want to style (open index.html for the classroom tutorial)
  2. Make sure your CSS Designer panel is open (Window> CSS Designer)
     
  3. From the ‘Sources’ section, click the + button and choose Create a new CSS file.

  4. Name your CSS sheet. You can name this anything you like remembering not to use any spaces or special characters like @#$%^&*. We’ll call ours ‘main’.

  5. Ok

You need to be a member to view comments.

Join today. Cancel any time.

Sign Up

Hi, Welcome,

My name is Daniel Walter Scott. I am a trainer here at Bring Your Own Laptop.

The topic we are covering today is: What is CSS (Cascading Style sheets)

CSS will allow us to style all of our HTML. Currently we have our vintage camper page. We have our H1s, our H2s, some paragraph tags, some links but not been able to change colour or font.

We are going to create a separate sheet called a CSS sheet and we are going to style those fonts. So, I’ve opened my own website here. I’ve created a CSS sheet for my website. So if I look at this site with the CSS turned off and then turn it back on, I can see that with the CSS on, it changes the site quite substantially. All of the CSS styles, font and layout are different.

So let’s look at split view. On the right is my HTML with CSS applied. On the right side, I’ve got this text highlighted, its called ‘blog 2’. Over here I’ve styled ‘blog 2’. I’ve given it a font size of 1.2. I’ve given it a font family, ‘museo sands’. It’s got a text shadow, a drop shadow, a white one. The line height is the space between lines. And the font weight is how heavy it is, is it a light, medium, bold or black. I can make changes in my code in the CSS and watch it update on the right. I can change this font size to 1.7 over here and watch that in the text it’s gotten bigger.
Bring Your Own Laptop