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!

Creating an Inline Style Rule

  • It is possible to create inline styles within Dreamweaver
  • Keep in mind this is not the recommended method for creating styles
  • It is important to be able to recognize an inline style in case you need to modify code on a page that uses inline styles
  • Open inline-style.html
  • We will add inline styles on this page for the H1 & P tags
  • H1: font-lucida sans unicode, font-size: 1.4em, color #306
  • P: font-lucida sans unicode, font-size 1em, color #333
  • Take a look at the code created on the page
  • This code is located within the style attribute within each html tag
  • You can see how much code would need to change if you need to modify your styles across your website using this method

Creating an Inline Style 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
  • Code View for Creating an Inline Header Style 2:02
    • Creating a Font Type Style
    • Creating a Color Style
    • Creating a Font Size Style
    • Split Horizontally
  • Creating Paragraph Styles 7:00
  • Summary 9:17

Transcription: Creating an Inline Style Rule

Welcome back to

We are now going to take a look at CSS inline style rules, and what we are going to do is create some.0004

We are going to take a look at the Code View for creating an inline style; and that is because Dreamweaver doesn't have a really efficient way to create inline styles, because they are not a recommended method for creating your style rules.0013

There is a bit of a work-around where you can create them, but we are going to go into the code to do it--it is good to get familiar with it anyway.0032

And the only reason I want to bring this up is because we want to make sure you, when you see something like this, understand what it means in the code.0040

You just know that this isn't something that you are normally going to create.0051

Inline style rules can create inconsistency across pages: if you are putting a style rule here and one there and one there, all of a sudden your website looks very different from one page to another.0055

It is created directly within an HTML tag; and what we have here is the inline-style page; and I also have a complete version of this page, in case you need to take a look at it if your page isn't exactly working the same way as mine.0070

We are going to start with the inline style; and these you can get from the Exercise Files tab underneath the video for this lesson, in case you don't have it in your files.0089

How do we do this?--well, every tag needs to contain these rules; so what we have to do is go out and specify it in whatever tags we want it to apply to.0103

This can really add to your file size on the page, because you are having to add a lot of extra code.0116

Let's go ahead and create one: I am going to move into Code View on the inline-style page.0123

And what we have is a Header 1 here, and I'll segregate this out just a little bit so you can understand what it is we have on the page.0130

We have a Header 1...and let me go into Split View so you can see: here is the Header 1 creating an inline CSS rule; and you can always go into Split View and highlight in the Design side, in case you are having difficulty finding something in the code.0140

When you are not as familiar with working in the code, I know it can get difficult.0160

There is our Header 1; we also...if I put my cursor in this line (and I didn't even need to put it in the entire line)--you can see, we have an opening p tag and a closing p tag here.0164

We have a couple of p tags, and that is both of these pieces of text have surrounding them.0180

We are going to create an H1 inline style, and we are going to create a p inline style.0188

I'll move back to Code View, so you can see what I am doing just a little bit easier; since the style goes into the tag, I literally have to place my cursor in the tag, and I want to do it right before this closing right bracket.0194

Right after the number 1 in this example, I am going to put a space; and I am going to say style= ...and this is a complete list of all of the CSS properties that are available to you; so what do I want to do?0211

Well, I think what I am going to do is choose font-family: now, I'll type in f, and you can see, it popped me down to the f in the list; I'll double-click font-family, and it created it for me, along with the colon.0229

These code hints are here to assist you as you are creating your styles.0246

What I am going to do is use Palatino Linotype, just because it looks quite a bit different from the others.0251

I'll double-click that, and you can see, there is quite a bit of font information in there, and a semicolon.0259

The other thing I am going to do is set a color; and my color is going to be...I'll put a colon in here, and you can see, I can click that; or I can just type it in using a hex value or an RGB value.0266

I'll use a hex value, and let's do 306; now you can see, that turns out to be a purple; I'll click off of that.0282

I have a style= , and then, inside these double quotes, I have a font family as a property; I have a color as a property; and I should probably add a size.0293

Each one of these should have a semicolon after them, although if it's the last item in the list, it would still work without it.0308

Let's do font-size; now notice, once I have added one value, those code hints don't pop up, because these are inline styles.0316

Let's see, what should we do?--let's do 18; and I'll stick with pixels for now, just because that is a unit that most people can understand.0327

Ultimately, I will be changing that unit when I go to create our Wanderlust Travel site, so that it is just a little bit better for the user's system.0342

Let's take a look at this: and I'll move into Split View and click off of it, and there is my purple text with the Palatino Linotype font (if I have it).0353

Now, I have a vertical bar here between the two, and you can see, it gets somewhat difficult, because my code doesn't go all the way across.0367

If you would rather have it a horizontal tiling, you can go up to View and just uncheck Split Vertically.0377

I believe this came out around Dreamweaver CS5-ish version, and now you can adjust it; so by default it's vertical; I'll uncheck that, and you can see, now it is a little bit easier for me to show you the exact code here that we created, and that is our text that is associated with that.0386

Now, this could be a little bit bigger; so I'll just go right in here, and let me do 24 pixels instead; you can see how my font size jumped.0410

Now, let's do another one, but I am going to make this one a little bit easier for all of us; since we have all of this code, I am going to copy it, and I want to copy all the way out to the last double quote.0420

So, I will do a copy of that one, paste it inside of my p tag using a Paste, and I'll do the same thing down here.0435

I am just using Ctrl or Command+V to paste; now, I can use the same font very easily--I can simply change the color; and on this one (make sure you keep the pound sign in there)--this one I am going to make 333.0444

Just keep in mind, these are shortcuts to the color; so if I put in CSS 306, what that actually means is 33, 00, 66; and the CSS Interpreter understands that.0461

That one will be 333 also; so we should have a purple top one; and these ended up gray.0477

Now, those are a little big as paragraphs; so let's drop this one down; I'll change the number to 18 and change this one to 18.0486

Now, you can start to see how tedious this would be: if you needed to change something, I have to go into every tag on the page--and that really gets to be an issue.0497

But sometimes inline styles are needed if you want to use CSS for an e-newsletter, because email systems can't understand CSS or Javascript the way a browser can.0509

So, there are times when you may end up having to use these.0524

I'll go ahead and save that file, and there is our page, formatted and looking very different than when it started.0528

That is an inline style rule; and it's an inline CSS style rule, specifically, created directly within the tag using the style= , and then you add whatever styles you want, all within that same section.0537

We just created three separate CSS inline style rules for our page.0557

If we open up the CSS Styles panel, you will see, there are no styles defined; Dreamweaver doesn't fully support these--don't let that confuse you: only internal (embedded) or external file rules will show up here.0564

That is another downside of an inline style rule.0583

That is how you can create inline style rules, should you need to, in Dreamweaver.0587