Previous Next

Dreamweaver - HTML and CSS Using Dreamweaver

What is CSS?

Daniel Walter Scott || VIDEO: 15 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_15

Dreamweaver tutorial 15: What is CSS in Dreamweaver CC

 

CSS is an abbreviated form of Cascading Style Sheets, CSS is a new feature being combined with to HTML that gives both Web site developers and users more control over how pages are displayed. With CSS, designers can create style sheets that define how different elements, such as headers and links, appear. These style sheets can then be applied to any web page.

Websites are compound sites. Websites use an HTML file to create the content of the site and a CSS file to style it.

This technique makes the site more Google accessible. By stripping away visual styling it leaves a website with much cleaner code. This will help the search engines find your site.

Splitting the coding into various main parts makes corrections much easier to achieve. Because one CSS file can link to many html pages you only need to amend one.

A typical smaller website will only need 1 maybe 2 CSS style sheets to work properly. Some larger, more complex sites, can have many CSS sheets. Our tutorial will have only one.

Comments

You need to be a member to view comments.

Join today. Cancel any time.

Sign Up

Video transcript

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