Presentation Description

Comments

Presentation Transcript

XHTML :

XHTML Introduction to CSS

Applying CSS :

2 Applying CSS There are three ways of applying CSS to HTML:
In-line
Internal/Embedded
External/Linked

Inline Styles :

3 Inline Styles In-line styles are plonked 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.
The ideal is that the HTML should be a stand-alone, presentation free document, and so in-line styles should be avoided wherever possible.

Internal Styles :

4 Internal Styles Internal styles are used for the whole page. Inside the head tags, the style tag surrounds all of the styles for the page.
<html>
<head><title>CSS Example</title>
<style type="text/css">
p {
color: red;
}
a {
color: blue;
}
</style> ...

Internal Styles :

5 Internal Styles 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...

Lengths and Percentages :

11 Lengths and Percentages Other units include 'pc' (picas – 1/6 of an inch), '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.

Lengths and Percentages :

12 Lengths and Percentages Note: 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, rather than 'px', which leads to non-resizable text in most browsers, and should be used sparingly, for border sizes for example.

font-family :

19 font-family This is the font itself, such as 'Times New Roman', 'Arial' or 'Verdana'.
The font you specify must be on the user's computer, so there is little point in using obscure fonts. There are a select few 'safe' fonts (the most commonly used are arial, verdana and times new roman)
But you can specify more than one font, separated by commas. The purpose of this is that if the user does not have the first font you specified, the browser will go through the list until it finds one it does have. This is useful because different computers sometimes have different fonts installed.