Course info
Jul 31, 2013
1h 38m

CSS3 is the style standard for HTML5 and for the web. It allows separation of markup (HTML5) from presentation (CSS3) and is key to creating modern web applications

About the author
About the author

Jesse Liberty is a Senior Consultant at Wintellect, where he specializes in Xamarin, Azure and Web development. He is a Certified Xamarin Developer, a Xamarin MVP and a Microsoft MVP.

More from the author
Visual Studio for Mac
1h 19m
Apr 16, 2018
More courses by Jesse Liberty
Section Introduction Transcripts
Section Introduction Transcripts

Page Layout
In this module we're going to look at layout in CSS3 and the CSS3 box model. CSS3 goes well beyond fonts and color. One of the primary questions will be how we lay out the block-level elements on the page. There are two major approaches. Fixed width or fluid? In fixed width the width of your page stays the same no matter the size of the window or the width of the browser. In a fluid page the width of your page responds to changes in the width of the browser. Fixed width is certainly easier to do, but it may not be optimal for a given browser. Fluid is more flexible, but a bit more work. We're going to be working with tags and positioning our tags on the page. We'll use HTML semantic tags where appropriate and we'll use div tags where we don't have the appropriate semantic tag. To create a column we're going to set its width and then we're going to set the keyword float. Let's back up and talk about how you start creating your pages. It always starts with content. Once you know what your content is going to be, you want to identify the boxes. That is, the rectangles that represent the various divs and others block-level tags on your page. We'll then use the float keyword to float items into columns or within columns. To make sense of all of that let's take a look at some CSS3.

Nav Bars
In this module we're going to talk about navigation bars. Until CSS3, creating navigation bars could be a lengthy and tedious process. However, with CSS3 it's very straightforward. A navigation bar is really a set of links. A set of links is really a list of the different areas in your site and lists are implemented with ul tags. The first step is to remove the bullets from the tag. The second step is to eliminate all the padding and margins. You then want to set the display to inline block, which will take your block-level tag of ul and make it an inline tag, that is, there will not be a new line between each entry. You're then free to style the links any way you like. You could, for example, remove the underlines and set the color. You might even surround it with a border to create what look like buttons. Let's see how all of that is done.