Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member

Hand-coding styles

From: Managing CSS in Dreamweaver

Video: Hand-coding styles

If you only use the visual tools in Dreamweaver, you're really only using half the program. Now, I know that some designers are a bit hesitant to start coding on their own, but in reality CSS is incredibly easy to learn, and Dreamweaver's coding tools make it the fastest way to create your styles. In this movie, we'll take a brief tour of Dreamweaver's coding environment and start coding by writing a simple CSS Rule. If you're familiar with coding CSS, and just want to see how Dreamweaver's coding environment works, stick around. We'll be covering some of that as well. I'm just going to go ahead and create a brand-new CSS file because we really don't have one attached to the page yet.

Hand-coding styles

If you only use the visual tools in Dreamweaver, you're really only using half the program. Now, I know that some designers are a bit hesitant to start coding on their own, but in reality CSS is incredibly easy to learn, and Dreamweaver's coding tools make it the fastest way to create your styles. In this movie, we'll take a brief tour of Dreamweaver's coding environment and start coding by writing a simple CSS Rule. If you're familiar with coding CSS, and just want to see how Dreamweaver's coding environment works, stick around. We'll be covering some of that as well. I'm just going to go ahead and create a brand-new CSS file because we really don't have one attached to the page yet.

So I'm just going to go to File and choose New. From the New Document dialog box, I'm going to go down to Blank Page and choose CSS, and go ahead and create it. So here we just have an empty CSS file. I'll go ahead and save it, and I'm going to save it in the 01_08 CSS directory, and I'll just save it as main.css. Now, I could go ahead and start coding here, but I kind of like working with my HTML and my CSS files sort of side-by-side. So I'm going to close this document and go back to Resources.

I'll go over to my CSS Styles panel. The CSS Styles panel is sort of the central nervous system of working with styles in our sites. I'm just going to go right down here to the bottom and choose Attach Style Sheet. I'm going to go ahead and browse, and I'm going to browse to 01_08/_css and find the style sheet that we just created, click OK and for Media, I'm going to go ahead and type in screen,projection. So you can grab from the pulldown menu, or you can go ahead and type in comma separated Media types if you want to apply more than one.

We're just going to do Link. Click OK. Now, our main.css is attached, even though the style sheet is still empty. So why didn't I'd want to just start hand-coding directly in the CSS Style Sheet? Why did I go through the process of attaching it to the sheet? Well, inside Dreamweaver we have what's known as Related Files, and you can see that now that we've attached the CSS Styles Sheet to this page, I'm just going to go ahead and save my page, you see right below the tab, there is main.css, and all I have to do to view that is click on that, and it goes in and opens that up. Now, I'm going to switch to the Code environment, so that I can see nothing but my CSS, even though I'm still working on resources.htm.

So this allows me to switch back-and- forth between Design and Code, and I can visualize those changes that I'm making. I can also do a Split Screen view where I see the Design view on this side and the Code view on this side. It's a very efficient way of working with both your code and your page. You can sort of see those changes you're making all at once. Okay. Well, let's take a brief tour of the coding environment. Now, over here on the left-hand side, we have a brand-new toolbar. This is a Coding toolbar, and this has some really interesting things. It allows us to collapse Tags and expand those Tags, select Parent Tags, and that's all well and good for working with HTML, but it doesn't do a whole lot of good for us with CSS.

Now, we do have Line Numbers that we can turn on and off, so all these icons refer to something within your code. You can highlight invalid code. You can do word wrap, in case you have long strings of code. You can wrap your code in a comment, or you can delete a comment. Notice that I don't have quite enough screen real estate to show everything, so I click this little Show More section, and I can do things like Move or Convert CSS. So I can convert inline CSS to an external rule. I can move CSS Rules from one sheet or one page to another. I can indent code, and I can apply other formatting which we'll take a look at in just a moment.

I'm going to place my cursor right below the character set encoding option and the comment for CSS Document. By the way, these are all optional. You don't have to use them. You can use your own comments. You don't have to add the encoding characters here, but that's just something that Dreamweaver puts in by default. So we're going to write our first selector, and the first thing we want to do is just to control the body tag. Go ahead and set some defaults for our page. So I'm going to type in "body" for the selector. Now, Dreamweaver is not going to help you write your selectors. You're going to have to know what selector it is you're writing.

In this case, we're writing an element selector, and we're controlling the body tag. Then I'm going to open up a curly brace. Now, notice that the moment I open up curly braces, we get something that's known as Code Hinting and Code Completion. We're going to take a closer look at that a little bit later on. Now, if I hit Enter or Return, it will return me to the next line, but notice that it indents for me. It's basically following the rules that I've set up for in my code formatting, and we set that earlier in the movie on Preferences. I'm going to type in an m and notice that it jumps right down to Margin. So if that's what I want and in this case it is what I want, I can just hit Return, and it finishes typing it for me.

I'm going to type in a 0 for no margin and a semicolon, and that property and value are done. You can see how fast that is. Now, I'm going to hit Return to go down to the next line, and I'm going to type in padding. I want to type in the whole thing because this is a better way to learn the syntax. So I'm going to type in padding, then type in a colon. So your properties and your values are separated by a colon. I'll type in a 0 again and then a semicolon padding: The semicolon basically ends the line. It says, okay I'm done with this one, and I want to move on to the next one. Watch what happens when you leave it off. I'm going to remove the semicolon, hit Return to go down to the next line.

Now, in the next line, notice that we're not getting our code hinting anymore; we're getting values for the previous property, because we haven't closed it yet. Then I can type in the word font, but watch what happens. You notice that font has not changed color. It's still that sort of light blue that I set earlier. Now here, if I type in font:, I'm not getting any code hinting whatsoever. So Dreamweaver is giving us all sorts of clues that our syntax is currently wrong. I'm going to type in 100% and then a space, then type in Georgia, "Times New Roman" three words, Times, serif.

Now here, I'm going to go ahead and type in a semicolon, hit Return and finish by closing my curly brace. Now, you might say well, you know, is this going to work? Actually, a lot of browsers will render that correctly, but it's a really good idea to go ahead and put the semicolon back in. Notice as soon as I do that, Dreamweaver tells me okay, yes, that's okay, because it gives me the code coloring to let me know that that syntax is correct. Now, that's not the only way that you can write your CSS styles. I have each property on a separate line because it really helps me read that. But there is nothing saying you have to do that. If I go down to the next line and type in h1 and open up a curly brace, notice that I could say font-size: 2em for 2 ems, and I could type in a semicolon, and on the very same line I can just type in color and then do #193742, another semicolon.

So 193742, and I can do margin-bottom: .4em and then a semicolon. And on that very same line, I can close my curly brace, so this syntax is exactly the same as this syntax. It all has to do with readability. The machine doesn't care whether it's on the same line or whether it's on a separate line. So this is a little bit easier for us to read, but this rule will work just fine. In fact, it would save you a little bit of space when you go to deploy your styles, and we'll talk more about that a little later on in the title.

Now, what happens if you get a mixture? Maybe you've written it; maybe someone else has written it. You have some rules are formatted one way. Some rules are formatted another way. Well, that's where our Code Format Preferences come into play. Just to review those really quickly, if I go up to Edit and choose Preferences, that would be Dreamweaver Preferences on the Mac, I can go to my Code Formatting, click on the CSS button, and I get all these different properties that I can set and a preview of how my styles are going to be written, and that, of course, is if Dreamweaver writes them for me. But what's nice about that is Dreamweaver remembers those preferences.

So if I come down here to my Coding toolbar, click on Show More, and I go right here to this little paint bucket where it says Format Source Code, I can say Apply Source Formatting and notice it goes ahead and converts the rule that we just created to being from one line to multiple line. So at any point, if you're coding and you want to go ahead and change all of your rule formatting all at once, rather than having to do that all by hand and going there and hit Return or move everything to one line, you can just change your Preferences, hit that, and it's going to go ahead and switch it for you, which is really cool. So hand-coding your styles does require you to understand how to write the desired selector.

You have to know which properties you can set for that particular selector and which values are accepted by those properties. So in short, if you want to hand-code, you need to know CSS; however, as we'll see in our next movie, code hinting and code completion make this process much easier and can assist designers that are new to writing CSS by hand.

Show transcript

This video is part of

Image for Managing CSS in Dreamweaver
Managing CSS in Dreamweaver

41 video lessons · 20804 viewers

James Williamson
Author

 
Expand all | Collapse all
  1. 4m 12s
    1. Welcome
      1m 10s
    2. Who is this course for?
      1m 5s
    3. Using the exercise files
      1m 57s
  2. 1h 21m
    1. Controlling CSS in Dreamweaver
      2m 34s
    2. Style formatting options
      4m 59s
    3. Controlling shorthand notation
      6m 9s
    4. Building a style-focused workspace
      6m 10s
    5. CSS Styles panel overview
      8m 18s
    6. The Properties Inspector
      6m 39s
    7. Creating styles visually
      11m 32s
    8. Hand-coding styles
      8m 15s
    9. Code hinting and code completion
      7m 11s
    10. Modifying styles visually
      5m 24s
    11. Using the Code Navigator
      4m 47s
    12. Using CSS Inspect
      9m 52s
  3. 1h 14m
    1. Structuring style sheets
      4m 52s
    2. Writing a style header
      2m 40s
    3. Building a color guide
      6m 5s
    4. Writing a style sheet table of contents
      8m 46s
    5. Creating sections for styles
      9m 10s
    6. Using the CSS Styles panel to organize styles
      10m 29s
    7. Resolving conflicts
      7m 3s
    8. Organizing style properties
      9m 33s
    9. Writing a CSS reset
      5m 20s
    10. Writing global classes
      3m 57s
    11. Creating a style guide
      6m 6s
  4. 1h 7m
    1. Preparing custom starter pages
      11m 32s
    2. Building custom starter pages
      10m 8s
    3. Working with code snippets
      9m 54s
    4. Writing snippets
      11m 30s
    5. Importing snippets
      6m 3s
    6. Understanding snippets libraries
      8m 11s
    7. Building a CSS framework using snippets libraries
      10m 36s
  5. 52m 15s
    1. Writing a print style sheet
      10m 3s
    2. Creating print-specific styles
      10m 45s
    3. Preparing modular styles
      4m 33s
    4. Creating modular style sheets
      7m 9s
    5. Checking browser compatibility
      6m 25s
    6. Using conditional comments for Internet Explorer
      6m 58s
    7. Optimizing CSS with Dreamweaver
      6m 22s
  6. 38s
    1. Goodbye
      38s

Start learning today

Get unlimited access to all courses for just $25/month.

Become a member
Sometimes @lynda teaches me how to use a program and sometimes Lynda.com changes my life forever. @JosefShutter
@lynda lynda.com is an absolute life saver when it comes to learning todays software. Definitely recommend it! #higherlearning @Michael_Caraway
@lynda The best thing online! Your database of courses is great! To the mark and very helpful. Thanks! @ru22more
Got to create something yesterday I never thought I could do. #thanks @lynda @Ngventurella
I really do love @lynda as a learning platform. Never stop learning and developing, it’s probably our greatest gift as a species! @soundslikedavid
@lynda just subscribed to lynda.com all I can say its brilliant join now trust me @ButchSamurai
@lynda is an awesome resource. The membership is priceless if you take advantage of it. @diabetic_techie
One of the best decision I made this year. Buy a 1yr subscription to @lynda @cybercaptive
guys lynda.com (@lynda) is the best. So far I’ve learned Java, principles of OO programming, and now learning about MS project @lucasmitchell
Signed back up to @lynda dot com. I’ve missed it!! Proper geeking out right now! #timetolearn #geek @JayGodbold
Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

Please wait... please wait ...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ.

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

Join now "Already a member? Log in

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed Managing CSS in Dreamweaver.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferencesfrom the dropdown menu.

Continue to classic layout Stay on new layout
Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.

Are you sure you want to delete this note?

No

Your file was successfully uploaded.

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.