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

Styling HTML5 with CSS3

From: HTML5 First Look

Video: Styling HTML5 with CSS3

In addition to @font-face, there are many parts of CSS3 that are either widely supported or supported through proprietary properties that we can use right now. In this movie, we're going to explore some of those properties as we continue to refine the design of the page. Now, one of things I'd like to do and I'm just going to go ahead and open this up in Chrome as a way just ourselves a starting point and talk about a few things that we're going to do to our page. We're already using some custom fonts, which is nice. I want to try out this text here in this column as 2-column text to see how it would book.

Styling HTML5 with CSS3

In addition to @font-face, there are many parts of CSS3 that are either widely supported or supported through proprietary properties that we can use right now. In this movie, we're going to explore some of those properties as we continue to refine the design of the page. Now, one of things I'd like to do and I'm just going to go ahead and open this up in Chrome as a way just ourselves a starting point and talk about a few things that we're going to do to our page. We're already using some custom fonts, which is nice. I want to try out this text here in this column as 2-column text to see how it would book.

So we're going to do that. I'm also thinking about adding some dropshadows to the headlines, because what's a headline without a drop shadows? So we're going to give that a whirl. And the other thing that we're going to do is add some asymmetrical rounded corners to these boxes over here to sort of break up that boxy look and to make it look kind of maybe a little cooler. All right, so I'm going to go back in my code. And the first thing that I'm going to do is I'm going to scroll down to about line 92 or so, where my presentational styles start and just above the header styles, I'm going to go ahead and add another line there and I'm just going to type in, 2 column text styles. There we go.

And that is going to be a comment just to let me or anybody else that works with this know exactly what's going on here. And inside that I am going to type in .text2Col, open up a curly brace, hit Enter couple of times and close it, just to give myself start for this rule. Now you're probably wondering, okay, what is text2Column? So if I go back over to the source code of my trails page, I want you to notice that all of that text is in a div with the class now of text2Columns, so that's all been wrapped in this div tag. A div tag is exactly the tag you're looking for here.

You wouldn't want another section tag. You wouldn't want another article or an aside tag, because that would create a brand-new section in your document outline, so here a div tag is perfect for that. So the class text2Column, we're going to be taking advantage of that. Okay, the first thing that we're going to do is just type in column-count 2 and then below that, column-gap of 1em, and then below that text-align justify, to justify the 2 column for the text.

Now, if the CSS3 specification rule was implemented the same all over the place, that is all we would need to do, but unfortunately it's not. So we're going to go ahead to go ahead and put in some vendor specific properties. Now, we're going to do those actually above these defaults, so that the way that the cascade will work is they'll try the vendor's specific ones first, and it'll fallback to this one if it doesn't recognize those vendor specific ones. So we'll start by using Mozilla's. So to do that I'm going to type in -moz -column-count:2, and then in the next line, -moz-column-gap: 1em, and then underneath that we'll do WebKit.

So I'm going to do -webkit-column-count 2. Finally, -webkit-column-gap 1em. Now, in this entire exercise I'm also going to leave off Opera's. It's no slight to Opera. Opera has most of these properties as well. It's just a time constraint type of thing. I don't want this to go 15 minutes long, but you can go check out all the Opera proprietary comments as well.

Now, you'll notice it's exactly the same thing, so I'm hoping that in the not too distanct future Mozilla and WebKit will get rid of those prefixes so that we can just use normal CSS3 code. I'm going to save this and preview this in a WebKit browser, such as Chrome first. There are my 2 columns. It looks pretty good. It's not too bad, right? And then just to see if it's working in Firefox using the Mozilla prefixes, I am going to test it in Firefox as well and in Firefox I'm getting 2 columns as well. So that was really easy. I didn't have to use a lot of extra divs. I didn't have to do any floats, and it's going ahead and calculating it for me.

So that's really cool. That's a nice little property that you can take advantage of using CSS3. Let's check out doing some drop shadows, shall we? I am going to keep scrolling down a little bit and I am going to go down until I find this particular selector right here, which for me is on line 146 now, but it might be in a slightly different location for you. This is the header#mainHeader hgroup h1, this is our main heading obviously, and I'm just going to do a text shadow here. So directly under that I'm going to type in text-shadow. We're going to do 2 px 2 px 2 px. Now what is that? Well, this is the horizontal offset, the vertical offset, and the amount of blur.

Directly after that there we're going to do color. I'm going to do #333, because shadows are not black. An art professor told me that one time. And directly underneath that line I'm going to do filter. Now this is for Internet Explorer. The top one will work for everybody, but this is for IE. We're going to do a dropshadow filter and inside that we're going to pass a couple values as well. Color is going to =#333 and then we're going to and offset X of 2 and then we're going to offset Y of 2 as well. So very similar syntax, very simple stuff here.

I'm going to save this, preview this in any browser, let's say Chrome and now we can see our drop shadow on our Trail Guide, cool! We're going to add two more drop shadows, one for this headline, and one for that headline. So I'm going to leave Chrome and go back into my code, and we need to find those headings. So the first thing I'm going to do is scroll down and find the section#trailInfo article h1, which is right here, and I'm going to do a very similar shadow. I'm going to do text-shadow: 1 px 1 px 1 px #333.

So a little bit of a weaker shadow. Instead of 2 pixels, it's just going to be 1 pixel. We'll do the same thing, we'll do another drop shadow filter, and here again we're going to do color=#333, we are going to do an offset X=1, and an offset of Y=1. Again, copying and pasting would be very handy there and actually since I'm going to exactly the same text shadow for the next one, I'm going to go ahead and copy that. And then I'm going to scroll down until I find the aside#trailNews h1. That's the one I'm looking for now, there it is.

And at the bottom of that I am going to paste the same text-shadow. So I'm going to save that, test that. This time I am going to test it in Firefox to see how we're doing cross-browser wise. And indeed now both the Ojai Trails, the Trail News, and the Trail Guide all have those drop shadows. And you know as well as I do if you're using drop shadows, you're a real graphic designer, so I'm feeling pretty good about that. Now our final thing that we're going to do is the one that is going to take the most in terms of syntax, and that is we're going to round some corners. However, I don't want all the corners rounded exactly the same. I'm going to do an asymmetrical rounding.

This requires a lot of stuff going on, so let me show you what I'm talking about. There is a selector just below the trailNews h1, and it is this aside#trailNews .news. So this is what styling all of those boxes. We're going to go ahead and do some asymmetrical rounded corners, and instead of doing just a normal CSS3 properties first, we'll go ahead and do WebKit, then Mozilla, then those. And unfortunately, again, it takes a little bit. So we're just going to do -webkit- border-top-left-radius and we're going to do 0.

So zero pixels for that. Then we're going to do -webkit-border- and I've got code handing, so so I can't avoid using it. It's just so nice. I'm going to do -webkit-border-top -right-radius and again 0 pixels. Then I'm going to do -webkit and I'm going to do the -bottom-border-right-radius, so -bottom-border-right-radius, and here I'm going to do 20 pixels. And then finally, I'm going to do -webkit- border-bottom-left-radius and I'll do 0.

Now, I need to repeat the procedure for Mozilla, then I would need to repeat it for Opera. I'm going to skip Opera, and then we're just going to pass like the normal sort of proprietary border radius so. I'm going to move on to Mozilla now. So -moz-border and again, I'm going to take advantage of the code handing I've got here. I'm going to do -border-radius-topleft so I'm going to do -moz-border-radius-topleft and topleft is all one word. So you can see there is a difference in syntax.

Again, that's going to 0 pixels. Then I'm going to -moz-border, again, and this time I'm going to do the border-radius-topright, so border-radius-topright all one word. That again this going to be 0 pixels. Then I'm going to do -moz-border- radius and this I'm going to do bottomright. So bottomright all one word. The bottomright is. That will be 20 pixels again, in keeping with what we did above that. And we got the one more to do. -moz-border-radius.

This one is going to be the bottomleft. That's going to be 0 pixels. Now, we are finally down to just our normal border. Right, so I'm going to do -border-top-left, so I'm going to do -border-top-left-radius, and that will be 0 pixels. Then I'm going to do -border- top-right-radius: 0 pixels. Then -border-bottom-right-radius and that's going to be 20 pixels.

And finally, we're at the -border- bottom-left-radius and that is going to be 0 pixels. So we're going to go ahead and save that out. And let's go ahead and try that in a WebKit browser in Chrome and we can see now we're getting the bottom right- hand corners rounded. It looks lovely. And just to make sure that it's working as well in a Mozilla browser, we'll go to Firefox and we're getting our rounded corners there as well. That's really cool! Now, dealing with these vendor specific properties is a bit of a pain.

I will grant you that, because I just had to type all those things in. However, it does allow us to achieve some really cool styling effects. Now, keep in mind that browser support and the CSS 3 specification continues to change and evolve. So if you're going to use these, go ahead and monitor the use of those vendor specific properties with an eye on removing them when possible. So hopefully they'll sort of remove a bunch of those things and we can just go back to using what's in the standard, and wouldn't that be lovely? But it was still allow us to achieve some really cool results.

Show transcript

This video is part of

Image for HTML5 First Look
HTML5 First Look

50 video lessons · 73833 viewers

James Williamson
Author

 
Expand all | Collapse all
  1. 3m 56s
    1. Welcome
      1m 1s
    2. Using the exercise files
      1m 50s
    3. Who is this course for?
      1m 5s
  2. 21m 12s
    1. Exploring prior standards
      4m 26s
    2. Why do we need HTML5?
      3m 32s
    3. HTML5 timeline
      4m 24s
    4. Current HTML5 support
      4m 25s
    5. What HTML5 is (and what it isn't)
      4m 25s
  3. 27m 49s
    1. HTML5 vs. HTML4
      3m 25s
    2. New structural tags
      6m 1s
    3. New content tags
      4m 7s
    4. New application-focused tags
      5m 32s
    5. Deprecated elements
      4m 28s
    6. API overview
      4m 16s
  4. 22m 29s
    1. Content models
      5m 33s
    2. Understanding the outline algorithm
      3m 21s
    3. The role of ‹div› tags
      4m 20s
    4. Using ID and class attributes
      2m 6s
    5. DOCTYPE declarations
      4m 16s
    6. Character encoding
      2m 53s
  5. 41m 27s
    1. Basic page structure
      3m 40s
    2. Structuring top-level elements
      7m 30s
    3. Structuring interior content
      8m 42s
    4. Building headers
      9m 11s
    5. Checking document outlines
      5m 46s
    6. Ensuring cross-browser structure
      6m 38s
  6. 27m 53s
    1. New input types
      5m 57s
    2. Setting form autofocus
      2m 53s
    3. Using placeholder data
      4m 4s
    4. Marking required fields
      3m 24s
    5. Working with number inputs
      5m 49s
    6. Using date pickers
      5m 46s
  7. 1h 1m
    1. Canvas overview
      6m 21s
    2. Adding canvas content
      8m 58s
    3. Drawing in the canvas environment
      12m 9s
    4. Drag-and-drop API overview
      6m 18s
    5. Offline applications overview
      7m 11s
    6. Video overview
      5m 45s
    7. Encoding video
      8m 23s
    8. Adding video
      5m 58s
  8. 57m 33s
    1. Geolocation API overview
      5m 50s
    2. Web storage API overview
      5m 40s
    3. WebSockets overview
      4m 16s
    4. CSS3 overview
      6m 38s
    5. Enhancing typography with CSS3
      7m 42s
    6. Using @font-face
      7m 11s
    7. Styling HTML5 with CSS3
      10m 23s
    8. Using CSS3 transitions
      9m 53s
  9. 5m 6s
    1. Final thoughts
      3m 49s
    2. Goodbye
      1m 17s

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 HTML5 First Look.

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.