Website CSS – Keelan Rosa Colour & Design

CSS Background Tips

If you don’t know any CSS at all, you might want to check out the CSS Cheat Sheet before reading further. Changing backgrounds is pretty basic, but a little extra understanding won’t hurt.

Basic Backgrounds

Recolouring a background is easy enough: put body{background-color:#ffffff;} in your stylesheet, with whatever colour you want in place of the #ffffff.

Background images work in a similar way: body{background-image:url(background-image.png);}, with the name of your background image in the parentheses. By default, the image will repeat – you can change this by adding the background-repeat declaration, for example:
body{
background-image:url(background-image.png);
background-repeat:no-repeat;
}

To move the image away from the centre, use the background-position declaration: body{background-position:left top;} will align the image to the top left corner. You can get pixel-specific if ‘left top’ isn’t accurate enough: background-position:20px 100px; will put the background image twenty pixels from the left and a hundred pixels from the top.

It’s usually a good idea to specify a background colour even if you’re using a background image. The background colour will show if the image has transparent sections or doesn’t repeat over the whole screen anyway, but even if the image covers the entire screen, a background colour will come in useful if there’s ever a problem which prevents the image from loading.

If your code’s starting to feel a bit long, you can combine the background declarations. body{background:#ffffff url(background-image.png) no-repeat left center;} works the same as body{background-color:#ffffff;background-image:url(background-image.png);background-repeat:no-repeat;background-position:left center;}, and is significantly faster to type.

You don’t need to save all your cool backgrounds for the overall body, either. They can be used for everything from major columns to a few selected words, just by changing the chosen selector. blockquote{background-image:url(quote.png);} or something similar is commonly used to add a quotation mark image to blockquotes. strong{background-color:#f0e9a7;} will add a bit of colour to your any bold words in your text.

For greater precision, use IDs or classes: p.tip{background-color:#f0e9a7;} will only change the background colour if you specially mark a paragraph with <p class=”tip”>.

More Background Tricks

Attachments: Usually a background image will move along with the rest of the page as users scroll through the content. Use background-attachment:fixed; to keep a background in one place.

Lists: Bullet lists are normally marked with, well, a bullet. And a rather plain and ordinary one at that. This can easily be replaced with a bullet-sized image. Remove the old bullets with ul{list-style:none;} and add in the new ones with ul li{background:url(bullet.png) left top no-repeat;}. Unless your bullet image is very thin, you should also include padding-left: in your ul or li attribute, set wide enough to indent your list properly so the text doesn’t overlap the bullet image.

Gradients: CSS-generated gradient backgrounds are supported by most modern browsers and are popular on many types of websites. The trick is getting the gradient to work on all browsers – while many browsers support CSS gradients, they don’t use the same code. Chrome uses a -webkit prefix, Firefox needs -moz-linear, and (current) IE uses -ms-linear. (Old versions of IE use some kind of mess which i will not even attempt to interpret.) It’s probably a bit of a cop-out to not include a proper description of creating CSS gradients, but they’re worthy of an entire article on their own. CSS Tricks has a solid article on CSS gradients, and gradient generators exist to create the code for all browsers at once.

Looking for some good background colours (or any other colour to spice up your website)? You don’t need to stick with boring black-and-white! I can create a great five-colour website colour scheme for you. For $5, you can have a unique new website colour scheme.

Changing a Website Colour Scheme, Part Two: CSS Cheat Sheet

This is Part Two of the ‘Changing a Website Colour Scheme’ series. Still need to read Part One? Go to Changing a Website Colour Scheme: CSS Basics and learn everything you need to use this cheat sheet.

Basic Colour Options

There’s three main ways to declare colour in CSS: hex, RGB, and colour name.

Hex is most common among web designers. A hex code breaks a colour down into a six-figure code, ranging from #000000 (pure black) to #ffffff (pure white). Hex colours are declared by putting something like ‘color:#ff0000;’ in the appropriate place in your CSS.

RGB produces the same colours as hex; in fact, hex is a form of RGB itself. The first two digits in a hex code are red, the second two green, and the last two blue. Hex, however, uses letters as well as numbers, whereas RGB only uses numbers: pure black RGB will be 0,0,0 and pure white will be 255,255,255. This makes RGB codes a bit longer and less efficient to type out, but if you’ve found a colour listed only in RGB and don’t want to convert it to hex, RGB can be useful. RGB is declared with ‘color:rgb(255,0,0);’

Want to make something transparent? Change your declaration to ‘rgba(255,0,0,0.5);’. The last number is for alpha transparency, and can vary from 0.0 (completely transparent) to 1.0 (completely opaque).

Colour names are more limited than hex and RGB – hex or RGB can produce over 16 million different colours, but there’s only 147 different colour names which will work in CSS. Still, 147 is plenty of colour, and it’s much easier to remember ‘color:SeaGreen;’ than ‘color:#2e8b57;’. If you want precise control over your colours, hex or RGB is better, but if you just want a generic navy blue, names will work just fine. W3Schools has a list of colour names supported by all browsers to help you out.

Declarations Used to Change Colour

Background or background-color: will change the colour of the background. This doesn’t need to be used just for the overall background; ‘background’ can also be used to change the colour of a single element, such as a sidebar, navigation menu, paragraph, or link.

Color: despite the rather generic name, ‘color’ only changes the colour of text. It can be used in the body{ selector to change text throughout an entire webpage, or used in other selectors to change the text colour in a single element.

Border: puts a border around an element. You’ll also want to list size and type of border, for example ‘border:2px solid #ff0000;’. Borders can also be dotted or dashed, and you can make different borders on each side of an element by using ‘border-top’, ‘border-right’, ‘border-bottom’, and ‘border-left’ in place of ‘border’.

If you’re using borders on paragraphs or other text-heavy elements, you may also want to use the ‘padding’ declaration to give the text a little extra room (e.g. ‘padding:2px;’). Otherwise the text at the edges might bump up against the border and be difficult to read.

Sample Selectors & Declarations

body {background:#ccccff; color:#000033;} – changes the background of the overall site and all the main text
a {background:#cccccc; color:#333333;} – turns links dark grey and places them over a light grey background
p.alert {background:#ffffcc; color:#330000; border:2px solid #330000; padding:2px;} – for any paragraphs classed ‘alert’, changes the background to yellow and the text to red, and surrounds the alert with a red border
p.tip {background-color:#F0E9A7; padding:6px;}
p.tip strong {color:#07608E;}
This is what i use for my little yellow ‘tip’ paragraphs (like the one below, pointing you to Part One of this series). Without any extra styling, the HTML element <strong> only makes text bold, but it can be styled separately for different paragraph classes. In my ‘tip’ paragraphs, i’ve changed <strong> to a different colour from the rest of the text in order to make it stand out even more.

Changing a Website Colour Scheme, Part One: CSS Basics

The best way to change an entire website’s colour scheme is by using CSS. For those who are unfamiliar with it, CSS (or Cascading Style Sheet) is a method of consistently styling websites. A cascading style sheet can be saved as a separate file (usually style.css or something similar) and then linked to in the code of a website, meaning the same style sheet can be used for multiple web pages, or even multiple sites. Making a change in a style sheet which is used across a website will then change the entire website. Especially for large sites, it’s much more convenient to use one style sheet than to change every single page individually.

Selectors, IDs, Classes (and other things you don’t care about)

If you’re only recolouring a pre-existing site, you don’t need to know much about selectors, IDs, and classes. Use a tool like Firebug to find what you want to edit; it’ll show exactly what selector you need to change, as well as any relevant IDs and classes.

Using the Firebug inspector — Firebug can help you find your CSS selectors - just click the 'inspect' button and then mouse over what you want to change. The name of the element will instantly be highlighted, showing you what you need to change in your CSS.

Basically, a selector is something which can be changed using CSS, such as a paragraph, heading, or blockquote. Some selectors also have a class – for example, if you need a specially-styled paragraph for important announcements, you might create an ‘announcement’ class, and every paragraph classed as an announcement would look like your ‘announcement’ class, rather than a regular paragraph. IDs are similar to classes but more specific, usually used for something which will only appear once on a page, such as the main header.

Declarations (the bit you do care about)

Declarations are the changes you’re making to your selectors – the declaration of what you’re changing.

Example:

blockquote {background-color:#fe09a7;}

Here, ‘blockquote’ is the selector and ‘background-color’ is the declaration – basically, we’re declaring an intent to change the background colour of every blockquote on the site.

External Style Sheets

There’s several ways to put CSS in a website, but using an external style sheet is the most convenient for making sitewide changes. An external style sheet is a file consisting entirely of CSS selectors and declarations, and is linked to in pages by putting <link rel=”stylesheet” type=”text/css” href=”yourstylesheet.css” > between the <head> tags at the top of your site.

If you’re recolouring an existing site, all the work of creating and linking an external style sheet is already done. Just find your old style sheet – it will end in .css and will probably be named something like style.css. Save a backup copy so you can revert if necessary and edit away.

Advanced tip: once you know how to create external style sheets, you know everything you need to start making WordPress child themes. Child themes allow you to customise a WordPress theme without worrying about losing your customisations if the theme is changed or updated. Creating a child theme is as simple as adding a special header to a CSS file and uploading it to your site as a theme.

And now, a confession: I am maybe a bit too much of a CSS geek to be writing this sort of thing. I’m quite certain there’s one or two (or ten) things i skimmed over as ‘too obvious’ which aren’t obvious to everyone else. So what can i do to make this ‘basic’ article clearer to you?

Still deciding where to start? Check out Changing a Website Colour Scheme, Part Two: CSS Cheat Sheet now for a colour-centric list of CSS selectors and declarations.