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

Lab: Controlling basic styles

From: Up and Running with HTML

Video: Lab: Controlling basic styles

In our final lab you're going to be practicing controlling site-wide styles and writing some basic styling for our reference site. Inside the 06_07 directory, I've opened up everything. You're going to be working with the files that you've been used to working with throughout our site: the intro, links, next, reference, and syntax. But you're also going to be, this time, editing the styles.css file as well. All right, so the first thing that you'll need to do is link external style sheet site-wide, so this is going to apply to all of our pages. And what you'll need to do is in the head of each page, use the link element to link to the styles.css file.

Lab: Controlling basic styles

In our final lab you're going to be practicing controlling site-wide styles and writing some basic styling for our reference site. Inside the 06_07 directory, I've opened up everything. You're going to be working with the files that you've been used to working with throughout our site: the intro, links, next, reference, and syntax. But you're also going to be, this time, editing the styles.css file as well. All right, so the first thing that you'll need to do is link external style sheet site-wide, so this is going to apply to all of our pages. And what you'll need to do is in the head of each page, use the link element to link to the styles.css file.

Be sure to remember to define the styles.css relationship to the style sheet itself. And if you go into each one of these pages, you'll find a comment right here in the head where it says link the styles.css as a style sheet to this file. You'll see that in every single one of them so you know where to place that, just underneath it. And if you do it properly on one, you can just copy and paste it on the others. Now the next step is going to be to set the background color of the pages themselves, and this is going to apply to your styles.css.

Here you're going to go to the styles.css file, you're going to find this rule--so I'm telling you which selector look for, in this case the html, body. So that's the selector that applies to both the html and the body tag. And I want you to set its background color to this value. Now, to make life a little bit easier for you so that you don't have to keep bouncing back and forth, you'll notice if you go over to styles.css, I actually have comments put in place right above the rule that you're going to be working with that tell you kind of what to do there.

Now if you don't remember how to set that background property, you can go back and watch the previous exercises and you can pause it and look at the syntax for that. And then this is the value you're going to use for the color. Next, you're going to float some images. So I'm going to throw a couple of properties at you guys that we did not use in the previous exercises, and that's really just to sort of test the way CSS syntax is written, because if you understand the syntax and you understand how to write that syntax. you can use new properties that you've never seen before because you know where the property is going to go and you know where the value is going to go, and I'm telling you what the property is going to be and I'm also telling you what the value is going to be.

So in the styles.css, you're going to find two selectors: the .flowRight and .flowLeft. So these are class selectors. Anytime you see that period in front of a selector, that means it applies to the class attribute. So you're going to find those two class selectors there about line 98 or so. You're going to set the float property for flowRight to right, and then you're going to set the float property for flowLeft to left. Now, what that's going to do is control how the text wraps around anything with those two classes applied to it.

It's going to really control the images and how the text wraps around the images. So if I go to styles.css, scroll down to about line 98 or so, you can see that here are the two selectors right there, and here are the instructions that you have right here in this comment. Next, you're going to do some table styling. Again, we're going to go to styles.css. You're going to find the td,th selector around line 80 or so. What you're going to do here is you're going to set the padding property for that rule to 10 pixels.

What that's going to do is it's going to replace whatever attribute was passed to table with the cellpadding value. You're also going to find the center class selector. That was that when we actually applied in the earlier table exercise, which is around line 85, and you're going to set the text alignment property to center. So you may have to go back to that movie and see exactly how text alignment is written out as a property, but you want to set text alignment to center. So to find both of those, I'll go over to styles, and here we go. Set the padding of table headers and table cells to 10 pixels.

Set the text alignment of this selector to center. That's going to do it for your step-by-step instructions, but I want to challenge you to do something else. What I want you to do is go through the style sheet itself. You know, just start reading through it. It looks like there's a lot here, but I can tell you this is a very simple style sheet. It's only like 106 lines or so, and I have style sheets that are well over a couple of thousand lines. But what I want you to do is try to match up the selector that you see here with the element or elements that it's affecting on the page.

Once you do that, take a look at the styling. See if you can figure out what's happening with the properties and the values being passed to them and how it's affecting it visually. It's a really nice way of kind of connecting the dots, if you will, about to your CSS. Now first, work carefully; save your site as you modify your styles, because that's one of the bad things about styles: if you make a syntax error in your styles, it can effect all the styles underneath it. So if you're not previewing them as you go, you might miss a step. Then it's going to take a long time to find out where the error is.

Go ahead to your lab and I'll see you in our solutions movie.

Show transcript

This video is part of

Image for Up and Running with HTML
Up and Running with HTML

49 video lessons · 26073 viewers

James Williamson
Author

 
Expand all | Collapse all
  1. 2m 12s
    1. Welcome
      55s
    2. Using the exercise files
      1m 17s
  2. 29m 30s
    1. Learning HTML
      2m 47s
    2. Choosing a code editor
      5m 2s
    3. Exploring basic HTML syntax
      8m 18s
    4. Do I need to learn HTML5?
      5m 6s
    5. Exploring HTML references
      8m 17s
  3. 35m 40s
    1. Exploring an HTML document
      5m 19s
    2. Working with doctype declarations
      4m 3s
    3. Examining the document head
      8m 20s
    4. Looking at the document body
      3m 21s
    5. Adding document structure
      8m 52s
    6. Lab: Coding a basic page
      3m 9s
    7. Solution: Coding a basic page
      2m 36s
  4. 1h 23m
    1. How does HTML format text?
      5m 51s
    2. Adding headings
      7m 24s
    3. Formatting paragraphs
      4m 54s
    4. Controlling line breaks
      3m 50s
    5. Creating lists
      10m 37s
    6. Emphasizing text
      6m 42s
    7. Displaying special characters
      5m 8s
    8. Controlling whitespace
      4m 35s
    9. Inserting images
      9m 20s
    10. Lab: Controlling page content
      13m 57s
    11. Solution: Controlling page content
      10m 55s
  5. 31m 54s
    1. Linking to pages within your site
      6m 45s
    2. Linking to external pages
      3m 2s
    3. Linking to downloadable resources
      2m 25s
    4. Linking to page regions
      8m 0s
    5. Lab: Creating Links
      5m 57s
    6. Solution: Creating Links
      5m 45s
  6. 40m 27s
    1. Examining basic table structure
      5m 10s
    2. Adding content to tables
      6m 20s
    3. Setting table attributes
      7m 42s
    4. Adding table captions
      4m 3s
    5. Defining table headers
      2m 13s
    6. Making table data accessible
      5m 46s
    7. Lab: Building tables
      4m 13s
    8. Solution: Building tables
      5m 0s
  7. 43m 23s
    1. Understanding the relationship between HTML and CSS
      4m 58s
    2. Creating inline styles
      4m 53s
    3. Exploring the style element
      5m 13s
    4. Basic font styling
      9m 24s
    5. Changing color
      4m 55s
    6. Taking styles further
      5m 24s
    7. Lab: Controlling basic styles
      5m 10s
    8. Solution: Controlling basic styles
      3m 26s
  8. 5m 44s
    1. Next steps
      2m 56s
    2. Additional resources
      2m 48s

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 Up and Running with HTML.

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.