Servage Magazine

Information about YOUR hosting company – where we give you a clear picture of what we think and do!

Learning advanced CSS techniques

Friday, November 8th, 2013 by Servage

css-reset

I think by reading my other articles, you have a solid foundation in writing style sheets. You can style text and element boxes, create page layouts using floats, and even add subtle animation effects to your designs. But there are a few common CSS techniques that I want you to know further.

A Clean Slate (CSS Reset)

As you know, browsers have their own built-in style sheets (called user agent style sheets) for rendering HTML elements. If you don’t supply styles for an h1, you can be certain that it will display as large, bold text with space above and below. But just how much larger and how much space may vary from browser to browser, giving inconsistent results. Furthermore, even if you do provide your own style sheet, elements in your document may be inheriting certain styles from the user agent style sheets, causing unexpected results.

For that reason, many designers use what is known as a CSS Reset, a collection of style rules that overrides all user agent styles and creates a starting point that is as neutral as possible. From there, you must explicitly specify font, text, margin, and padding styles for every element in your document, but you can be certain that no styles from the browser will interfere with them.

v2.0 | 20110126 License: none (public domain)*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: ‘’;
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}

To use the reset, place these styles at the top of your own style sheet. You can use them exactly as you see them here or customize them as your project requires.

Image Replacement Techniques

Before web fonts were a viable option, we needed to use an image any time we wanted text in a font fancier than Times or Helvetica. Fortunately, that is no longer the case, and we can have very stylish headlines and text treatments without the added burden of images. Every now and then, however, even a web font won’t do, and it is necessary to use an image in place of a few words of text. For example, you may want to use a stylized logo for your company name or use familiar icons in place of text links.

Removing the text altogether and replacing it with an img element is a bad idea because valuable content would be gone forever. The solution is to use a CSS-based image replacement technique that uses the image as a background in the element, then shifts the text out of the way so that it is not rendered on the page. Visual browsers see the background image, while the text content stays in the file for the benefit of search engines, screen readers, and other assistive devices. Everybody wins!

cssq

In this example, I’ll use the fancy Jenware logo in place of the h1 “Jenware” HTML text. The markup is simple:

<h1 id="logo">Jenware</h1>
The style rule is as follows:
h1#logo {
width: 450px;
height: 80px
background: url(jenware.png) no-repeat;
text-indent: 100%;
white-space: no-wrap;
overflow: hidden;
}

There are a few things of note here. First, the h1 element displays as a block by default, so we can just specify its width and height to match the dimensions of the image used as a background. The text-indent property pushes the word “Jenville” over to the right by the full width (100%) of the element.

The white-space property is set to no-wrap, which ensures that long strings of text won’t wrap around and show up again in the element box. Finally, overflow: hidden instructs the browser that anything that falls outside of the element box (like our h1 text) should not be displayed.

Resources for further reading

W3 Schools

Site Point

Learning advanced CSS techniques, 5.0 out of 5 based on 2 ratings
Categories: Guides & Tutorials

Keywords:

You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

No comments yet (leave a comment)

You are welcome to initiate a conversation about this blog entry.

Leave a comment

You must be logged in to post a comment.