Article css


Published on

Published in: Technology, Design
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Article css

  1. 1. .net technique css C CSS better l CD Your essentia uire ’ll req All the files you for this tutori found on this al can be issue’s CD. web typography This issue, Craig Grannell demonstrates how to take a leaf out of print typography’s l handbook in order to transform your type using a baseline grid Knowledge needed Intermediate CSS and HTML wrapper div, is split between two divs – one for the main content (which has an id value of mainContent) and a sidebar (which has an id value of sidebar). Because Requires A text editor both of these divs will be floated, to stack them horizontally and fashion a Project time 10 minutes two-column page, the clearFix clearing technique will be used to ensure that the background of the wrapper is displayed behind the content within (hence the clearFix class value for the wrapper div). If the floated content wasn’t cleared, The world of print design still hasn’t made a substantial impression on most browsers would consider it to take up no vertical height, and the wrapper the web. Sure, a few things are nicked now and again, but most web background wouldn’t be shown. designers remain blissfully unaware of what their QuarkXPress- or As for what’s within the columns, we’re working with text-based content, which InDesign-loving pals are up to. Mostly, that’s fine, but there are occasions when is structured in a logical, hierarchical and semantic manner. The main column web designers should turn to print specialists for their know-how, and one of begins with a level-one heading followed by a couple of paragraphs. After this, these occasions is the use of type. there’s a level-two heading, then a paragraph and a blockquote, which will be Successful typography should come naturally to print designers, but lettering fashioned into a pull-quote. Note the use of the cite element for the quote credit. is lagging behind on the web. Things are getting better, with web designers understanding CSS and getting to grips with handy tricks such as Flash image <blockquote> replacement, but we want more! Which is why we’re delving into the murky <p>This is where the pull-quote content goes. Lorem ipsum dolor sit amet, waters of the baseline grid and looking at how it can help your online type. consectetuer adipiscing elit.</p> A baseline grid is something that forces text to adhere to the spacing in a ruled <p><cite>Name Surname</cite></p> pad. Vertical rhythm is maintained down the page, which is particularly handy for </blockquote> books because the words on one page won’t be visible in the gaps between the lines overleaf. However, it also results in great spacing that’s easy on the eye. The The remainder of this section contains some paragraphs and level-three headings. printing issue isn’t that relevant online, but rhythm is – text can be hard to read For the sidebar, there’s a single level-two heading (the largest one available for this onscreen, so any method that can make this process easier is worth investigating. area of the page, because it’s generally recommended that you stick to a single level-one heading per page, otherwise search engines get all grumpy) and a Head to the .net CD couple of paragraphs. The ‘start-here’ folder on the CD includes the files you need to work through in In the style sheet, the first three existing rules are *, html and body. The first this tutorial. The HTML document already links to the CSS file, and its body section zeros all margins and padding, while the other rules set the default font-size to has content included. The page’s structure is simple: the page content, all within a 62.5%, meaning that, in a default browser set-up, fonts can be sized in ems using values a tenth of the target pixel size. The body rule also sets a default font stack (using variants of the Lucida family, falling back to Arial, Helvetica and sans-serif), along with providing some body padding. The next four rules deal with styling the page’s structure. The wrapper div is assigned a fixed width and a vertically tiling background image (which is a single- pixel GIF), and is centred using margin values of 0 auto. The mainContent and sidebar divs are floated left and given fixed widths; a margin-right value is applied to #mainContent, setting space between the columns. Finally, the clearFix rule clears the floated content, so that the background on the wrapper is shown. Style the headings Before you begin to style the headings, the baseline grid’s line-height must be decided. For the main content area, this example will use a target of 20 pixels, which will create an open leading for typically sized web copy. Remember that font-size settings will be in ems, using values a tenth of the target pixel size. This makes the effective line-height for the page 2em. All element-specific line-height and margin values must adhere to this value (or multiples thereof, though zero is an option for removing margins) in order for the grid to not be broken. To get the relevant line-height and margin values, take the baseline grid value (2em) and divide it by the font-size settings. Witness the following code block: h1 { Sumptuous spacing All the faffing about involved in figuring out line-height and margin values is worth it when you see the complete page in all its rhythmic glory font-size: 2.0em; 70 .net october 2007NET168.tut_css 70 28/8/07 17:02:53
  2. 2. .net technique css Use background images to keep your grids neat White squares are the key to rhythmical text When working with fairly complex numbers for line-height and margin values, it’s easy to make mistakes, unless, of course, you’re a sentient calculator, in which case you have problems of your own! When creating a page with a very strict vertical rhythm, having a break in the rhythm would be rather like New Order’s Blue Monday suddenly turning into a waltz for a few seconds: bizarre, jolting and painfully ugly. To help ensure that rhythm is being maintained, create background images that comprise a white square the height of your baseline grid, with a single- Have you got rhythm? Using tiled background images with single-pixel lines for the pixel line at the bottom. These can then be tiled behind the content areas, baseline grid can help you sanity check your various values, maintaining vertical rhythm resulting in a background akin to ruled paper. If your content happily lines up all the way down the page, you can jump for joy. If not, you can hop to Argos line-height: 1em; and buy a new calculator. margin-bottom: 1em; Note that when using such backgrounds, it helps if you don’t add further } complications in terms of margins and padding. Therefore, in the ‘completed- h2 { project-lined’ folder on the CD, you’ll see that the padding-top value for font-size: 1.5em; #sidebar is commented out, making sure the sidebar text sits neatly over the line-height: 1.3333333em; grid while it’s being worked on. margin-top: 1.3333333em; margin-bottom: 1.3333333em; } the line-height is adjusted (2.0/1.3 = 1.5384615em). Finally, the cite element h3 { is styled, its content being aligned right and emboldened. font-size: 1.3em; line-height: 1.5384615em; blockquote { margin-top: 1.5384615em; padding: 2em 0; } margin-bottom: 2em; background-color: #eeeeee; Here, the level-one heading has a font-size value of 2.0em. The line-height and border-left: 2em solid #cccccc; margin-bottom settings are defined as 1em, meaning they each take up exactly padding-left: 2em; one row of the baseline grid. But when the font-size is different to the baseline padding-right: 2em; grid’s line-height setting, things are more complex. For the level-two heading } (font-size 1.5em) to adhere to the grid, its line-height and margin values must blockquote p { be set to 2.0/1.5 or 1.3333333em (or a multiple thereof, or zero for margins that margin-bottom: 0; aren’t required). Similarly, the values for h3, font-size 1.3em, are derived from font-size: 1.3em; 2.0/1.3, which is 1.5384615em. line-height: 1.5384615em; Note that as long as the overall height taken up by an element and its margins } is within the rhythmic boundaries of the baseline grid, you can tinker with the cite { settings. For the level-two heading, the equal margin-top and margin-bottom font-weight: bold; settings place it directly between previous and subsequent content, not making it font-style: normal; visually obvious which content the heading belongs to. By moving half of the display: block; margin-bottom value to the margin-top value, the heading is repositioned – text-align: right; moved downwards slightly – but the overall page rhythm is maintained. } h2 { Styling the sidebar font-size: 1.5em; While some people suggest that vertical rhythm should be maintained across an line-height: 1.3333333em; entire page, many argue that sidebars should maintain their own unique vertical margin-top: 2em; rhythm, helping distinguish the text within from that elsewhere on the page. (To margin-bottom: 0.6666666em; ensure that this combination of vertical rhythms isn’t disruptive and doesn’t clash, } the wrapper div has a single-pixel separator, added earlier.) To override the settings created previously, a reset rule is added, Paragraphs and pull-quotes #sidebar *, which affects all elements within the sidebar div. (For more For the p rule, which styles the paragraphs, use the same system as with the headings. Set the font-size to 1.2em and the line-height and margin-bottom values to 2.0/1.2, which is 1.6666666em. Expert tip Consider your fonts Styling the pull-quotes requires some lateral thinking. For the blockquote element, the page’s default font-size is inherited, and so its effective font-size value If you’re a fan of esoteric fonts, the web’s limitations must grate. Sure, you is 1.0em. By adding 2em of padding top and bottom and a margin-bottom value can render type as an image or use a Flash-based replacement technique, of 2em, the spacing around the blockquote and within it maintains the vertical but that’s only feasible for small areas. However, don’t plump for the rhythm of the page. Other property/value pairs add some decoration to make obvious; Arial, Verdana and Georgia may rule the roost, but Lucida is the quote stand out from other content. common across all platforms, Geneva (Mac) and Tahoma (Windows) are a The second rule in the following code block adds further distinction for the passable pair, and the lovely Palatino Linotype – a Windows serif – has Mac pull-quote text, removing the default margin-bottom setting for paragraphs within equivalents: Palatino (with Classic or iWork) and Book Antiqua (with Office). the blockquote element, and increasing the font-size. Because of the latter setting, .net october 2007 71 next>NET168.tut_css 71 28/8/07 17:02:55
  3. 3. .net technique css complex sites, it may instead be necessary to use a grouped selector, overriding each element in turn – such as #sidebar h1, #sidebar h2, #sidebar h3 and so on.) Here, the font-size is returned to 62.5%, the line-height returned to 1em, and the margins removed. #sidebar * { font-size: 62.5%; line-height: 1em; margin-top: 0; margin-bottom: 0; } For this example, the sidebar’s vertical rhythm will be 18px. Values are defined in a similar way to those earlier in the walkthrough. For the level-two heading, a font- size of 1.4em is assigned. This makes its required line-height and margin values 1.8/1.4, which is 1.2857142em. As per the level-two heading in the mainContent div, half of the margin-bottom value is assigned to the margin-top value, resulting in the values seen in the following code block. The values for the sidebar paragraphs are dealt with in the same way: the font-size setting of 1.1em makes the required line-height and margin values 1.8/1.1, which is 1.6363636em. (Again, zero is an acceptable value if a margin isn’t required, hence no margin-top value.) Tidying up IE6’s mess By default, IE6 screws up the sidebar’s top margin and incorrectly places content below the pull-quote. Both problems are simple to fix via conditional comments #sidebar h2 { font-size: 1.4em; placement under the blockquote element, cutting it off at its left. The former issue line-height: 1.2857142em; can be dealt with by adding padding to the top of the sidebar div, while the latter margin-top: 1.9285713em; appears to be a hasLayout issue, which can be overridden by setting zoom to 1 on margin-bottom: 0.6428571em; the offending element. Fixes should be applied using conditional comments, so } add this code to the head section of the web page, after the existing style element: #sidebar p { font-size: 1.1em; <!--[if IE]> line-height: 1.6363636em; <link rel=”stylesheet” type=”text/css” href=”ie-hacks.css” media=”screen” /> margin-bottom: 1.6363636em; <![endif]--> } <!--[if lte IE 6]> <link rel=”stylesheet” type=”text/css” href=”ie-6lte-hacks.css” media=”screen” /> The sidebar heading should line up with the first line of text in the mainContent <![endif]--> div to make it more visually pleasing. This can be done by adding a padding-top value to the #sidebar rule, working out how many pixels are required, and then Now create and save the two CSS documents linked to via the href rules in the figuring out the equivalent value in ems, using a similar process to that shown previous code block. For ‘ie-hacks.css’, add the following rule to deal with the elsewhere. The accurate figure is 1.3846153em, but sometimes you have to go sidebar content positioning: by eye when it comes to typography, and 1.3em is more pleasing. #sidebar { Add overrides for IE padding-top: 4em; Test the web page and all should be well in Firefox, Opera and Safari. Internet } Explorer doesn’t entirely play ball, however: IE in general doesn’t correctly apply the margin at the top of the sidebar, and IE6 (and earlier) screws up the content For ‘ie-6lte-hacks.css’, set the zoom value to 1 for the blockquote element: blockquote { Resources Find out more online zoom: 1; } Upon doing this, your final page will work as intended in all major browsers. You’ve now mastered the basic art of clean, easy-to-read online type. The sidebar heading should line up with the first line of text in The myth of web-safe fonts This article offers interesting insight Five steps to better typography Mark Boulton’s series on typography the mainContent div into fall-back fonts, with helpful is well worth a look. In five recommendations about which fonts extremely concise articles, he talks are similar enough to be used in a about important areas of type About the author stack. Find out why using Verdana that are just as important to web Name Craig Grannell carelessly is a big mistake. designers as print designers. Site Areas of expertise Information architecture, site concepts, html/web-typography/web comments/five_simple_steps_to_ graphics, interface and front-end design -safe-fonts-myth better_typography Clients Swim~, Rebellion, IDG Who’s faster: Speedy Gonzales or Road Runner? Speedy Gonzales! <prev 72 .net october 2007NET168.tut_css 72 28/8/07 17:02:56