Sign In | Subscribe
Start learning today, and be successful in your academic & professional career. Start Today!
Loading video...
This is a quick preview of the lesson. For full access, please Log In or Sign up.
For more information, please see full course syllabus of Adobe Dreamweaver CS6
  • Discussion

  • Study Guides

  • Download Lecture Slides

  • Table of Contents

  • Transcription

  • Related Books

Bookmark and Share

Start Learning Now

Our free lessons will get you started (Adobe Flash® required).
Get immediate access to our entire library.

Sign up for

Membership Overview

  • Unlimited access to our entire library of courses.
  • Search and jump to exactly what you want to learn.
  • *Ask questions and get answers from the community and our teachers!
  • Practice questions with step-by-step solutions.
  • Download lesson files for programming and software training practice.
  • Track your course viewing progress.
  • Download lecture slides for taking notes.
  • Learn at your own pace... anytime, anywhere!

The Syntax for a CSS Rule

  • CSS rules contain selectors, properties & values
  • Every CSS rule is virtually identical in syntax which makes it easy to remember
  • Each rule is comprised of selectors, properties & values
  • We will create a style rule for H1 content & look at how the rule is structured
  • Create a new page called css-rule.html
    • Add the following text to the page: Wanderlust Travel
    • With your cursor in the line of text, choose ctrl/cmd 1 to make it a heading 1 tag
    • Select code view
    • Move to the top of the web page
    • We will add a style rule for the heading 1 tag
    • Add the <style> tag
    • Add h1 { font-family:palatino linotype;color:green;}
    • note the text
    • You can see how the first line of text is affected but not the second line
    • That is because it does not use the H1 tag
  • That is one way to create the syntax for a CSS style rule

The Syntax for a CSS Rule

Lecture Slides are screen-captured images of important points in the lecture. Students can download and print out these lecture slide images to do practice problems as well as take notes while watching the lecture.

  • Intro 0:00
  • Create New and Save 0:27
  • Add Title 1:05
  • Adding CSS Styles to a Page 1:18
    • Dragging Tags
    • Placing Content
    • Adding a Selector
    • Creating Style Rules
    • Properties and Values
  • CSS Syntax Examples 7:53

Transcription: The Syntax for a CSS Rule

We are now going to take a look at the syntax for a CSS rule, so that when I reference something within the rule, you will understand what I am talking about.0000

We are going to do it in Code View, so that it doesn't seem quite so scary: I tend to find, if I walk through a couple of these little things with people within a Dreamweaver class, all of a sudden it doesn't seem quite so scary to them--so let's do the same thing.0011

I am going to select something in my Files panel and hit Ctrl/Command+N for a new page; I am going to save my page, and I am going to name it css-syntax.0027

Now, syntax means rules, basically; so these are the CSS rules for applying CSS to your page.0041

I am in the Wanderlust Travel website; you should see that css-syntax page added to your local files; it is always a good idea to check that and just make sure it went into the right spot.0051

Now, I am also going to put that same thing up here in the title area; I am going to say CSS Syntax: and you will see that reflected now in the title area on your page.0065

Now, directly at the end of line 5 (which is the end of the title line), I am going to hit Enter or Return a few times, so we have some space there; I have also closed my Properties area.0079

And the reason I did that was because it is going to keep wanting you to refresh; so, you will sit and look at a Refresh button.0093

Because we are working in Code View, we can turn off the Properties area.0099

How do I go about adding CSS to a page?--we are just going to do a very basic one; so, what I am going to do is add style, an opening tag with angle brackets at each end.0105

Then, what Dreamweaver does, if we go to type in code, is: we simply need to type the closing tag--two characters, and Dreamweaver will finish it for us.0120

You will see, if I do a left angle bracket and a forward slash--you can see, Dreamweaver added the remaining six characters for me; that is one thing that Dreamweaver does that is kind of nice.0131

Now, you can click and drag in Design View or Code View in Dreamweaver; I made all this space, so what I am going to do is grab this closing tag and just drag it down.0144

Being able to drag within Code View saves a lot of time, instead of wasting your time trying to do any cut-and-paste (which I find so many people try and do within Code View).0157

Now, let's set up a style; but I think we need some content on the page first.0168

I am going to move over to Design, and I am going to say Wanderlust Travel (which is the name of our fictitious travel company website), and I am going to hit Ctrl+1 or Command+1 on your keyboard, and that will make it a Heading 1 tag.0174

Now that we have a Heading 1 tag, we need to add some styles to it.0192

Make sure you save your page at this point: your asterisk right here on the top should now be gone; and I'll click on Code--we'll go back to this Code View.0196

Now, when I go to create this, the first thing I need to add is called a selector; and we have a Heading 1 down on our page, so I can use that HTML tag and tell CSS, "Anything that is an H1 on this page--I want it to look this way."0208

I will type out an H1; add a space, simply to make it easier for you to see; and I am going to do what is known as a curly bracket; and when I do, these code hints pop up.0227

I'm just going to hit Enter a couple of times, and I want to put the closing curly bracket.0240

Notice, as soon as I do, that code hint disappeared; so I have what is known as a left curly bracket and a right curly bracket; now, we are almost done--it really is that easy.0246

What I am going to do up here is: I am going to say font, and I am going to put a colon; and you will see a bunch of fonts pop up.0260

Go ahead and choose the font that you want...let's see, what should I choose?--it really doesn't matter; let me do Lucida Console.0270

No, that is a monospaced one--that is kind of boring; let's go up here to Palatino Linotype.0279

If you double-click it, Dreamweaver will finish it for you; and those code lines pop up, and I'll add a semicolon: we just created a style rule.0287

Now, I am going to add a color to that; so hit Enter, and I am going to say color:, and we can pick a color; I'm just going to say green, semicolon.0300

You literally can just type color names; it is not normally what you want to do, but in this type of circumstance, I think it's pretty simple.0313

So, just type the name--the single word for the name of a color; and let's look at our content.0320

If you move into Design View, our font has changed, and our color is now green (or whatever color you want it)--it is as simple as that to create a CSS rule.0328

And I'm going to get rid of this extra space here, just by selecting it and hitting the Delete key; and when you go to delete here, you have to be careful; and this font stack is kind of long, so it gets a bit tricky to show you all of that.0343

That is how you add CSS rules to your page.0358

Now, when you use Dreamweaver to do it, using the CSS Styles panel, what Dreamweaver does--you can see, it displays any styles on your page.0363

What Dreamweaver has done here (and I'll pull up my Properties area)--there are two pieces to this particular panel, and it is very easy to have this pulled all the way down and not even realize that.0373

You want to make sure that that is pulled up; now, if I wanted to change any of these (and I could slide this middle section so I could see it a little bit easier)--if you click on the color chip, you will see, you get some color swatches; go ahead and choose another color, whatever you want: I'll make mine blue.0387

When you do that, you can see how it instantly turns blue.0409

So, we created style rules that we know work; what is the piece about the syntax?0413

Let me go back to code, so this goes all the way across; you are looking at the syntax for every CSS rule there is.0420

First of all, you have to put something in front of that left curly bracket (and I call it left because the little point there is pointing to the left); so, this is called a selector.0428

Then, within your rule, between the curly brackets, what you put are properties on the left and values on the right.0442

So basically, every CSS rule has a selector of some sort and a property with a value assigned; and selectors can have as many properties and values as you want for that particular selector.0452

That is all there is to a CSS rule.0469

Now, if I go back to my other page (I'll close this for a minute and go back to my pre-defined CSS layout page), since that already has some styles created, what if I go ahead and open up my page?0472

I'll open up index here; and notice, when I do, it popped open into Code, and guess what: there are our selectors, our properties, and our values, just like we did.0488

Here is the selector (whatever is before the left curly bracket); whatever properties and values we want (notice, there is a colon in between the two and a semicolon at the end); and there is our closing curly bracket.0503

That is the syntax for every CSS rule; there are a few comments in here, but you can see, every one is the same.0518

There is something in front of the curly bracket, and whatever it is, it is called the selector; properties, values; properties, values; every one is the same.0526

That is the syntax for a CSS rule; every one is identical, whether you are typing them yourself or you are letting Dreamweaver do it using the Styles panel; it all comes out to the same thing.0538

CSS syntax involves selectors, properties, and values.0553

And that is the syntax for a CSS rule.0559