Designing with CSS – An Introduction
This article is a small introduction to two new series about Cascading Style Sheets (CSS)
1. CSS Tips, Tricks and Techniques
2. CSS Snippets
With improvements in browsers’ compliance with W3C standards there is a widespread acceptance and usage of XHTML/XML along with Cascading Style Sheets (CSS) to style web document elements and objects.
The aim of this introductory article is to familiarize those who are totally new to CSS with some of the basics. To gain the most from these two series you are expected to be a web designer with elementary knowledge of XHTML and CSS. The idea is to provide web designers with the ability to create standards compliant, accessible web sites using XHTML and CSS. The CSS tips, tricks, techniques and snippets to be published on our blog would enrich and supplement your knowledge of CSS.
Purpose of CSS
The purpose of CSS is to provide web developers with a standard way to define, apply, and manage style characteristics, such as font, size, colour, and position, to the elements of XHTML documents. CSS provides these capabilities through a technical model based on parent/child hierarchy of the web document, the separation of style from content, and World Wide Web Consortium (W3C) created and documented set of standards.
Using Cascading Style Sheet
CSS information can be applied in different ways. CSS style information can be either attached as a separate document or embedded in the XHTML document. Multiple style sheets can be imported. Different styles can be applied depending on the output device being used; for example, the screen version can be quite different from the printed version, so that authors can tailor the presentation appropriately for each medium.
Cascading Order
What style will be used when there is more than one style specified for an XHTML element?
Generally speaking we can say that all the styles will “cascade” into a new “virtual” style sheet by the following rules, where number one has the highest priority:
- Author Styles (style specified by the web page author)
There are three ways of specifying a style sheet: - Inline Style: inside an HTML element, specified using the “style” attribute.
- Internal Style Sheet: embedded style in the head section of an HTML page.
- External Style Sheet: a separate CSS-file referenced from the document.
- User Style
- a locally stored CSS-file specified by the user in the browser options, and acting as an override, to be applied to all documents.
- User Agent Style (Browser default)
- the default style sheet applied by the user agent, e.g. the browser’s default presentation of elements.
The style sheet with the highest priority gets used to display the content. Declarations that are not set in the highest priority source, will get passed on by a source of lower priority such as the user agent style. This process is called cascading.
So, an inline style (inside an XHTML element) has the highest priority, which means that it will override a style defined inside the <head> tag, or in an external style sheet, or in a browser (a default value).
Caution:
If the link to the external style sheet is placed after the internal style sheet in XHTML document <head>, the external style sheet will override the internal style sheet!
Inline Styles
An inline style loses many of the advantages of style sheets by mixing content with presentation. Avoid using inline style!
To use inline styles you use the style attribute in the relevant element. The style attribute can contain any CSS property.
The example shows how I have changed the colour of header in this article from the original Albeo theme:
<h2 style="color:#0183ac;">Designing with CSS - An Introduction</h2>
Internal Style Sheet
An internal style sheet should be used when a single document has a unique style. You define internal styles in the head section of an XHTML page, by using the <style> tag.
Example:
In my main style sheet for my website with more than hundred pages, h1 and p elements are styled like this:
h1 {text-align:left;font-weight:bold;font-size:14px;color:blue;margin:5px 5px}
p {text-align:justify;padding:0 5px;margin:5px 0}
But in one particular page I would like them to be different, so I use an internal style sheet on that page, as shown below:
<head>
<style type="text/css">
<!--
h1 {text-align:center;font-weight:bold;font-size:18px;color:red;margin:10px 5px 15px}
p {text-align:center}
-->
</style>
</head>
External Style Sheet
External style sheets are best as you have the most control over styles. An external style sheet is ideal when the style is applied to many pages. With an external style sheet, you can change the look of an entire website by changing one file. Each page must link to the style sheet using the tag. The tag goes inside the head section:
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" media="screen" />
</head>
An external style sheet can be written in any text editor, and should be saved with a .css extension. The file should not contain any HTML tags. An example of a style sheet file is shown below:
body {font-family:verdana,arial,helvetica,sans-serif;font-size:11px;line-height:1.25;color:#18397c;background:url('../asset/main.png') no-repeat top center}
h1 {text-align:center;font-weight:700;font-size:14px;color:#31659c;margin:0 0 5px}
p {text-align:justify;padding:0 5px;margin:.5px 0}
Tips:
Even multiple external style sheets can be referenced inside a single XHTML document. On my website, I have different style sheets for layout, typography, navigation, and forms, etc. If a page doesn’t have a form then it need not have a link to style sheet for forms. I also avoid whitespace, and use shorthand to reduce the file size.
Multiple Styles Cascade into One
If some properties have been set for the same selector in different style sheets, the values will be inherited from the higher priority style sheet as explained before.
For example, the h2 selector has the following properties in different style sheets for a document:
External Style Sheet
h2 {text-align:center;font-weight:bold;font-size:13px;color:brown;background-color:lime;padding:2px 0;margin:5px 0}
Internal Style Sheet
h2 {text-align:left;padding:2px 5px}
Inline Style
<h2 style="font-size:15px;color:red;">Designing with CSS - An Introduction</h2>
The virtual style sheet for the h2 element on the page with an inline style and the internal style sheet and linked to the external style sheet will be:
h2 {text-align:left;font-weight:bold;font-size:15px;color:red;background-color:lime;padding:2px 5px;margin:5px 0}
The font-size and color are inherited from the inline style (highest priority), text-alignment from the internal style sheet, and the rest from the external style sheet (lowest priority). Interestingly, padding is modified as per the internal style sheet.
CSS Rules
CSS is a simple language. It is easy to read and write, and takes very little time to understand the basics and start building your own style sheets.
In CSS, a rule is a statement about one style aspect of one or more XHTML elements. A style sheet consists of one or more rules that apply to an XHTML document. A CSS rule is made up of a selector and a declaration. Each declaration itself consists of a property and a value.
Selectors are one of the most important aspects of CSS as they are used to “select” elements on an XHTML page so that they can be styled. The declaration tells a browser how to style any element on a document that is selected.
selector {property:value}
The selector is the link between the XHTML document and the style. It specifies which XHTML elements are affected by the declaration. The declaration is that part of the rule that sets forth what the effect will be. You can group selectors together that share a common declaration.
The property is a quality or characteristic of that element that you are choosing to style. CSS2 defines around 120 properties and you can assign values to all of them. The value is a precise specification of the property. You may specify more than one property for one selector.
Punctuation
Each selector in a group must be separated by a comma. A declaration is surrounded by curly braces. Property and value are separated by a colon. If the value is multiple words, put quotes around the value. You must separate multiple properties for one selector with a semicolon. Do not leave spaces between the property value and the units! “margin-left:10 px” (instead of “margin-left:10px”) will work in IE, but not in Firefox or Opera.
To make your CSS code more readable, you can put each property and its value on a line by itself. But this will increase the size of your style sheet.
Example:
p {font-family:Cambria,"Times New Roman",Times,serif;text-align:justify;padding:0 5px;margin:5px 0}
p {
font-family:Cambria,"Times New Roman",Times,serif;
text-align:justify;
padding:0 5px;
margin:5px 0
}
h1,h2,h3 {text-align:center;font-weight:700;font-size:14px;color:#31659c;margin:0 0 5px}
h2 {font-size:13px}
h3 {font-size:12px}
The curly braces and colon make it possible for the browser to distinguish between the selector, property, and value.
Type Selectors
A type selector matches the name of a document language element type. A type selector matches every instance of the element type in the document tree. Any XHTML element type can be used as a type selector. Type selectors are the simplest kind of selectors.
Example:
The following rule matches all h1 elements in the document and sets their font size to 14px:
h1 {font-size:14px}
id and class Selectors
In addition to setting a style for an XHTML element, CSS allows you to specify your own selectors called “id” and “class”.
id Selector
The id selector is used to specify a style for a single, unique element. You can use an id selector name only once in your XHTML document. The id selector uses the id attribute of the HTML element, and is defined with a “#”.
Example:
#wrapper {width:960px;min-height:100%;background-color:#f6f8fa;margin:0 auto}
The wrapper of my website is used only once in a page, so I use id selector for this outermost container.
<div id="wrapper">
... content
</div>
Caution:
Do NOT start an ID name with a number! It will not work in Mozilla/Firefox.
class Selector
The class selector is used to specify a style for a group of elements. Unlike the id selector, the class selector can be used as often as you need within your XHTML document. This allows you to set a particular style for any XHTML element with the same class. The class selector uses the XHTML class attribute, and is defined with a “.”
Example:
h2 {text-align:center;font-weight:bold;font-size:13px;color:brown;background-color:lime;padding:2px 0;margin:5px 0}
p {text-align:justify;padding:0 5px;margin:.5px 0}
.left {text-align:left}
Now, if I want, I may left-align my h2 element with a padding of 5px as follows:
<h2 class="left" style="padding-left:5px;">Designing with CSS - An Introduction</h2>
Similarly, any XHTML element with class name of “left” will be left-aligned.
<p class="left">This para is left-aligned, and not justified as defined in the external style sheet.</p>
Caution:
Do NOT start a class name with a number! This is only supported in Internet Explorer.
This article is not a tutorial, and there are other selectors like:
universal selector, descendant or contextual selectors, child and sibling selectors, attribute selectors, pseudo-elements and pseudo-classes.
I will explain these selectors as and when I use them in these two series.
Another thing that I haven’t discussed here is that you have an option of two different writing styles for your CSS rules: longhand and shorthand. I always prefer shorthand that allows you to condense your rules by assigning multiple properties and values in a single line, and create a smaller file which uploads faster.
CSS Comments
Comments are used to explain your code, and may help you when you edit your code at a later date. Comments are ignored by browsers. Comments may not be nested. CSS comments begin with characters “/*”, and end with characters “*/”.
Example:
/*
Copyright 2009 GoldenTwine Informatics
Style name: gti - main style web 2.0
W3C CSS Validator - Valid CSS!
*/
/* clearfix */
.clearfix:after {content:".";display:block;height:0;clear:both;visibility:hidden}
.clearfix {display:inline-block}
/* Hides from IE-mac */
* html .clearfix {height:1%}
.clearfix {display:block}
/* End hide from IE-mac */
Adding a touch of style.
It will show you how to use W3C’s Cascading Style Sheets language (CSS) as well as alternatives using HTML itself.
Further information:
Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification
Introduction to CSS 2.1
Syntax and basic data types
Selectors
With this brief introduction, get ready to share with us tips, tricks, techniques, and snippets which will enable you to design your web document with creative CSS. Your comments, suggestions, and contributions are warmly anticipated!
If you are looking for a web host that will provide hosting environment for WordPress, BlueHost is one of the best choices. My website and blog are hosted by BlueHost.
Click Here to Signup for BlueHost
Get a professionally designed special custom five-page website ideal for small business that need an online presence as well as personal sites or informational sites at an amazing price of only $125.
Visit our website to learn more about Small Business Website Design
