The Box Model - Tutorials

Colours

April 6th, 2009 by - admin

CSS brings 16,777,216 colours to your disposal. They can take the form of a name, an rgb (red/green/blue) value or a hex code.

red
Is the same as
rgb(255,0,0)
Which is the same as
rgb(100%,0%,0%)
Which is the same as
#ff0000
Which is the same as
#f00

There are 17 valid predefined colour names. They are aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, orange, purple, red, silver, teal, white, and yellow.

transparent is also a valid value.

The three values in the rbg value are from 0 to 255, 0 being the lowest level (for example no red), 255 being the highest level (for example full red). These values can also be a percentage.

Hexadecimal (previously and more accurately known as ‘sexadecimal‘) is a base-16 number system. We are generally used to the decimal number system (base-10, from 0 to 9), but hexadecimal has 16 digits, from 0 to f.

The hex number is prefixed with a hash character (#) and can be three or six digits in length. Basically, the three-digit version is a compressed version of the six-digit (#f00 becomes #ff0000, #c96 becomes #cc9966 etc.). The three-digit version is easier to decipher (the first digit, like the first value in rgb, is red, the second green and the third blue) but the six-digit version gives you more control over the exact colour.

‘color’ and ‘background-color’

Colours can be applied by using color and background-color (note that this must be the American English ‘color’ and not ‘colour’).

A blue background and yellow text could look like this:


h1 {
	color: yellow;
	background-color: blue;
}

These colours might be a little too harsh, so you could change the code of your CSS file for slightly different shades:


body {
	font-size: 0.8em;
	color: navy;
}

h1 {
	color: #ffc;
	background-color: #009;
}

Save the CSS file and refresh your browser. You will see the colours of the first heading (the h1 element) have changed to yellow and blue.

You can apply the color and background-color properties to most HTML elements, including body, which will change the colours of the page and everything in it.

Posted in Uncategorized | No Comments »

CSS Selectors, Properties, and Values

April 6th, 2009 by - admin

Whereas HTML has tags, CSS has ‘selectors‘. Selectors are the names given to styles in internal and external style sheets. In this CSS Beginner Tutorial we will be concentrating on HTML selectors, which are simply the names of HTML tags and are used to change the style of a specific tag.

For each selector there are ‘properties‘ inside curly brackets, which simply take the form of words such as color, font-weight or background-color.

A value is given to the property following a colon (NOT an ‘equals’ sign) and semi-colons separate the properties.


body {
	font-size: 0.8em;
	color: navy;
}

This will apply the given values to the font-size and color properties to the body selector.

So basically, when this is applied to an HTML document, text between the body tags (which is the content of the whole window) will be 0.8 ems in size and navy in colour.

Lengths and Percentages

There are many property-specific units for values used in CSS, but there are some general units that are used in a number of properties and it is worth familiarising yourself with these before continuing.

em (such as font-size: 2em) is the unit for the calculated size of a font. So “2em”, for example, is two times the current font size.

px (such as font-size: 12px) is the unit for pixels.

pt (such as font-size: 12pt) is the unit for points.

% (such as font-size: 80%) is the unit for… wait for it… percentages.

Other units include pc (picas), cm (centimetres), mm (millimetres) and in (inches).

When a value is zero, you do not need to state a unit. For example, if you wanted to specify no border, it would be border: 0.

A web page is not a static, absolute medium. It is meant to be flexible and the user should be allowed to view the web page how the hell they like, which includes the font size and the size of the screen.

Because of this, it is generally accepted that ‘em’ or ‘%’ are the best units to use for font-sizes (and possibly even heights and widths, which we shall come across in the CSS Advanced Tutorial), rather than ‘px’, which leads to non-resizable text in most browsers, and should be used sparingly, for border sizes for example.

The original post can be found at: http://htmldog.com/guides/cssbeginner/selectors/

Posted in Uncategorized | No Comments »

Applying CSS

April 6th, 2009 by - admin

There are three main ways of using CSS with your web document. They are listed below:

In-line

In-line styles are placed straight into the HTML tags using the style attribute.

They look something like this:


<p style="color: red">text</p>

This will make that specific paragraph red.

But, if you remember, the best-practice approach is that the HTML should be a stand-alone, presentation free document, and so in-line styles should be avoided wherever possible.

Internal

Embedded, or internal styles are used for the whole page. Inside the head tags, the style tags surround all of the styles for the page.

This would look something like this:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>CSS Example</title>
<style type="text/css">
	p {
		color: red;
	}

	a {
		color: blue;
	}
</style>
...

This will make all of the paragraphs in the page red and all of the links blue.

Similarly to the in-line styles, you should keep the HTML and the CSS files separate, and so we are left with our saviour…

External

External styles are used for the whole, multiple-page website. There is a separate CSS file, which will simply look something like:


p {
	color: red;
}

a {
	color: blue;
}

If this file is saved as “web.css” then it can be linked to in the HTML like this:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
	<title>CSS Example</title>
	<link rel="stylesheet" type="text/css" href="web.css" />
...

The original article can be seen here: http://htmldog.com/guides/cssbeginner/applyingcss/

Tags: CSS, External, In-line, Internal
Posted in Applying CSS | No Comments »

!important

March 12th, 2009 by - admin

The !important rule is used to make your CSS cascade. But make sure not to use that feature all the time, and apply the rule only when you feel it is most important to be applied and can’t avoid it by doing it in the other way. When you apply the !important property it will always be applied no matter where that rule appears in the CSS document. So, to make the paragraph text color, font-size etc to a different settings than the one which is already applied, here is the example of the same:

489588773_cbb22c06241