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

Some CSS examples

From: HTML Essential Training

Video: Some CSS examples

Let's take a look at an example of a fully-functioning page formatted with CSS. Here in the Scissors directory, under Chapter 5 in your exercise files, you'll find scissors.html. I will go ahead and make a working copy of that and we'll name it -working.html. I'll open that in the text editor. I am going to page through for those of you who are typing along at home, and most of the text in here is just Lorem ipsum, so you can really put whatever you like there, and the rest of this is all pretty straightforward. You'll notice that these stylesheet links are commented out, and so when we load this up in the browser, it won't have any formatting at all, and that's what it looks like. And if we go ahead and put the stylesheets back in, save that and Reload in the browser, now we have this fully-formatted page that actually looks pretty presentable. So the point here is that we've separated the HTML from the presentation. So in the HTML file, we're mostly concerned with the content and we have all this Lorem ipsum, and we have the sidebar. We have all of the text, we have the menu and very little else, and we use the stylesheets for the presentation. So let's take a look at the stylesheets. Main.css; this is the same one we've been using throughout this course, it's really just a reset, and it just has a few styles in it to put things in a known state as a starting point for the specific CSS. And in rps.css, RPS stands for Rock, Paper, Scissors. If you notice in the HTML document that's the name of the company, Rock Paper Scissors Corporation. So in the rps.css, this is actually quite a bit longer, and I am going to page through this also for those of you who are typing along at home. Now we're going to look at this in a lot more detail. So first we set the body background color, and you notice in the document that's this brownish color out here. Then we set some defaults for the paragraph. They have a line height of 1.4 times the size of the font and color black, and we set defaults for the header elements, h1, 2, h3, h4, h5, et cetera. They all get this font and this color and these margins, and you'll notice that h2 gets a different size and a different color. Then we have our links a and a:hover, we have a clear style, and we have a formatting style for right-flushed images. Then we have formatting for figures, and that's not actually used in this example. That'll be used later on in the course, and we have formatting for the nav. The nav section is the menu at the top here and you'll notice that it goes all the way out left-to-right, and you see the width is 100% for the nav section, and if we look here in the HTML, you'll see our nav section right here and that's our menu. Id="top-menu" and you see nav#top-menu. And under top-menu with descendent selectors we're formatting ul and ul li and ul li a, and so ul is as list-style-type: none; for the unordered list, and you see our unordered list here has the links in it for the menu, and those links are in
  • elements, and so our
  • elements has margin and padding set to 0, but the rest of the formatting is all done in the a element, and you see we have the a element here and that has the actual link in it. So when we look at this in the browser, you see there is the a elements, and they are in block mode and they are 100 pixels wide, and on hover they get this bottom border set. That's not actually a text underline. That's the bottom border, and so if we look in our CSS, 100 pixels wide, font, the font color, the bottom border. You notice that I set the bottom border to be the same as the background color, and then on the hover it changes, and this makes so that the dimensions of the box doesn't change. If I didn't have this bottom border line here, then the dimension of the box would change when I hover the mouse over it. And so that's all the formatting necessary to turn that ul element into a nice menu. Moving right along, we have our header section, so we see descendent selectors for header h1 and header p and that does the formatting for the elements inside of here. The rest of it is all formatted globally like the image and the h1 and h2 and p, a lot of their defaults are set, and a few things are just changed. For this we've got a margin-top. That allows this border up here to be flushed up with the menu, setting margin-top to 0, and for the paragraph we set some other formatting so that it looks nice in this context. That's that paragraph there. Maindiv is actually outside of all of this. It starts here and if I collapse this in the editor, you see it goes all the way down to the footer. It's really all of this document, and the whole purpose of maindiv here is to give us this nice cream background that goes behind all of the elements, including the sidebar and everything. So it's really just a formatting thing, and since it's a formatting thing, it doesn't have a semantic tag. We're just using a div, and inside of that is our header and our article and our aside, and all of this, and so that's right here. We have the header, we have the article, and we have the aside, and that's actually this part right here. It's the aside. So the article gets its formatting, it's got its width, it's got its margins, it's floating left, and some formatting with descendent selectors for the headers and the paragraphs and such, and then we have the aside. And again, we have formatting for the whole aside, you notice it's got this class selector about, and that would allow me to have different asides if I wanted to. But you'll notice here we have class="about" for the aside and we're using descendent selectors again to give it this different formatting for the h1, h2, p and then the sections under the aside as well. You'll notice that inside here we have sections. We could have used class selectors for these, but this aside just has sections that are all the same, and this allows us to do some formatting specifically for those sections. You'll notice that each section has this border-top and that looks like this on the screen, so these are the sections. They have the border-top at the top of them, also lighter colored borders. And when we format the footer, it's got a background of 333. That's very dark and so it looks almost black, but not quite, it's kind of dark gray, and it's got a descendent selector for the paragraph to format that text down there, and details is something that we'll cover in another chapter. So really it's a lot of typing, but it's all very simple and all very straightforward, and all that straightforward formatting allows us to create a really beautiful page with its presentation completely distinct from the content. So we want to go in here and we want to change content. We want to add a section. If I wanted to come down here and say for example, I wanted to add a section to my aside. I am just going to duplicate this and it'll be exactly the same. We come in here and reload this document here, and we now have a whole other section. It's all formatted exactly the same and it just fits in perfectly. If I wanted to add paragraphs in the article or even to add an entire extra article, I just select all of that, I copy it, I put in another article, I give it different content, and you'll notice that we now have this whole other article down here. So it really becomes very simple to maintain this, once you separate the content from the presentation. So notice how in this example the HTML is simple and uncluttered. You can easily see where everything is and it should be easy to edit and maintain. Likewise, the CSS is clear and distinct, by separating content from presentation, the document becomes easier to read and easier to maintain.
  • Some CSS examples

    Let's take a look at an example of a fully-functioning page formatted with CSS. Here in the Scissors directory, under Chapter 5 in your exercise files, you'll find scissors.html. I will go ahead and make a working copy of that and we'll name it -working.html. I'll open that in the text editor. I am going to page through for those of you who are typing along at home, and most of the text in here is just Lorem ipsum, so you can really put whatever you like there, and the rest of this is all pretty straightforward. You'll notice that these stylesheet links are commented out, and so when we load this up in the browser, it won't have any formatting at all, and that's what it looks like. And if we go ahead and put the stylesheets back in, save that and Reload in the browser, now we have this fully-formatted page that actually looks pretty presentable. So the point here is that we've separated the HTML from the presentation. So in the HTML file, we're mostly concerned with the content and we have all this Lorem ipsum, and we have the sidebar. We have all of the text, we have the menu and very little else, and we use the stylesheets for the presentation. So let's take a look at the stylesheets. Main.css; this is the same one we've been using throughout this course, it's really just a reset, and it just has a few styles in it to put things in a known state as a starting point for the specific CSS. And in rps.css, RPS stands for Rock, Paper, Scissors. If you notice in the HTML document that's the name of the company, Rock Paper Scissors Corporation. So in the rps.css, this is actually quite a bit longer, and I am going to page through this also for those of you who are typing along at home. Now we're going to look at this in a lot more detail. So first we set the body background color, and you notice in the document that's this brownish color out here. Then we set some defaults for the paragraph. They have a line height of 1.4 times the size of the font and color black, and we set defaults for the header elements, h1, 2, h3, h4, h5, et cetera. They all get this font and this color and these margins, and you'll notice that h2 gets a different size and a different color. Then we have our links a and a:hover, we have a clear style, and we have a formatting style for right-flushed images. Then we have formatting for figures, and that's not actually used in this example. That'll be used later on in the course, and we have formatting for the nav. The nav section is the menu at the top here and you'll notice that it goes all the way out left-to-right, and you see the width is 100% for the nav section, and if we look here in the HTML, you'll see our nav section right here and that's our menu. Id="top-menu" and you see nav#top-menu. And under top-menu with descendent selectors we're formatting ul and ul li and ul li a, and so ul is as list-style-type: none; for the unordered list, and you see our unordered list here has the links in it for the menu, and those links are in

  • elements, and so our
  • elements has margin and padding set to 0, but the rest of the formatting is all done in the a element, and you see we have the a element here and that has the actual link in it. So when we look at this in the browser, you see there is the a elements, and they are in block mode and they are 100 pixels wide, and on hover they get this bottom border set. That's not actually a text underline. That's the bottom border, and so if we look in our CSS, 100 pixels wide, font, the font color, the bottom border. You notice that I set the bottom border to be the same as the background color, and then on the hover it changes, and this makes so that the dimensions of the box doesn't change. If I didn't have this bottom border line here, then the dimension of the box would change when I hover the mouse over it. And so that's all the formatting necessary to turn that ul element into a nice menu. Moving right along, we have our header section, so we see descendent selectors for header h1 and header p and that does the formatting for the elements inside of here. The rest of it is all formatted globally like the image and the h1 and h2 and p, a lot of their defaults are set, and a few things are just changed. For this we've got a margin-top. That allows this border up here to be flushed up with the menu, setting margin-top to 0, and for the paragraph we set some other formatting so that it looks nice in this context. That's that paragraph there. Maindiv is actually outside of all of this. It starts here and if I collapse this in the editor, you see it goes all the way down to the footer. It's really all of this document, and the whole purpose of maindiv here is to give us this nice cream background that goes behind all of the elements, including the sidebar and everything. So it's really just a formatting thing, and since it's a formatting thing, it doesn't have a semantic tag. We're just using a div, and inside of that is our header and our article and our aside, and all of this, and so that's right here. We have the header, we have the article, and we have the aside, and that's actually this part right here. It's the aside. So the article gets its formatting, it's got its width, it's got its margins, it's floating left, and some formatting with descendent selectors for the headers and the paragraphs and such, and then we have the aside. And again, we have formatting for the whole aside, you notice it's got this class selector about, and that would allow me to have different asides if I wanted to. But you'll notice here we have class="about" for the aside and we're using descendent selectors again to give it this different formatting for the h1, h2, p and then the sections under the aside as well. You'll notice that inside here we have sections. We could have used class selectors for these, but this aside just has sections that are all the same, and this allows us to do some formatting specifically for those sections. You'll notice that each section has this border-top and that looks like this on the screen, so these are the sections. They have the border-top at the top of them, also lighter colored borders. And when we format the footer, it's got a background of 333. That's very dark and so it looks almost black, but not quite, it's kind of dark gray, and it's got a descendent selector for the paragraph to format that text down there, and details is something that we'll cover in another chapter. So really it's a lot of typing, but it's all very simple and all very straightforward, and all that straightforward formatting allows us to create a really beautiful page with its presentation completely distinct from the content. So we want to go in here and we want to change content. We want to add a section. If I wanted to come down here and say for example, I wanted to add a section to my aside. I am just going to duplicate this and it'll be exactly the same. We come in here and reload this document here, and we now have a whole other section. It's all formatted exactly the same and it just fits in perfectly. If I wanted to add paragraphs in the article or even to add an entire extra article, I just select all of that, I copy it, I put in another article, I give it different content, and you'll notice that we now have this whole other article down here. So it really becomes very simple to maintain this, once you separate the content from the presentation. So notice how in this example the HTML is simple and uncluttered. You can easily see where everything is and it should be easy to edit and maintain. Likewise, the CSS is clear and distinct, by separating content from presentation, the document becomes easier to read and easier to maintain.

  • Show transcript

    This video is part of

    Image for HTML Essential Training
    HTML Essential Training

    82 video lessons · 98450 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.