Whether you need to create a stronger brand look for your personal blog or for a client's website, there are a few HTML and CSS elements on web pages that are the most important ones to focus on. Of course, you already know that the graphics on your page are important for logos and color schemes, but did you know that you can easily tie your brand's colors into other parts of your website as well? Just as with, say, a design for a postcard or brochure printing campaign, your brand must remain consistent and recognizable from one brochure, or in our case, web page to the next. You don't need to completely redo your site to take advantage of CSS, either.
The great part about using CSS is that your entire site can be updated within only a few minutes, and future changes are just as fast. So review the following HTML formatting elements on your own site and see how CSS can improve what you already have.
The titles and headers in your website are critical for both readability and to help search engines understand the heirarchy of your content. Just as in this article, we've used headers to divide up the subjects, which helps you find important content. It also helps search engines know what are the important keywords on the page as well.
CSS allows you to dramatically change your website layout and appearance in seconds by changing the headings. Using the @font-face and other style elements allows you to make beautiful headings that look great visually but also provide important cues to search engines.
In the past, you had to use images to get nice-looking, stylized headings. Today, CSS allows you to create a branded design in a way that serves your readers and search engines with easy-to-consume content.
In the above example from Lost World's Fairs, the text is all selectable and readable by search engines. No images were used - only fonts. While it is an extreme example of what can be accomplished, it goes to show just how much CSS can be used to make your headings look amazing. To help you in your own heading design, here are a few resources:
- CSS Header Tutorial - This gives some nice code for text shadows, @fontface, absolute positioning in a relative div, and more.
- Making a Static Website Header with CSS - If you would like to create a static header, this tutorial gives you the code and demo you need to get it done.
- Adobe-like Arrow Headers - This is an excellent tutorial that walks you through how to code headers shaped like arrows into your website design using CSS.
(Image Credit: Google Webfonts)
Your content is king, so why would you let your body font look generic? CSS gives you the ability to quickly update the fonts on your entire site. Just make sure all your text is embedded within the
tag or other class so you can quickly change how CSS makes the text appear. The biggest advantages to CSS are that you can use the @font-face to import beautiful fonts, but also that you can adjust the line-height and letter spacing. These elements can significantly improve readability, especially if your site does not have a high contrast between the font and the background. With CSS, you can adjust the entire site in seconds based upon the needs of your readers. Google Webfonts is just one of many examples of sites where you can use free fonts that are ready to be imported using CSS. You are no longer limited by the standard font families of the past. However, with thousands of fonts to choose from, just make sure that your text stays readable. Avoid script or handwritten font for body text; save this for your title or headers, if readable enough. Your body text, as always, should be a serif font, meaning that the letters include flags and tags that lead the reader's eyes from one word to the next. Need some tutorials to help you get started? Here are a few of the best:
- CSS Text Styling Tutorial - This tutorial provides lots of great help on customizing the text on your pages using CSS.
- 3D CSS Shadow Text Tutorial - Ever wonder how to make your header text look 3D and pop out with you hover your mouse over it? Try this phenomenal tutorial! Keep in mind that this could also be a great effect for header text.
- Background Color for Inline Text - This tutorial shows how to add a background color to text using only CSS.
- CSS Font and Style Wizard - While not a tutorial, this font and style wizard is an excellent resource for helping you experiment with your code.
- Font Tester - This is another resource that allows you to test for the right font, style, and color of your content.
- TypeTester - Another great font testing resource on which you can see different fonts in use side-by-side.
- CSS Typeset - Copy your paragraph exactly as you want it to appear, and this tool will kick out the CSS code for you to copy and paste into your website design.
(Image Credit: Ultime Notizie)
Another less often used HTML formatting element is the blockquote, which is used to set text apart from the rest of a paragraph. It is often for longer quotes but makes for an excellent tool when you want to call out text elements. Common designs include borders, a background color different from the rest of the body, and a font that is larger and in a different font face than the body text.
The above example shows how images and text can be made to really stand out using stylized blockquotes. These elements are readable by search engines as well, which is a nice added benefit for blockquotes. Need some help with your blockquotes? Try one of these amazing tutorials:
- Writing a Generic CSS Blockquote Class - Learn how to create a blockquote with a generic look for your web pages. This is a great tutorial if you are new to CSS or blockquotes.
- How to Style Blockquote with CSS for BlogSpot and WordPress - In this tutorial, you will learn how to add a blockquote that looks like it has an image behind it when it really doesn't.
- Weekend Project: Styling the Blockquote Tag - This tutorial is for TypePad users, and gives you everything you need to know how to style a blockquote in TypePad.
- Placing Attractive Blockquotes in Your Website Content - This CSS code creates a very stunning blockquote look.
(Image Credit: CSS 3.0 Maker)
A nice touch to any website is to brand the link colors. If the primary colors of your website include reds, then your links can be different variations of reds, as an example. You can even create links in which the text is one color and the underline is another color, but of course be careful that these two colors work well together. You wouldn't want the underline color to make the text difficult to see.
Keep in mind that there are several kinds of links. A link that has been visited, a link that hasn't been visited, and the color of the link when the mouse is hovering over it. Each of these can also be modified using CSS to look different based upon your needs. Using tools like CSS 3.0 Maker allow you to quickly style your links and update your own site very quickly.
- Having Different Link Colors on One Page - Learn how to create different colored links for different sections of your website; for instance, when the text is on a white background compared to a colored background.
- Styling Links in CSS - This tutorial shows how to stylize your links according to type: link, visited, hover, focus, and active.
- CSS Tutorial 7 - Styling Links - If you'd rather see a video on how to style the different types of links, this one gives a great walkthrough.
(Image Credit: Kirupa)
Even images can be given a touch of class with CSS. Common examples include adding a border, drop-shadow effects, and (finally available) transition effects so that various images rotate through. Again, you have the advantage of quick updates to the entire site, and CSS can be used to preserve formatting when printing the images as well. This is another nice touch to CSS that prevents your brand look from being distorted if anyone prints your web page for any reason.
Here are some excellent tutorials for image styling using CSS:
- Styling Borders with CSS Border-style Property - Learn how to add border styles to boxes and images with this tutorial.
- CSS Image Styles - This tutorial walks you through how to use the box-shadow, border-radius, and transition CSS tricks to create image styles.
- CSS3 Drop Shadow Tutorials - This is the ultimate roundup with over 100 CSS drop shadow tutorials included!
- Using CSS3 Transitions, Transforms, and Animation - This is an excellent, in-depth tutorial for learning to add some awesome effects to your images.
Any CSS elements that you use not included in this list? Drop a line to let the rest of us know!