Start learning with our library of video tutorials taught by experts. Get started

CSS3 First Look

Writing styles for target screen sizes


From:

CSS3 First Look

with James Williamson
Expand all | Collapse all
  1. 3m 5s
    1. Welcome
      1m 20s
    2. Using the exercise files
      1m 45s
  2. 31m 30s
    1. What is CSS3?
      5m 26s
    2. The current status of CSS3
      3m 35s
    3. An overview of CSS3 capabilities
      2m 24s
    4. Can you use CSS3 now?
      5m 31s
    5. Detecting support for CSS3
      9m 0s
    6. Understanding vendor prefixes
      5m 34s
  3. 1h 9m
    1. An overview of child and sibling selectors
      3m 11s
    2. Using child and sibling selectors
      7m 17s
    3. An overview of attribute selectors
      3m 19s
    4. Using attribute selectors
      8m 32s
    5. Pseudo-class UI selectors
      5m 56s
    6. Negation pseudo-class selectors
      6m 48s
    7. Target pseudo-class selectors
      5m 39s
    8. Structural selectors
      3m 58s
    9. Nth-child selector syntax
      10m 0s
    10. First, last, and only structural selectors
      5m 39s
    11. Using structural selectors to write more efficient code
      8m 52s
  4. 45m 28s
    1. Color formats in CSS3
      7m 9s
    2. Transparency in CSS3
      9m 10s
    3. CSS3 gradients
      4m 11s
    4. Creating linear gradients
      13m 57s
    5. Creating radial gradients
      11m 1s
  5. 49m 8s
    1. Working with web fonts
      6m 38s
    2. @font-face syntax
      4m 52s
    3. Downloading sample fonts
      6m 5s
    4. Writing @font-face declarations
      7m 57s
    5. Using web fonts
      6m 42s
    6. Using text shadows
      7m 14s
    7. Creating multi-column text
      9m 40s
  6. 50m 55s
    1. An overview of the flexible box model
      4m 42s
    2. Controlling box orientation
      5m 2s
    3. Setting element flexibility
      12m 59s
    4. Distributing boxes
      7m 54s
    5. Controlling box alignment
      12m 38s
    6. Working with box-sizing
      7m 40s
  7. 1h 5m
    1. Using border-radius
      6m 20s
    2. Creating custom rounded corners
      10m 21s
    3. Understanding border images
      5m 15s
    4. Using border images
      8m 52s
    5. Creating box shadows
      8m 58s
    6. CSS3 backgrounds
      4m 55s
    7. Controlling background size
      8m 46s
    8. Creating multiple background images
      6m 4s
    9. Using background-origin
      3m 18s
    10. Clipping background content
      3m 2s
  8. 40m 8s
    1. An overview of CSS3 2D transforms
      4m 26s
    2. Using 2D transforms
      8m 16s
    3. Setting transform origins
      5m 24s
    4. An overview of CSS3 transitions
      5m 0s
    5. Animating CSS properties
      6m 12s
    6. Using easing in animations
      5m 41s
    7. An overview of 3D transforms
      5m 9s
  9. 37m 56s
    1. Understanding media queries
      6m 18s
    2. Strategies for targeting multiple devices
      6m 4s
    3. Writing styles for target screen sizes
      12m 11s
    4. Deploying styles through media queries
      3m 55s
    5. Basing media queries on page orientation
      2m 24s
    6. Targeting media queries for iOS devices
      7m 4s
  10. 1m 6s
    1. Goodbye
      1m 6s

Video: Writing styles for target screen sizes

In this movie, we're going to focus on writing styles for our tablet style sheet. While time constraints prevent us from writing the entire style sheet, I want to focus on two very important regions, the menu and the sidebar content. Both will need to change in order for our site to display properly at the smaller screen size. Styling these areas should give you a good idea of how to tackle your own layout conversions. So I have the tours.htm from the 08_03 folder. We'll also be working with main.css, which can be found in the same directory.

Watch this entire course now—plus get access to every course in the library. Each course includes high-quality videos taught by expert instructors.

Become a member
Please wait...
CSS3 First Look
6h 34m Appropriate for all Nov 29, 2010

Viewers: in countries Watching now:

In CSS3 First Look, staff author James Williamson provides an in-depth introduction to the newest CSS standard, detailing its modular format, history, and current level of browser support, while also demonstrating its capabilities and applications. The course includes tutorials on using new selectors, modifying typography and color, working with the box model, and understanding media queries. Exercise files accompany the course.

Topics include:
  • Understanding the history of CSS3
  • Working with the new selectors
  • Adding transparency and gradients
  • Specifying web fonts with @font-face
  • Understanding the advances to page layout
  • Looking at CSS3 box model capabilities
  • Using 2D and 3D transforms
  • Understanding media queries
Subject:
Web
Software:
CSS
Author:
James Williamson

Writing styles for target screen sizes

In this movie, we're going to focus on writing styles for our tablet style sheet. While time constraints prevent us from writing the entire style sheet, I want to focus on two very important regions, the menu and the sidebar content. Both will need to change in order for our site to display properly at the smaller screen size. Styling these areas should give you a good idea of how to tackle your own layout conversions. So I have the tours.htm from the 08_03 folder. We'll also be working with main.css, which can be found in the same directory.

Okay, the first thing I'm going to do is add a link to my tablet style sheet. So I am just going to go ahead and copy the link tag to the existing style sheet. I am going to pass in _tablet.css and again I'm going to leave its media type for the moment, screen and projection. Now later on we are going to do some media queries. The reason that I would do this is because the order that these are coming in means that the tablet style sheet will for the moment overwrite the main styles when they conflict.

That means that when I test it in the browser, I am not going to have to do any resizing to see what size it is, that sort of thing. I'm just going to be able to view it in the browser and see exactly what's going on with my styles. Then I can load up the media queries and start filtering those results after I'm happy with the conversion. Now there are lot services out there like Adobe's BrowserLab and even Dreamweaver has a nice little Preview Multiple Screens feature that will show you what your web page looks like at multiple sizes if you are using media queries. There are a lot of other programs out there too that have that type functionality, but you're not using one of them, this is sort of a nice little down and dirty technique of previewing that particular screen size before you add your media queries.

Okay, now I'm going to save this file and I am simply just going to refresh my site for a second here so that it will grab my tablet reference. If not, remember you can open up that tablet.css file from 08_03. All right, I'm going to switch over to the tablet. Now as before you could see it's not as large a style sheet. Now when I'm doing this, if there's a selector that I know that needs to be overwritten maybe it's for positioning purposes or just stylistic purposes or maybe I need to change its size, I am actually going to copy and paste the entire selector here instead of just a line or two that I need.

Now that may seem confusing to you at first, but the thing is when I am overwriting styles if I don't copy and paste the whole selector here, I often forget that I have 20 pixels of margin on it and I need to overwrite that 20 pixels of margin. So there have been plenty times we will go somewhere and start messing around with the layout and I am like aah! Just forgot that I had a padding applied to the other style sheet. So that's a really quick and easy way to know whether or not you need to overwrite something. All right! Now as I mentioned we are going to focus on those two areas, the main navigation and the sidebar. I'm going to scroll down to about line 55 and here we have a selector for our main nav.

Now that's going to change at a very-very big way. It's going to go from this vertical menu on the left side of the screen to a horizontal menu in the upper right-hand corner. So that's going to require a lot of change. I am going to leave a left float, believe it or not on that, but for width I am going to change the width to 473 pixels. Essentially, it's going to appear to the right of where the header is positioned, so I've calculated how much available space I have in that area. I'm also going to change its height. I'm going to give it a height of 40 pixels. That's going to help me overwrite that.

I am going to change some margins here as well. I'm going to change the margin-top to 50 pixels and then underneath that I'm going to add a margin-left and give that a margin-left of 272 pixels. That's going to allow me to clear the header graphic, which is actually being absolutely positioned and sort of floating over that. So it's just going to allow me to clear it and butt right up against the edge of it. Or at least it's going to make it appear like I am butted right up against the edge of it. All right! For my background, I'm going to change this too. I am going to change it to #51341a, sort of a dark brown color.

So since this is going to be a horizontal menu, giving it this background color is going to give me a nice solid color behind the entire menu and it's just going to make that little easier for me to do. Then finally, I'm going to do a margin- bottom - I guess I could have done some shorthand notation there - of 150 pixels. So that's going to keep the other elements away from it and keep those pushed out. So I'm going to go ahead and save that and since I'm in the area, I'm going to go ahead and change little something on my sidebar layout div tag as well. I have got the layout tags separated from the main content styling.

That way if I need to make any changes to layout, it's a little easier for me to get to these. So I'm going to change the sidebar width to 700 pixels. That's actually the width of the entire screen size now for our tablet size. Most tablets are in the 750 to 768 pixel range. So I am just making that a little bit smaller than what the edge of the screen is going to be. So again sidebar is now going to expand to fill the entire width of the wrapper. Now I'm going to keep the floats and the clears. Now the reason I am going to do that is because the interior content, those two callouts, are going to be floated for their positioning and by keeping the sidebar float, I will contain those floats and the sidebar will still contain those two elements and that's exactly what I want there.

Okay, let's keep going down. We are going to affect our menu now. So I'm going to scroll down and find ul#baseNav, which is here on line 90. Now, again ul#baseNav is the base navigation for the site and it's the unordered list that contains the actual menu itself. So here, I'm going to again make some pretty big changes to this. Number one, I'm going to change the bottom-margin to zero. Again, I don't want to just delete that line of code. I want to overwrite the other margin bottom, so I'm going to set that to 0. We simply don't need that.

Then for the ul#baseNav li, the one right below that, these are the individual list items, I want them to appear horizontally. So what I'm going to do is I'm going to add to those guys a float: left, so that's going to stack them in a horizontal line. If you've ever created a horizontal menu, you know exactly what I'm doing here. All right, I want to go down and find my links that are inside these individual list items. I'm going to keep their display as block, but I'm going to change almost everything else. I'm going to change the width to 90 pixels.

I'm going to add a line-height to this and the reason I am adding a line-height of 40 pixels is to sort of vertically center that text within these guys. Then I'm going to change their color. I'm going to give them a color of #fff. That will make them white obviously and then for text-align I'm going to do a text-align of center as well to help me center them within their block level elements. Now another thing that I'm going to need to change is the text-indent here.

I'm going to need to change this text-indent. The text-indent is 1000 ems right now. I'm going to change that to 0 pixels. I'm also going to go ahead and get rid of the height property altogether. That's one that I'm not really that concerned about overwriting. My line-height is going to give me, not quite center text, but to really where I want it. So I'm going to leave the height at 60 pixels. I'm not going to overwrite that. Okay, we are almost done. I know we've got a lot to do here, but we're getting there. If you want, you can always just sort of save and test this in the middle of it, only-- there is a lot of bad stuff going on here.

So that's one of the reasons why we haven't saved and tested it yet and then of course down here on our sidebar that doesn't look like the way we want it yet either, but we are getting there. I promise you that we are making progress. So the next thing we need to do is I need to get rid of those background images that we were seeing. So I'm going to write a brand-new selector just below my existing one, the one we were just working on. I'm going type in #wrapper #mainNav ul#baseNav. Remember that's the menu that we were working with right now. li a.

Now why in the world did I write such a long selector? Well specificity, I want to make sure and that's why I added the wrapper to this that this is going to overwrite any of those existing class selectors on that link. Let me explain. The background graphics that you are seeing are unique to every single link. Every link has a class that identifies it and then that class is in use to write a selector that goes and grabs the proper background image. I need to overwrite that. I really don't feel like doing or rewriting five or six of these selectors. So I'm going to do a very-very specific selector with a higher degree of specificity than the class selectors that the other style sheet is using and I'm just going to very easily say background equals none.

So that's a much more efficient way of doing that, using specificity rather than worrying about rewriting that selector six or seven times. All right, I have got a couple more rules that I need to finish here and we'll be done with our navigation. This ulbaseNav li a.current and current:hover, that's going to indicate the current page that we're on and it's going to look a little bit different than the rest of our navigation. So what we want to do for that we're going to leave border: none. I am going to change the color of this. I am going to give it a color. The color is going to be #952 and I'm just going delete the background-position because that doesn't matter. We don't have backgrounds on it anymore.

I'm going to go down to the hover. I'll get rid of the background-position there as well and there I want to do a color and I'm going to do #cb7d20. All right, let's save that. We're going to test this in our browser. So in previewing this, you know I don't mind that menu sticking out like that. It looks kind of cool. We could even put a little badge right here if we wanted to. That would be nice, but the problem is that is not where I want it. So sometimes there is a little trial-and-error here.

Obviously, I got the left margin on the wrong, so I'm going to close this, go back into my mainNav selector and indeed, I think I even called out 227 pixels, but I wrote it as 272. So let's change that back to 227 and test it again and there we go. Now we can see how effective it was that we are linking to these tablet styles rather than having to keep resizing the browser. So now our horizontal menu looks the way we want it to. We don't have any of the images showing up and it's working perfectly.

The very last thing we have to do is we have to fix these guys and that's actually an easier fix than you think. I'm going to scroll down and find the sidebar div, right down here, and I am just going to make some quick changes to this. Now first I'm going to give them all a defined width of 270 because right now they are just sort of expanding to fill that available space. So these are actually going to be bigger than they were before in the sidebar. The margin is going to be 20 pixels on the top, 25 pixels to the right. That will keep it away from the right edge. 20 pixels on the bottom and 25 pixels on the left.

Again it's going to keep it away from the left edge. It will give me 25 pixels worth of margin on both sides. The shadows and the border-radius, I'm going to leave those guys alone, but I'm also going to come down and do a float: left, clear: none. That will allow them to stack side-by-side, two left floats. I can go ahead and save that and test it and indeed we can see that we're getting these guys appearing side-by-side. Now if I wanted, I could increase their margins to reduce the amount of gutter between that and that's really up to me.

I can kind of do that however I want. I know that took a little while, but actually there are only two elements that we were modifying. So we modified two of those regions in our layout that needed to change based on screen size. This should give you a pretty good idea as to how you might approach modifying an entire layout. Every project is different and your own layouts will have their own needs and considerations. Just remember to be really careful when overwriting previous styles. It's really easy to miss something or to overwrite an important style by mistake. So now that we've written some styles for target screen sizes, we are going to take a look at how we would take our finished style sheets and deploy them through the use of media queries in our next movie.

Find answers to the most frequently asked questions about CSS3 First Look.


Expand all | Collapse all
Please wait...
Q: I'm following along with the video "Transparency in CSS3".  James shows us how to achieve transparency in Internet Explorer by going to Kimili.com and entering a HSLA value to generate code for transparency.

Here that code:

background: transparent;-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#BF0E0C0B,endColorstr=#BF0E0C0B)"; /* IE8 */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#BF0E0C0B,endColorstr=#BF0E0C0B); /* IE6 & 7 */ zoom: 1;

When this code is added to my HTML file it removes transparency on browsers that do in fact support it. So I'm left with NO transparency. Why?
A: The problem is in the filter code. If the IE background is called last, the first "transparent" declaration will remove all previous colors, regardless of browser. To resolve this, place the rule inside a conditional comment for IE or remove the "transparent" declaration at the front of the rule.
Share a link to this course
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.
Upgrade now


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.

Upgrade now

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

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


OK

Course retiring soon

CSS3 First Look will be retired from the lynda.com library on April 24, 2014. Training videos and exercise files will no longer be available, but the course will still appear in your course history and certificates of completion.


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
Welcome to the redesigned course page.

We’ve moved some things around, and now you can



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.

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