Styling our HTML5 page
Body
We will start styling our page by defining the body attributes. We want the content width to be 960px, which for many years has been a standard webpage width. We want the content to be in the center of the page. We do this by giving it a margin (remember the Box Model lecture – the margin is the space outside the ‘box’). We don’t know how big the viewer’s browser width will be, so we can’t specify a fixed number, and the way around this problem is specifying a left and right margin of ‘auto’. This makes both sides automatically even. No top or bottom margin is needed, and we can use the shorthand form – margin: 0 auto; – which makes the top and bottom 0px and left and right auto. We make the base size for the test to be 20px, this will make all p elements 20px and the h1 – h6 proportional to this. We also define the base font typeface, using font-family so that if ‘Times’ is not available it will use a generic serif font. Finally we define the color of the text.
See the Pen CSS: Body by Stuart (@bystuart) on CodePen.
Header and H1
We want a little space at the top of the header so give at a 20px margin, and define the height for the area. Then we add a white border which is a solid 10px thick. We’ve kept the role attribute in the selector, this would help identify the correct header if there were multiple headers on the page. Inside the header is the h1, and we define the color, size and alignment. We also add a text shadow to make is stand out. The values used for this are the x-coordinate, y-coordinate, the blur radius, and finally the color of the shadow. For rgba color the first three number specifies the red, green and blue spectrum in the range 0-255 (where 0 is no color, 255 is full color – 255, 0, 0 would represent pure red. The 4th value represents a transparency value between 0 and 1; zero being fully transparent and one being fully opaque. The h1 element has default margin large than what we want, so we specify our needs using the shorthand method which represents margin-top: 5px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px;.
See the Pen CSS: Header by Stuart (@bystuart) on CodePen.
Nav
Now we will turn the list into a recognizable navigation area. First we deal with the nav element with contains the list. We want it to be centered, again we will use auto. One important factor that makes auto work is the width of the element must be defined, so we make it 800px wide. Unordered lists by default have the bullet before each item, we turn this off with ‘list-style’. List items by default block elements, so to make them appear in a straight line we change ‘display’ to inline-block, and we give them a margin to keep them apart. sequences of whitespace will collapse into a single whitespace, adding ‘white-space: nowrap’ means text will never wrap to the next line. The text continues on the same line until a
tag is encountered. For the a element we get rid of the default underline with text-decoration: none. We setting the padding using the shorthand method which we used for margin – when only two values are defined the first value is top and bottom, the second left and right.
See the Pen CSS: Nav by Stuart (@bystuart) on CodePen.
Article
Most of the styling we’ve used for article, and the h2 and p inside you should be familiar with; line-height controls how close the lines of text are to one another, overriding their default values. We’ve used position:relative and top:20px to move it down 20px from it’s default position to give it a top margin.
See the Pen CSS: Article by Stuart (@bystuart) on CodePen.
Section
We use similar techniques for the two sections inside the article:
See the Pen CSS: Sections by Stuart (@bystuart) on CodePen.
Aside
We carry on the same principles for the aside, moving it into the correct position using position:relative and defining the vertical and horizontal distances to move it by specifying the top and left distances:
See the Pen CSS: Aside by Stuart (@bystuart) on CodePen.