xhtml introduction to css. ©nina bresnihan, dept. of computer science, tcd 2004 2 applying css ...

XHTMLXHTML

Introduction to CSSIntroduction to CSS

©Nina Bresnihan, Dept. of Comput©Nina Bresnihan, Dept. of Computer Science, TCD 2004er Science, TCD 2004

22

Applying CSSApplying CSS

There are three ways of applying CSS to HTML:There are three ways of applying CSS to HTML:• In-lineIn-line• Internal/EmbeddedInternal/Embedded• External/LinkedExternal/Linked


33

Inline StylesInline Styles

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

They look something like this:They look something like this:<p style="color: red">text</p> This will make that specific paragraph red.This will make that specific paragraph red.

The ideal is that the HTML should be a stand-The ideal is that the HTML should be a stand-alone, alone, presentation freepresentation free document, and so in- document, and so in-line styles should be avoided wherever possible.line styles should be avoided wherever possible.


44

Internal StylesInternal Styles

InternalInternal styles are used for the whole page. styles are used for the whole page. Inside the head tags, the Inside the head tags, the stylestyle tag surrounds all tag surrounds all of the styles for the page.of the styles for the page.

<html> <head><title>CSS Example</title> <style type="text/css">

p { color: red;

} a {

color: blue; }

</style> ...


55

Internal StylesInternal Styles

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

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


66

External StylesExternal Styles

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

p {

color: red;

}

a {

color: blue;

}


77

External StylesExternal Styles

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

<html> <html>

<head> <title>CSS Example</title> <head> <title>CSS Example</title>

<link rel="stylesheet" type="text/css“ href="web.css" /> ...


88

Selectors, Properties and ValuesSelectors, Properties and Values

Whereas HTML has Whereas HTML has tagstags, CSS has ', CSS has 'selectorsselectors'. '. Selectors are the names given to styles in internal Selectors are the names given to styles in internal and external style sheets. and external style sheets.

Selectors Selectors are simply the names of HTML tags and are simply the names of HTML tags and are used to change the style of a specific tag.are used to change the style of a specific tag.

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

A A valuevalue is given to the property following a is given to the property following a coloncolon (NOT an 'equals' sign) and (NOT an 'equals' sign) and semi-colonssemi-colons separate the separate the properties.properties.


99

Selectors, Properties and ValuesSelectors, Properties and Values

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.


1010

Lengths and PercentagesLengths and Percentages There are many property-specific units for values There are many property-specific units for values

used in CSS, but there are some general units used in CSS, but there are some general units that are used in a number of properties and it is that are used in a number of properties and it is worth familiarising yourself with these before worth familiarising yourself with these before continuing.continuing.• ''emem' (such as ' (such as font-size: 2em) is an element ) is an element

approximately equal to the approximately equal to the height of a height of a charactercharacter..

• ''pxpx' (such as ' (such as font-size: 12px) is the unit for ) is the unit for pixelspixels..

• ''ptpt' (such as ' (such as font-size: 12pt) is the unit for ) is the unit for pointspoints..

• ''%%' (such as ' (such as font-size: 80%) is the unit for... ) is the unit for... wait for it... wait for it... percentagespercentages..


1111

Lengths and PercentagesLengths and Percentages

Other units include 'Other units include 'pcpc' (picas – 1/6 of an inch), ' (picas – 1/6 of an inch), ''cmcm' (centimetres), '' (centimetres), 'mmmm' (millimetres) and '' (millimetres) and 'inin' ' (inches).(inches).

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


1212

Lengths and PercentagesLengths and Percentages

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

Because of this, it is generally accepted that 'em' Because of this, it is generally accepted that 'em' or '%' are the best units to use for font-sizes, or '%' are the best units to use for font-sizes, rather than 'px', which leads to non-resizable text rather than 'px', which leads to non-resizable text in most browsers, and should be used sparingly, in most browsers, and should be used sparingly, for border sizes for example.for border sizes for example.


1313

ColoursColours

CSS brings CSS brings 16,777,21616,777,216 colours to your disposal. colours to your disposal. They can take the form of a They can take the form of a namename, an ', an 'rgbrgb' ' (red/green/blue) value or a '(red/green/blue) value or a 'hexhex' code.' code.

redIs the same asIs the same asrgb(255,0,0)Which is the same asWhich is the same asrgb(100%,0%,0%)Which is the same asWhich is the same as#ff0000Which is the same asWhich is the same as#f00


1414

ColoursColours

There are 16 valid predefined colour names. These There are 16 valid predefined colour names. These are are aquaaqua, , blackblack, , blueblue, , fuchsiafuchsia, , graygray, , greengreen, , limelime, , maroonmaroon, , navynavy, , oliveolive, , purplepurple, , redred, , silversilver, , tealteal, , whitewhite, and , and yellowyellow. . TransparentTransparent is also a valid is also a valid value.value.

The 3 values in the rbg value are from 0 to 255, 0 The 3 values in the rbg value are from 0 to 255, 0 being the lowest level (e.g. no red), 255 being the being the lowest level (e.g. no red), 255 being the highest level (e.g. full red). The values can also be a highest level (e.g. full red). The values can also be a percentage.percentage.

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


1515

ColoursColours

The hex number is defined by a hash character The hex number is defined by a hash character ((##) and can be three or six digits in length. ) and can be three or six digits in length.

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


1616

'color' and 'background-color''color' and 'background-color'

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

A blue background and yellow text could look like A blue background and yellow text could look like this:this:h1 {

color: yellow; background-color: blue;

} These colours might be a little too harsh, so you These colours might be a little too harsh, so you

could change the code of your CSS file for slightly could change the code of your CSS file for slightly different shades:different shades:


1717

'color' and 'background-color''color' and 'background-color'

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

} h1 {

color: #ffc; background-color: #009;

}

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


1818

TextText

You can alter the size and shape of the text on a You can alter the size and shape of the text on a web page with a range of properties, outlined web page with a range of properties, outlined below:below:• font-familyfont-family• font-sizefont-size• font-weightfont-weight• font-stylefont-style• text-decorationtext-decoration• text-transformtext-transform• Text SpacingText Spacing


1919

font-familyfont-family

This is the font itself, such as 'Times New Roman', This is the font itself, such as 'Times New Roman', 'Arial' or 'Verdana'.'Arial' or 'Verdana'.

The font you specify must be on the user's The font you specify must be on the user's computer, so there is little point in using obscure computer, so there is little point in using obscure fonts. There are a select few 'fonts. There are a select few 'safesafe' fonts (the most ' fonts (the most commonly used are arial, verdana and times new commonly used are arial, verdana and times new roman)roman)

But you can specify more than one font, separated But you can specify more than one font, separated by by commascommas. The purpose of this is that if the user . The purpose of this is that if the user does not have the first font you specified, the does not have the first font you specified, the browser will go through the list until it finds one it browser will go through the list until it finds one it does have. This is useful because different does have. This is useful because different computers sometimes have different fonts installed. computers sometimes have different fonts installed.


2020

font-familyfont-family

So So font-family: arial, helvetica, for , for example, is used so that similar fonts are used on example, is used so that similar fonts are used on PC (which usually has arial, but not helvetica) and PC (which usually has arial, but not helvetica) and Apple Mac (which does not usually have arial, and Apple Mac (which does not usually have arial, and so helvetica, which it does normally have, will be so helvetica, which it does normally have, will be used).used).

Note: if the name of a font is more than one word, Note: if the name of a font is more than one word, it should be put in quotation marks, such as it should be put in quotation marks, such as font-family: "Times New Roman"..


2121

font-sizefont-size

The size of the font. The size of the font.

Be careful with this - text such as headings Be careful with this - text such as headings should not just be a paragraph in a large font; should not just be a paragraph in a large font; you should still use headings (you should still use headings (h1, , h2 etc.) even etc.) even though, in practice, you could make the font-size though, in practice, you could make the font-size of a paragraph larger than that of a heading (not of a paragraph larger than that of a heading (not recommended for sensible people).recommended for sensible people).


2222

font-weightfont-weight

This states whether the text is This states whether the text is boldbold or not. or not.

In practice this usually only works as In practice this usually only works as font-weight: bold or or font-weight: normal. .

In theory it can also be In theory it can also be bolder, , lighter, , 100, , 200, , 300, , 400, , 500, , 600, , 700, , 800 or or 900, but , but seeing as many browsers shake their heads and seeing as many browsers shake their heads and say 'I don't think so', it's safer to stick with bold say 'I don't think so', it's safer to stick with bold and normal.and normal.


2323

font-stylefont-style

This states whether the text is This states whether the text is italicitalic or not. or not.

It can be It can be font-style: italic or or font-style: normal.


2424

text-decorationtext-decoration

This states whether the text is underlined or not. This states whether the text is underlined or not. This can be:This can be:• text-decoration: overline, which places a , which places a

line above the text. line above the text. • text-decoration: line-through, strike-, strike-

through, which puts a line through the text. through, which puts a line through the text. • text-decoration: underline SHOULD SHOULD

ONLY BE USED FOR LINKSONLY BE USED FOR LINKS because users because users generally expect underlined text to be links.generally expect underlined text to be links.

This property is usually used to decorate links, This property is usually used to decorate links, such as specifying no underline with such as specifying no underline with text-decoration: none. .


2525

text-transformtext-transform

This will change the case of the text.This will change the case of the text.• text-transform: capitalize turns the first turns the first

letter of every word into uppercase.letter of every word into uppercase.• text-transform: uppercase turns everything turns everything

into uppercase.into uppercase.• text-transform: lowercase turns everything turns everything

into lowercase.into lowercase.• text-transform: none I'll leave for you to I'll leave for you to

work out.work out.


2626

TextText

body { font-family: arial, helvetica, serif; font-size: 0.8em;

} h1 {

font-size: 2em; } h2 {

font-size: 1.5em; } a {

text-decoration: none; } strong {

font-style: italic; text-transform: uppercase; }


2727

Text SpacingText Spacing

The The letter-spacing and and word-spacing properties are for spacing between letters or properties are for spacing between letters or words. The value can be a length or words. The value can be a length or normal..

The The line-height property sets the height of the property sets the height of the lines in an element, such as a paragraph, without lines in an element, such as a paragraph, without adjusting the size of the font. It can be a length, a adjusting the size of the font. It can be a length, a percentage or percentage or normal..


2828


The The text-align property will align the text inside property will align the text inside an element to an element to left, , right, , center or or justify..

The The text-indent property will indent the first line property will indent the first line of a paragraph to a given length or percentage. of a paragraph to a given length or percentage. This is a format usually used in print, and rarely in This is a format usually used in print, and rarely in digital media such as the web.digital media such as the web.


2929


p {

letter-spacing: 0.5em;

word-spacing: 2em;

line-height: 1.5em;

text-align: center;

}


3030

Margins and PaddingMargins and Padding margin and and padding are the two most commonly are the two most commonly

used properties for spacing-out elements. A used properties for spacing-out elements. A margin is the space margin is the space outsideoutside of the element, of the element, whereas padding is the space whereas padding is the space insideinside the the element.element.

h2 { font-size: 1.5em; background-color: #ccc; margin: 1em; padding: 3em; }


3131

Margins and PaddingMargins and Padding

You will see that this leaves one-character width You will see that this leaves one-character width space around the secondary header and the space around the secondary header and the header itself is fat from the three-character width header itself is fat from the three-character width padding.padding.

The four sides of an element can also be set The four sides of an element can also be set individually. individually. margin-top, , margin-right, , margin-bottom, , margin-left, , padding-top, , padding-right, , padding-bottom and and padding-left are are the self-explanatory properties you can use.the self-explanatory properties you can use.


3232

The Box ModelThe Box Model Margins, padding and borders (later) are all part of Margins, padding and borders (later) are all part of

what's known as the what's known as the Box ModelBox Model. The Box Model . The Box Model works like this: in the middle you have the element works like this: in the middle you have the element box (let's say an image), surrounding that you have box (let's say an image), surrounding that you have the padding box, surrounding that you have the the padding box, surrounding that you have the border box and surrounding that you have the border box and surrounding that you have the margin box. It can be visually represented like this:margin box. It can be visually represented like this:

The box model can be applied to every element on The box model can be applied to every element on the page.the page.


3333

BordersBorders

BordersBorders can be applied to most HTML elements can be applied to most HTML elements within the body.within the body.

To make a border around an element, all you need To make a border around an element, all you need is is border-style. The values can be . The values can be solid, , dotted, , dashed, , double, , groove, , ridge, , inset and and outset..

border-width sets the sets the widthwidth of the border, which of the border, which is usually in pixels. There are also properties for is usually in pixels. There are also properties for border-top-width, , border-right-width, , border-bottom-width and and border-left-width..

Finally, Finally, border-color sets the colour. sets the colour.


3434

BordersBorders

h2 { border-style: dashed; border-width: 3px; border-left-width: 10px; border-right-width: 10px; border-color: red;

} This will make a red dashed border around all This will make a red dashed border around all

HTML secondary headers (the HTML secondary headers (the h2 element) that is element) that is 3 pixels wide on the top and bottom and 10 pixels 3 pixels wide on the top and bottom and 10 pixels wide on the left and right (these having over-wide on the left and right (these having over-ridden the 3 pixel wide width of the entire border).ridden the 3 pixel wide width of the entire border).


3535

Putting It All TogetherPutting It All Together

You should download the HTML file You should download the HTML file cssintro.htmcssintro.htm and add the line that we added at the start of this and add the line that we added at the start of this lecture, linking the HTML file to the CSS file.lecture, linking the HTML file to the CSS file.

The code that follows covers all of the CSS The code that follows covers all of the CSS methods in this lecture. If you copy and paste this methods in this lecture. If you copy and paste this into notepad and save it as your CSS file and look into notepad and save it as your CSS file and look at the HTML file then you should now understand at the HTML file then you should now understand what each CSS property does and how to apply what each CSS property does and how to apply them. The best way to fully understand all of this them. The best way to fully understand all of this is to mess around with the HTML and the CSS files is to mess around with the HTML and the CSS files and see what happens when you change things.and see what happens when you change things.


3636

CSS CodeCSS Code

body { body { font-family: arial, helvetica, sans-serif; font-family: arial, helvetica, sans-serif; font-size: 80%; font-size: 80%; color: black; color: black; background-color: #ffc; background-color: #ffc; margin: 1em; margin: 1em; padding: 0; padding: 0;

} } /* By the way, this is a comment */ /* By the way, this is a comment */ p { p { line-height: 1.5em; line-height: 1.5em;

} }


3737

CSS Code (cont.)CSS Code (cont.)h1 { h1 { color: #ffc; color: #ffc; background-color: #900; background-color: #900; font-size: 2em; font-size: 2em; margin: 0; margin: 0; margin-bottom: 0.5em; margin-bottom: 0.5em; padding: 0.25em; padding: 0.25em; font-style: italic; font-style: italic; text-align: center; text-align: center; letter-spacing: 0.5em; letter-spacing: 0.5em; border-bottom-style: solid; border-bottom-style: solid; border-bottom-width: 0.5em; border-bottom-width: 0.5em; border-bottom-color: #c00; border-bottom-color: #c00;

}}


3838

CSS Code (cont.)CSS Code (cont.)

h2 { h2 { color: white; color: white; background-color: #090; background-color: #090; font-size: 1.5em; font-size: 1.5em; margin: 0; margin: 0; padding: 0.1em; padding: 0.1em; padding-left: 1em; padding-left: 1em;

} } h3 { h3 { color: #999; color: #999; font-size: 1.25em; font-size: 1.25em;

}}


3939


img { img {

border-style: dashed; border-style: dashed;

border-width: 2px; border-width: 2px;

border-color: #ccc; } border-color: #ccc; }

a { a {

text-decoration: none; text-decoration: none;

}}

strong { strong {

font-style: italic; font-style: italic;

text-transform: uppercase; text-transform: uppercase;

} }


4040


li { li {

color: #900; color: #900;

font-style: italic; font-style: italic;

} }

table { table {

background-color: #ccc; background-color: #ccc;

} }


4141

The Mighty <div> TagThe Mighty <div> Tag

• Tables may be great for representingTables may be great for representing tabular data tabular data fields, but when they're used to lay out a Webfields, but when they're used to lay out a Web page, they are a page, they are a cclulunknky work-around and one of y work-around and one of the biggestthe biggest abuses of HTML. abuses of HTML.

• UsingUsing CSS and the mighty <div> tag, you can CSS and the mighty <div> tag, you can control the color, size, margins, ancontrol the color, size, margins, and d presentation presentation of most objects found on a page. of most objects found on a page.

• You can alsoYou can also place elements place elements exactly where you exactly where you want them, without interrupting the flow ofwant them, without interrupting the flow of your your document’s structure.document’s structure.


4242

The <div> TagThe <div> Tag

<div> <div> • Used forUsed for formatting formatting large blocks of text, images, and large blocks of text, images, and

just about anything else thatjust about anything else that has an HTML tag around has an HTML tag around it. it.

<div> <div> <h3>Hi, welcome to the div tag.</h3> <h3>Hi, welcome to the div tag.</h3> <p><img src=“mydiv.gif"><p><img src=“mydiv.gif"></p></p> <h4>All these elements are contained <h4>All these elements are contained within a div</h4> within a div</h4> </div></div>


4343

Class and ID SelectorsClass and ID Selectors

Previously we looked solely at HTML selectors - Previously we looked solely at HTML selectors - those that represent an HTML tag.those that represent an HTML tag.

You can also define your own selectors in the You can also define your own selectors in the form of form of ClassClass and and IDID selectors. selectors.

The benefit of this is that you can have the same The benefit of this is that you can have the same HTML element, but present it differently HTML element, but present it differently depending on its class or ID.depending on its class or ID.

In the CSS, a class selector is a name preceded In the CSS, a class selector is a name preceded by a by a full stopfull stop ( (..) and an ID selector is a name ) and an ID selector is a name preceded by a preceded by a hash characterhash character ( (##).).


4444


So the CSS might look something like:So the CSS might look something like:

#top {

background-color: #ccc;

padding: 1em

}

.intro {

color: red;

font-weight: bold;

}


4545


The HTML refers to the CSS by using the The HTML refers to the CSS by using the attributes attributes id and and class. It could look something . It could look something like this:like this:

<div <div id="top“>

<h1>Chocolate curry</h1> <h1>Chocolate curry</h1>

<p <p class="intro“>This is my recipe for This is my recipe for making curry purely with chocolate</p> <p making curry purely with chocolate</p> <p class="intro“>Mmm mm mmmmm</p> </div> Mmm mm mmmmm</p> </div>


4646


The difference between an ID and a class is that The difference between an ID and a class is that an ID can be used to identify one element, an ID can be used to identify one element, whereas a class can be used to identify more whereas a class can be used to identify more than one.than one.

You can also apply a selector to a specific HTML You can also apply a selector to a specific HTML element by simply stating the HTML selector first, element by simply stating the HTML selector first, so so p.jam { whatever } will only be applied to will only be applied to paragraphparagraph elements that have the class 'jam'. elements that have the class 'jam'.


4747

CSS PositioningCSS Positioning

The div properties The div properties we have to look atwe have to look at are are::

ppositioositionn heightheight

llefteft z-indexz-index

ttopop vvisibilityisibility

widthwidth ccliplip


4848


PositionPosition

• Can be Can be relativerelative or or absoluteabsolute (default is (default is relativerelative))

• relativerelative: : works the way you'dworks the way you'd expect a expect a normalnormal html html page to flow. Things come in from thepage to flow. Things come in from the top and lay top and lay themselves out, with each element's positionthemselves out, with each element's position determined by the previous element's end point.determined by the previous element's end point.

• The The absoluteabsolute setting positions elements based on setting positions elements based on their distancetheir distance from their parent's upper-left corner. from their parent's upper-left corner.


4949


PositionPosition

• So if you have a paragraph that isn't contained within So if you have a paragraph that isn't contained within any elements, its position is determined by the upper any elements, its position is determined by the upper left-hand corner of the body. left-hand corner of the body.

• But if you've contained it within a <div> tag, the But if you've contained it within a <div> tag, the paragraph's position is determined by the upper-left paragraph's position is determined by the upper-left corner of the <div> that contains it. corner of the <div> that contains it.


5050


leftleft and and toptop• The The leftleft and and toptop properties refer to the amount of properties refer to the amount of

space from thespace from the starting position of the element.starting position of the element.

div{position:absolute;left:135px;top:100px;background:green}


5151



5252


• Absolutely positioned elements show up the number Absolutely positioned elements show up the number of units youof units you specify from the left and top of their specify from the left and top of their parent element. parent element.

• Units areUnits are in the standard CSS units: pixels - px, points in the standard CSS units: pixels - px, points - pt, inches – in- pt, inches – in, , and percentage - %. and percentage - %.

• So a So a <div><div> that's at the top level of the HTML that's at the top level of the HTML hierarchy with anhierarchy with an absolute positioning of left: 50pxabsolute positioning of left: 50px;; top: 50px, would appear 50top: 50px, would appear 50 pixels from the left, and pixels from the left, and 50 pixels from the top of the page. 50 pixels from the top of the page.


5353


z-indexz-index

• The The z-indexz-index determines which elements are drawn determines which elements are drawn over others.over others.

• Eg.Eg., if you have two elements that inhabit the same, if you have two elements that inhabit the same space, you need to specify which gets drawn and space, you need to specify which gets drawn and which iswhich is hidden. hidden.

• The one with the highest z-index number gets placed The one with the highest z-index number gets placed onon top, while the one with the lowest gets placed on top, while the one with the lowest gets placed on the bottom.the bottom.


5454


z-indexz-index

• This order is relative to the parent elementThis order is relative to the parent element..

• EEven if anven if an element has a element has a z-indexz-index of a million, but its of a million, but its parent is at the bottomparent is at the bottom of the of the z-indexz-index, it can't rise , it can't rise above it in the overall scheme ofabove it in the overall scheme of things. things.


5555


z-indexz-index


5656


vvisibilityisibility • vvisibilitisibilityy controls whether or not the element is controls whether or not the element is

drawn on thedrawn on the screen. screen.

• values are values are visiblevisible and and hiddenhidden, which are pretty , which are pretty muchmuch self-explanatory. self-explanatory.

width and heightwidth and height• widthwidth and and heightheight work pretty much the way they work pretty much the way they

always have, but absolutely positioned objects can always have, but absolutely positioned objects can also have percentage widths and heights. also have percentage widths and heights.


5757


• Now you can position things on theNow you can position things on the page, to the exact page, to the exact pixel. pixel.

• PPlease remember that people stilllease remember that people still have monitors and have monitors and browsers that are different sizes than thebrowsers that are different sizes than the one you are one you are currently using. currently using.

• AAbsolutely positioned objects do not cause the bsolutely positioned objects do not cause the scrollbarsscrollbars to appear if they're off the page.to appear if they're off the page.

• CSS positioning works on versionCSS positioning works on version 4+ 4+ of both major of both major browsersbrowsers..


5858

GroupingGrouping

You can give the same properties to a number or You can give the same properties to a number or selectors without having to repeat them by selectors without having to repeat them by separating the selectors by separating the selectors by commascommas..

For example, if you have something like:For example, if you have something like:

h2 { h2 { color: red; color: red; } } .thisOtherClass { .thisOtherClass { color: red; color: red; } } .yetAnotherClass { .yetAnotherClass { color: red; color: red; } }


5959

GroupingGrouping

You could make it:You could make it:

h2, .thisOtherClass, .yetAnotherClass { color: red; { color: red;

} }


6060

NestingNesting

If the CSS is structured well, there shouldn't be a If the CSS is structured well, there shouldn't be a need to use many class or ID selectors. This is need to use many class or ID selectors. This is because you can specify properties to selectors because you can specify properties to selectors withinwithin other selectors. E.g.: other selectors. E.g.:

#top { #top { background-color: #ccc; background-color: #ccc; padding: 1em padding: 1em } } #top h1 { { color: #ff0; color: #ff0; } } #top p { { color: red; color: red; font-weight: bold; font-weight: bold; } }


6161

NestingNesting

This removes the need for classes or IDs if it is This removes the need for classes or IDs if it is applied to HTML that looks something like this:applied to HTML that looks something like this:

<div id="top">

<h1>Chocolate curryChocolate curry</h1> <p>This is my This is my recipe for making curry purely with recipe for making curry purely with chocolatechocolate</p> <p>Mmm mm mmmmmMmm mm mmmmm</p> </div>


6262

NestingNesting

This is because, by separating selectors with This is because, by separating selectors with spacesspaces, we are saying ', we are saying 'h1 inside ID inside ID top is colour is colour #ff0' and '' and 'p inside ID inside ID top is is red and and bold'.'.

This can get quite complicated (because it can go This can get quite complicated (because it can go for more than two levels, such as this inside this for more than two levels, such as this inside this inside this inside this etc.) and may take a bit of inside this inside this etc.) and may take a bit of practice.practice.


6363

Pseudo ClassesPseudo Classes

Pseudo classesPseudo classes are bolted on to selectors to are bolted on to selectors to specify a state or relation to the selector. They specify a state or relation to the selector. They take the form of take the form of selector:pseudo class selector:pseudo class { property: value; }{ property: value; }, simply with a , simply with a coloncolon in in between the selector and the pseudo class.between the selector and the pseudo class.

Many CSS proposals are not supported by all Many CSS proposals are not supported by all browsers, but there are four pseudo classes that browsers, but there are four pseudo classes that can be used safely when applied to links.can be used safely when applied to links.• link is for an unvisited link. is for an unvisited link. • visited is for a link to a page that has already been is for a link to a page that has already been

visited. visited. • active is for a link when it is gains focus (for example, is for a link when it is gains focus (for example,

when it is clicked on). when it is clicked on). • hover is for a link when the cursor is held over it. is for a link when the cursor is held over it.


6464


a.snowmana.snowman:link { { color: blue; color: blue; } } a.snowmana.snowman:visited { { color: purple; color: purple; } } a.snowmana.snowman:active { { color: red; color: red; } } a.snowmana.snowman:hover { { text-decoration: none; text-decoration: none; color: blue; color: blue; background-color: yellow; background-color: yellow; } }


6565


Note: Note: Although CSS gives you control to bypass it, Although CSS gives you control to bypass it, maintaining different colours for visited links is good maintaining different colours for visited links is good practice as many users still expect this. As pseudo practice as many users still expect this. As pseudo classes (other than hover) are not often used, this is a classes (other than hover) are not often used, this is a feature that is unfortunately not as common as it once feature that is unfortunately not as common as it once was. Because of this, it is less important than it used was. Because of this, it is less important than it used to be, but if you are looking for the optimum user to be, but if you are looking for the optimum user response, then you response, then you shouldshould use it. use it.

Traditionally, text links were Traditionally, text links were blueblue if not visited and if not visited and purplepurple if visited, and there is still reason to believe if visited, and there is still reason to believe that these are the most effective colours to use, that these are the most effective colours to use, although, again, with the increasingly widespread use although, again, with the increasingly widespread use of CSS, this is becoming less commonplace and the of CSS, this is becoming less commonplace and the average user no longer assumes that links must be average user no longer assumes that links must be blue or purple.blue or purple.


6666


Note 2: Note 2: You should also be able to use the hover You should also be able to use the hover pseudo class with elements other than links. pseudo class with elements other than links. Unfortunately, Internet Explorer doesn't support Unfortunately, Internet Explorer doesn't support this method. This is an irritation because there this method. This is an irritation because there are lots of nice little tricks you can do that look are lots of nice little tricks you can do that look great in other browsers.great in other browsers.


6767

Shorthand PropertiesShorthand Properties

Some CSS properties allow a string of values, Some CSS properties allow a string of values, replacing the need for a number of properties. replacing the need for a number of properties. These are represented by values separated by These are represented by values separated by spacesspaces..

margin, , padding and and border-width allow you to allow you to amalgamate amalgamate margin-top-width, , margin-right-width, , margin-bottom-width etc. in the form of etc. in the form of property: top right bottom left;;


6868


So:So:p {border-top-width: 1px; border-right-width: 5px; border-bottom-width: 10px; border-left-width: 20px; }

Can be summed up as:p {

border-width: 1px 5px 10px 20px; }


6969


border-width, , border-color and and border-style can also be summed up as, for example:can also be summed up as, for example:p { p { border: 1px red solid; ; } }

(This can also be applied to (This can also be applied to border-top, , border-right etc.) etc.)

By stating just two values (such as By stating just two values (such as margin: 1em 10em;), the first value will be the top and bottom ;), the first value will be the top and bottom and the second value will be the right and left.and the second value will be the right and left.


7070


Font-related properties can also be gathered Font-related properties can also be gathered together with the font property:together with the font property:

p { p {

font: italic bold 1em/1.5 courier; ;

} }

(Where the '/1.5' is the line-height)(Where the '/1.5' is the line-height)


7171


So, to put it all together, try this code:So, to put it all together, try this code:

p { p {

font: 1em/1.5 "Times New Roman", times, serif; font: 1em/1.5 "Times New Roman", times, serif;

padding: 3em 1em; padding: 3em 1em;

border: 1px black solid; border: 1px black solid;

border-width: 1px 5px 5px 1px; border-width: 1px 5px 5px 1px;

border-color: red green blue yellow; border-color: red green blue yellow;

margin: 1em 5em; margin: 1em 5em;

} }


7272

Background ImagesBackground Images

There are a number of properties involved in the There are a number of properties involved in the manipulation of manipulation of background imagesbackground images..

Luckily, the property Luckily, the property background can deal with can deal with them all.them all.

body { body { background: white url(kitty.jpg) no-repeat top right; }


7373


This amalgamates these properties:This amalgamates these properties:• background-color, which we came across before. , which we came across before. • background-image, which is the location of the , which is the location of the

image itself. image itself. • background-repeat, which is how the image repeats , which is how the image repeats

itself. This can be itself. This can be repeat (equivalent to a 'tile' effect (equivalent to a 'tile' effect across the whole background), across the whole background), repeat-y (repeating (repeating on the 'y-axis', above and below), on the 'y-axis', above and below), repeat-x (repeating on the 'x-axis', side-by-side) or (repeating on the 'x-axis', side-by-side) or no-repeat (which shows just one instance of the image). (which shows just one instance of the image).

• background-position, which can be , which can be top, , center, , bottom, , left, , right or any sensible combination, or any sensible combination, such as above. such as above.


7474


Background-images can be used in most HTML Background-images can be used in most HTML elements - not just for the whole page (body) and elements - not just for the whole page (body) and can be used for simple but effective results, such as can be used for simple but effective results, such as shaped corners.shaped corners.

Note: Note: It is easy to get carried away with background images and It is easy to get carried away with background images and plaster them all over your web pages. Some visually hyperactive plaster them all over your web pages. Some visually hyperactive people might believe it looks good to have a full-on brightly coloured people might believe it looks good to have a full-on brightly coloured photograph tiled across the background of a page, giving the user a photograph tiled across the background of a page, giving the user a serious challenge in deciphering the foreground text. This is an serious challenge in deciphering the foreground text. This is an extreme example, but the fact is that the most user-friendly, readable extreme example, but the fact is that the most user-friendly, readable text is black on a plain white background or white on a plain black text is black on a plain white background or white on a plain black background (there is also a suggestion that a slightly off-white or off-background (there is also a suggestion that a slightly off-white or off-black background is better as this reduces glare).black background is better as this reduces glare).So, the best use of background images is either to use them where So, the best use of background images is either to use them where there will be no content over the top or making the background image there will be no content over the top or making the background image very light, which would also reduce the file size of the image, because very light, which would also reduce the file size of the image, because there should be less colours involved (supposing you are using an there should be less colours involved (supposing you are using an indexed-colour format, such as GIF).indexed-colour format, such as GIF).


7575

Useful LinksUseful Links

Check out Microsoft’s CSS Gallery: Check out Microsoft’s CSS Gallery: http://www.microsoft.com/typography/css/gallery/entranchttp://www.microsoft.com/typography/css/gallery/entrance.htme.htm

To see a list of colours and their numerical equivalents: To see a list of colours and their numerical equivalents: http://the-http://the-light.com/colclick.htmllight.com/colclick.html

xhtml introduction to css. ©nina bresnihan, dept. of computer science, tcd 2004 2 applying css ...

Documents