What is CSS and what does it do?

The acronym CSS stands for Cascading Style Sheets. Basically it is a way to save time by saying only once what you want your pages to look like, instead of having to repeat it in HTML on every page.

In static old style HTML, for example, this kind of code was a relatively common sight:

<h1><font face=”Arial”>This is the Title of this Article!</font><h1>

<p><font face=”Arial”>This is a paragraph of text in the article.</font></p>

With a Content Management System, which includes a theme and a style sheet, you do not specify font tags at all on a page. They are set by your Theme in it’s style sheet. When you select the header 1 tag for titles, the page will display the style (font, size and colour) that is selected on your style sheet for the header 1 tags.

This keeps your website consistent in design and enables you to change the look and feel of it, all on this one page.

The cascading part of the name refers to the hierarchical nature of the classes that determine which rule should be used.

CSS Headings and Lists.

Thanks to CSS, you can make documents that make sense to a human reading them, instead of having the text weighed down with lots of presentation code. This has two great effects: it makes web pages smaller ( so they download faster), and it makes them simpler to write, as the style is already set and you only need to think of it, if you wish to change one element from it’s default.

Using a CMS, the only things you need to format are headings, block quotes and lists. The style sheet has options on how these will display, and you use the WYSIWYG editor to tag the content.

You use heading tags for the title and subtitles of your page – they’re on the dropdown menu on the second row of your editor. Choosing Header 1 is most often used to display a title, usually in the largest font size with a contrasting colour. If you select a phrase and select header 1 and then switch to HTML view, you’ll see the phrase has been wrapped in the header tags like this

<h1>Article title</h1>

The HTML tags begin with h. on your style sheet and there are normally 6 that slowly decrease in size. By specifying different styles on your style sheet, you can select any header tag and it will display as you specified. The style does not have to be decreasing in size, it can be a way to use 6 different coloured titles all in the same size if you choose. That is the value of CSS.

Colour and CSS.

Add more than one colour to a page and all other colours look different. Some colours complement each other, and some look dreadful together. You should usually avoid having too many different colours on one page, it will look garish. For a harmonic design, use a dark colour (black), a light colour (white), and various hues of one other colour. The easiest mistake to make is to use CSS colour words (background-color: orange, for example), because they are too intense. Instead create colour variations with specific and related hex codes.

Lists and CSS

Lists, are used to make lists, bulleted points, or short statements about things. For example, instead of just putting links one after the other horizontally, to make a navigation bar, you could put them in a list, using the ul and li tags. Look for the bullet or numbered list icons on your editor to make a list. By default they use numbers of circular dots before each entry on the list.

However by entering an image choice on your style sheet, you can make every list you create use this image instead. You can also change the line height and font family and size if you wish to.

The HTML for a typical tagged list looks like this:

<ul><li>item 1</li><li>item 2</li></ul>

Your Theme comes with a detailed preconfigured style sheet. You can edit this in the theme editor.

HTML and CSS

HTML is very easy to figure out, and from there all you have to do is learn a little CSS. There are plenty of good websites and books on it, and there’s not that much to learn really. When you see an effect you’d like to use on any website, anywhere, knowing HTML means that you can simply use your browser’s ‘View Source’ function (use a right click on a page and choose this option) to see how it was done. Then you can adapt it for your own website.

You’ll also be able to start building a small library of useful code you’ve written yourself. Cheat sheets for formatting a HTML link, for tables, for a two-column layout, for a splash page, for shortcodes etc. These snippets of code can be quickly adapted as they’re needed.

Adding a New Style to a Style Sheet

If there is an element that you wish to style you can create a new class and add it, and it’s configuration, to the Theme style sheet. Once the class is defined, you can call this style specifically, with a style tag that you can add to an element with tags, on a post or page, in HTML view.

It sounds more complicated than it is.

Once you “get” that your CMS, HTML and CSS work hand in hand, you are half way there.

The format for a class is very simple. You can add configuration options by stealing them from other style classes, such as copying the font family option from the h1 style class, or the padding option from a widget style class.

If the style is already there such as h1, it will work automatically. But if you want to style the output for a plugin, you need to add a function somewhere so that something calls the style. This could be on the page in the HTML. In a page template in your Theme. Or in a specified area of a plugin. If it’s not obvious as to where this is, ask in a forum for some help and you’ll get it quite easily.

Some Detail About CSS

CSS lets you apply styling information to specific parts of your HTML, identified by tag, or by IDs and classes you specify. This is done using CSS selectors.

CSS selectors rely on your tags having classes and IDs – the only real difference between an ID and a class is that an ID refers to one tag and one only, while a class can refer to more than one. If you just have the name of a tag on its own, then your CSS rules will affect all of those tags. If you use a tag’s name followed by a dot and the name of a class, then you’ll affect all of those tags with that class. Using a tag, a hash and an ID name will affect only the tag with that ID. Using the hash and ID alone will work on any tag with that ID, while using a dot and class name along works on any tag with that class.

CSS Selectors Examples:

p – all paragraphs

p.thing – all paragraphs in the ‘thing’ class

p#thing – the paragraph with the ID ‘thing’

.thing – all tags in the ‘thing’ class

#thing – the tag with the ID ‘thing’

To add rules to each one of these selectors, you just put curly brackets ({}) after it, and then put the rules between the brackets.

Useful CSS Rules.

CSS rules look like this:

rule-name: setting;

Here are some of the most useful rule names and the different settings that can be applied to them.

background-color. Lets you set a page’s background colour using HTML colours such as #123456).

color. Sets colours for text.

font-family. Lets you set fonts for your text – in case your first choice is not available you can add more than one font name, to make a font family separated by commas .

font-size. You can set the font size in px or em – it’s better to use em, as these measurements are relative rather than absolute.

width and height. Lets you specify the width and height of things. You can use px or percentages.

margin. The amount of space around the edges of some content. You can add -left, -right, -top and -bottom to margin to specify these margins individually.

padding. Works the same way as margin, but is for the space between the edges of the tag’s box and its content, instead of the space between the tag’s box and other boxes.

border. Puts borders around boxes. Takes three settings (width, type and colour), so you have to put spaces between them, like this: border: 1px solid black;

text-align. Lets you align text on the left or right, or in the centre (‘center’).

text-decoration. Controls some text effects – mainly used to stop links from being underlined, like this: a { text-decoration: none; }

float. Tells content to float over other content, instead of starting underneath it on a new line. This is the tag most often used to simulate the kind of effects that you get with tables – floating a div and setting the main content area’s margin to its width is one of the easiest ways to create a sidebar, for example.

CSS and Events such as Hover

You might also like to make use of the various CSS ‘events’, such as the hover event. Take a look at this example CSS:

a link:hover {
background-color: yellow;
}

Depending on the element it makes something go yellow when the user hovers over it, a great way to highlight a link on a page to draw attention to the fact that it is a link, without making an ugly page of text that is constantly highlighted in yellow.

Another use for a style sheet is by creating a separate style sheet for specific people. You could have one to print a web page, to increase font size for people who’s sight is poor, or a specific style sheet for forms. To use an alternate style sheet, you will need to call it in a page template or in a page, otherwise the default style sheet will be used.

Enhanced by Zemanta

Tagged with:

Filed under: 29 Steps29 Steps-2ThemeTutorials

Like this post? Tell someone about it! Share the link with social communities like Facebook by clicking on the orange SHARE icon above. look for the envelope icon to email the article to a friend. When you click MORE scroll down the list to PRINT or PDF to save the article for future reading.