CSS Basics
White (X)HTML is used to creating the structure and content of a website, but it is not made or used to “style” the content and structure. Cascading Style Sheets(CSS), in the other hand is especially made to provide styles to a website. CSS is not part of HTML, they are two different things altogether, but they are used together by the browser.
So basically, CSS styles will tell the browser how to display the content on the HTML file. A style can specify display properties for almost all HTML elements, from headers, to paragraphs to images to tables. A CSS property applies style to a selected element, there are color properties, dimension properties, font styling properties, etc.. This short introduction will give you the base knowledge necessary to create and apply simple styles to your HTML code.
Structure
To start of, lets look at the style structure, its parts and how they work together.
p { color: blue; font-size: 14px; }
This simple example would set all paragraphs to a blue color and 14px font size. There are three main parts of the style:
Selector
The selector simply tells the browser to which element(s) this style will apply to. In the example the selector “p” is referring to the paragraph element, which means all paragraph elements in the document will be formatted according to this style.
Declaration block
The declaration block starts immediately after the selector, with an opening curly brace( { ) and it is simply a group of declarations, the declaration block ends with the closing curly brace ( } )
Declaration
Between the declaration block are one or more different declarations. A declaration is a simple formatting instruction that the browser will apply to the selected element. In the example there are two declaration, one sets the color to blue and another sets the font size to 14px. Each declaration is made op of a property and its value and has to have a semicolon at the end.
Property
As the name implies, a property is a formatting option that applies to HTML elements. CSS is made up of a predefined list of properties which are simple words or hyphenated words. You can understand the basic function of a property by its name. Also, some apply to specific elements, that define general formatting apply to most HTML elements.
Value
Finally, the value is assigned to the property. So the property, together with its value will tell the browser specifically how to display the selected element. There are four basic types of property values: colors(color keywords, RGB values), lengths(pixels, ems, percentages), keywords(“auto”, “normal”, “justify”, “bold”, etc.) and URLs(point to a external resource on an other file.). Property values depending on the properties themselves. The reference provided includes a list of values, and HTMl elements to which it can be applied of any specific property.
Creating styles and style sheets
Understanding the basic CSS style structure means you can apply as many styles as you want to make your page look exactly as you want it. There are three main methods of applying styles to a HTML file.
Internal styles
A internal style sheet is a series of styles that are directly written inside the HTML document using the style tag. The style tag tells the browser that the information contained inside it is CSS. Although internal style sheets are easy to implement, they are not very efficient when working on a website, because to make a change would mean go though each page separately. It is good though, to provide simple styles that will apply only to that page. The example shows a style being applied to the h1 element, formatting in red color and Arial font.
<style type="text/css">
h1 {
color: red;
font-family: Arial;
}
</style>
Inline styles
Another way to apply a style is by putting it directly to the element. In the example bellow the style is applied by using the “style” attribute. The value of the attribute is the actual properties with their values. This is not a very convenient way to style a element, but it is simple and quick to apply.
<h1 style="color: red; font-family: Arial;}> Header </h1>
External styles
As mentioned above, having style sheet directly on the document is not so convenient, especially when building a complete website with multiple pages and styles. External style sheet on the other hand allow you to have a file or files that control the look of all your pages. This is not only useful to give your site consistent look, but it also makes is much easier to add or update a style and have it apply to all your pages with one single change on the style sheet. On more complex sites, it is also usefull to have multiple style sheet s controlling different aspects of the site like layout, text, graphics, etc.. There are two ways to include a style sheet to the HTML docuement that will use it.
This example show how to link a style sheet to a HTML document using the link tag. The rel attribute tells the browser the kind of link. The type attribute specifies the type of data to expected, in this case a text file with CSS styles in it. Finally the href attribute points to the location of the file.
<link rel="stylesheet" type="text/css" href="css/main.css" />
Another way to in include a style sheet is using the CSS @import directive. This should be placed inside a HTML style tag. The example bellow shows how to use this method.
<style type="text/css">
@import url(css/main.css);
</style>
Selectors
So far you have learned what styles are, their structure and how they can be applied or included in a HTML file. As discussed, a selector, identifies the element to which the style should be applied. In the next section we will look at the different kinds of selectors, and how they can give you much more control over the look of your site.
Tag selectors
This a very efficient way to apply styles. They allow you to change the style to every tag element on you HTML file(s) matching the one specified in the CSS selector. In the example bellow, the style will change the font size to 12px to all paragraph elements.
p {
font-size: 12px;
}class selectors
The class type selector allows you to apply styles to all elements with a specific class. Class selectors work with the value of the class attribute in HTML tags. The example shows a style that applies to all elements with the class value “introtext”, setting the font size to 14px, and the line height to 22px.
.introtext {
font-size: 12px;
line-height: 22px;
}A few simple rules for using this selector are; must start with a dot(.), this tells the browser that its a class selector, after the period there must be a letter. Only letters, numbers, hyphens and underscores allowed in class names. Class names are case sensitive.
id selectors
This type of selector allows you to style a specific item on the page. Similar to class selectors, this id selectors work with the value of the id attribute of an element. The id attribute value should be a unique value on each page, so this will let you style only one element. The following example shows how id selectors are applied.
#header {
font-size: 22px;
font-weight: bold;
}The example applies the style to the element with the id value “header”. Notice that instead of the period(.) used in class selectors, this uses the hash symbol(#).
Descendant selectors
This type of selector lets you apply different styles to elements based on where they appear on the page. Lets say you have a div (division) tag on your page, inside this tag you have paragraphs and you want to display with different style than the paragraphs outside the division. The example bellow will apply a style to all paragraphs within a division element.
div p {
font-size: 12px;
}In the same way, descendant selector styles can be applied combining the tag, class and id selectors. The example bellow will style only the parapgraph elements that are within a division tag with the class attribute “footer”.
div.footer p {
color: red;
text-align: center;
}Group selectors
Creating group selectors allows you to manipulate multiple elements using the same style. Elements in this selector need to be separated by a comma. Elements can be identified by tag name, class or id, and it can include a descendant selector as well. The example sets the padding and margin property to zero to all selected elements.
h2, p, .content, #header, a.contact {
margin: 0;
padding: 0;
}Finally a style can be applied to all HTML tags on the document. The following example will format all text as bold.
* { font-weight: bold; }Pseudo classes and elements
Pseudo classes and elements allow you to select certain elements in different ways. Like for example, set a style to visited links, a style for a link when the mouse hover over it, etc. The main pseudo classes are: a:link, a:visited, a:hover, a:active, :before, :after, :fist-child, :focus. Here are some simple examples of pseudo classes and elements.
/* This is a comment, by the way */
a:hover { color: red; } /* The link red color when the mouse hovers over it */
a:visited { color: gray; } /* Visited links show in gray color */
p:before { content: "Hello"; } /* Inserts text before paragraph elements */
input:focus { background-color: #FFFFCC; }
/* Changes the background for input elements when user click or tabs into it */
What now..
There is no better way to learn something new than practice. With this basic CSS knowledge and a good reference like html Soup you should be able to start creating simple yet good looking web pages. The html Soup forum is another great resources to learn new things and share your knowledge.
