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

Applying style

From: HTML Essential Training

Video: Applying style

Generally speaking, formatting text and other elements is best accomplished with CSS. This course is really about HTML, but for better or worse, HTML has abandoned many of its formatting and presentation features and has become dependent upon CSS for these capabilities. There's a brief primer on CSS later in this course and I have a more complete course on this subject in the lynda.com online training library called CSS for Developers, but at this point there are a few things you need to know about CSS and styles.

Applying style

Generally speaking, formatting text and other elements is best accomplished with CSS. This course is really about HTML, but for better or worse, HTML has abandoned many of its formatting and presentation features and has become dependent upon CSS for these capabilities. There's a brief primer on CSS later in this course and I have a more complete course on this subject in the lynda.com online training library called CSS for Developers, but at this point there are a few things you need to know about CSS and styles.

Let's start by making a working copy of style.html and I'll name my copy as style-working.html. I am going to open it in my text editor, and I am going to go ahead and also open it in my browser, and there we have, side-by-side, we have the text editor on the left here and you notice I have Line Wrapping on, and so we can see all of this. And we have same document opened in the browser, and you notice that the browser is displaying this document.

It's just got a header and a couple of paragraphs and it's displaying it with all of its default styling, its default formatting for the browser. We haven't added any style to this yet. So we'll go ahead and add some style, and so here in our exercise files in the Chap02 folder we have a file called main.css. I am going to open that in my text editor as well. I am just going to show it to you real quick. It's a pretty simple stylesheet. It basically just resets things so that they have a different set of defaults, but a more consistent set of defaults than those of the browser.

This way it will display the same way in a number of different browsers on a number of different platforms. So if I want to link that stylesheet in I come in here in my HTML document and in the head section I am going to put it right after the title element. I am going to type link rel="stylesheet" type="text/css" href="main.css" and I'm going to close the element with the shortcut for an empty element.

I am going to save that. So the most common way for an HTML file to incorporate styles is to link to an external CSS stylesheet. And this link tag is the way that that's done. So the link tag goes in the head section, inside of the head element and that's the syntax. The rel attribute has stylesheet, which tells that the relationship between this document and the document that's being included is that it's a stylesheet. And the type is text/css which is the Mime type for CSS.

You just always going to use that string for type. And href refers to where the location of the file is, and in this case it's main.css in the same folder as the style-working.html file. So we'll save that and then we are going to bring up the browser and press Reload, and you see that our document now changes in it. Now it has the style from the stylesheet. So you see the text is in a different font and the header is in a different font, and that's because it's using this stylesheet.

Now for some purposes it may be more convenient to put the stylesheet within the document. You can do this with the style element also within the head. So I am going to go ahead and I am going to take out this link and I am going to say style and close style. So we have a style element that's a container and inside of here I am just going to say p and color: green. And again, we'll learn more about CSS later on in this course and there are other courses on lynda.com that teach you about CSS.

So if I go ahead and save this and reload in the browser, you'll see that we're back in the original formatting except that now these paragraphs are green because I told it that all of the p elements will have green text. Now instead I can say that the h1 elements should have green text, and so I just change that to h1, and I save this, and reload in the browser, and you see now the heading has green text. Or I am going to go ahead and put that back to the p element, sometimes it's more convenient to apply the style to an individual element.

So you can use the style attribute for this. if I come down here to the h1 element and I say style= and I can say color and make it blue, and if I save that and reload, now the header is blue and all of the other text in the paragraphs is green. On the other hand, and I am just going to undo that for a moment, you may want to apply a style to a number of elements, so you can use the class attribute like this. Come up here and I'm going to just change this and I am going to say .blue and color all in blue like that, and all elements support the style and class attributes.

So I can just come down here and I can say class="blue" like that, and I can maybe do the same on the h1. I can say class equals blue, and it will apply this style. It's named blue with a dot, the dot is a class selector. So whenever we use class, it matches with anything with the dot that has the same name, so that's blue and this is blue and this is blue. So when I save this and come over here to the browser and reload, we see that we get the header and that first paragraph are in blue. On the other hand, you may want to style just a particular element.

So I am going to come in here and I am going to use an ID selector which is the pound sign and I am going to say x01. What an ID selector does, let me give this a font-style of italic and save that. What an ID selector does is it allows you to select an individual element; an ID selector can only be applied to one element, whereas class could be applied to a number of different elements. So this is class blue and this is class blue. If I have an ID that says x01, only one element in the entire document can have that ID.

So here I say id=x01 and when I reload this that paragraph is still blue because it's got the class="blue," but it now has italic because it's that id="x01" which is only that element and it's set to italic. So I am going to go ahead and I am going to remove all of these styles, and I am going to save the document. I am going to show you a couple of special tags that are designed to allow style to be applied to ranges of a document. So the div tag, I am just going to come up here and I am going to say div.

The div tag is a block level element. I am going to end it down here. So all of these elements inside of this div are going to be part of the div element now and I can just say style="color: blue". And now I am applying a style to a block of the document. So div is a block level element. I'm going to Save that and reload here in the document, and you can see we have blue there and blue there. We'll cover more about what block level and inline level means later on in the course, but for now you'll want to see the div and span; span is the inline level version of this, are commonly used for applying style.

And I am going to take this text and I am going to put that within a span tag. I am going to say style="font-style: italic" and close the span here. So span is inline level, so you can put it in the middle of a paragraph, whereas with div, which is block level, you cannot. So if I save that and reload over here, you'll see that those words, wrapped at the margins and with a blank line separating the--are now in italic. So we'll learn more about block and inline level elements later on in this chapter.

Applying style with CSS is a fundamental skill for HTML documents these days. As you can see, HTML has a flexible set of features for supporting CSS styles.

Show transcript

This video is part of

Image for HTML Essential Training
HTML Essential Training

82 video lessons · 100984 viewers

Bill Weinman
Author

 
Expand all | Collapse all
  1. 5m 24s
    1. Welcome
      56s
    2. Using the exercise files
      1m 37s
    3. What you need to know about this course
      2m 51s
  2. 22m 0s
    1. What is HTML?
      4m 12s
    2. Examining the structure of an HTML document
      7m 50s
    3. Understanding tags and containers
      6m 4s
    4. Exploring content models in HTML5
      2m 23s
    5. Looking at obsolete elements
      1m 31s
  3. 27m 19s
    1. Understanding whitespace and comments
      3m 53s
    2. Displaying text with paragraphs
      3m 37s
    3. Applying style
      8m 5s
    4. Using block and inline tags
      6m 34s
    5. Displaying characters with references
      5m 10s
  4. 16m 36s
    1. Exploring the front matter of HTML
      2m 9s
    2. Applying CSS to your document
      3m 59s
    3. Adding scripting elements
      4m 54s
    4. Using the meta tag
      3m 34s
    5. Optimizing your page for search engines
      2m 0s
  5. 24m 59s
    1. Controlling line breaks and spaces
      2m 46s
    2. Exploring phrase elements
      1m 44s
    3. Using font markup elements
      1m 5s
    4. Highlighting text with mark
      1m 29s
    5. Adding headings
      1m 38s
    6. Using quotations and quote marks
      3m 2s
    7. Exploring preformatted text
      1m 45s
    8. Formatting lists
      2m 28s
    9. Forcing text direction
      3m 49s
    10. Suggesting word-break opportunities
      2m 29s
    11. Annotating East Asian languages
      2m 44s
  6. 29m 15s
    1. Introducing CSS
      55s
    2. Understanding CSS placement
      6m 55s
    3. Exploring CSS syntax
      10m 34s
    4. Understanding CSS units of measure
      3m 3s
    5. Some CSS examples
      7m 48s
  7. 22m 5s
    1. Using images
      4m 13s
    2. Flowing text around an image
      4m 55s
    3. Breaking lines around an image
      3m 3s
    4. Aligning images
      5m 25s
    5. Mapping links in an image
      4m 29s
  8. 22m 28s
    1. Understanding URLs
      2m 41s
    2. Working with hyperlinks
      3m 28s
    3. Using relative URLs
      4m 20s
    4. Specifying a base URL
      2m 19s
    5. Linking within a page
      4m 12s
    6. Using image links
      5m 28s
  9. 17m 2s
    1. Exploring list types
      3m 52s
    2. List elements in depth
      7m 44s
    3. Using text menus with unordered lists
      5m 26s
  10. 15m 30s
    1. Introduction to HTML semantics
      4m 9s
    2. Exploring an example
      4m 56s
    3. Marking up figures and illustrations
      2m 33s
    4. Creating collapsible details
      3m 52s
  11. 11m 18s
    1. Embedding audio
      5m 19s
    2. Embedding video
      5m 59s
  12. 11m 53s
    1. Creating ad-hoc Document Object Model (DOM) data with the data-* attribute
      4m 53s
    2. Displaying relative values with meter
      2m 57s
    3. Creating dynamic progress indicators
      4m 3s
  13. 4m 49s
    1. Overview of HTML5 microdata
      1m 8s
    2. Exploring an example with microdata
      3m 41s
  14. 7m 3s
    1. Understanding outlines
      52s
    2. A demonstration of outlining
      6m 11s
  15. 13m 1s
    1. Table basics
      7m 29s
    2. Exploring the semantic parts of a table
      2m 32s
    3. Grouping columns
      3m 0s
  16. 9m 55s
    1. Frames overview
      54s
    2. Using traditional frames
      4m 26s
    3. Exploring inline frames using iframe
      2m 7s
    4. Simulating frames with CSS
      2m 28s
  17. 53m 7s
    1. Introducing forms
      10m 24s
    2. Using text elements
      10m 12s
    3. Using checkboxes and radio buttons
      2m 37s
    4. Creating selection lists and dropdown lists
      5m 14s
    5. Submit and button elements
      8m 48s
    6. Using an image as a submit button
      2m 15s
    7. Keeping context with the hidden element
      3m 0s
    8. Setting tab order
      2m 7s
    9. Preloading an autocomplete list using the datalist feature
      5m 26s
    10. Displaying results with output
      3m 4s
  18. 19m 47s
    1. Touring a complete site
      2m 14s
    2. Touring the HTML
      8m 44s
    3. Touring the CSS
      8m 49s
  19. 29s
    1. Goodbye
      29s

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.

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 HTML Essential Training.

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.