css – cascading style sheets

20
CSS – CASCADING STYLE SHEETS Making your XHTML webpage look good.

Upload: mariel

Post on 12-Jan-2016

28 views

Category:

Documents


0 download

DESCRIPTION

CSS – Cascading Style Sheets. Making your XHTML webpage look good. CSS vs HTML: The difference?. Browsers read your hypertext file (.html file) to figure out WHAT goes on your page . HTML defines your content and where to find it (such as graphics). - PowerPoint PPT Presentation

TRANSCRIPT

Page 1: CSS – Cascading Style Sheets

CSS – CASCADING STYLE SHEETS

Making your XHTML webpage look good.

Page 2: CSS – Cascading Style Sheets

CSS vs HTML: The difference? Browsers read your hypertext file

(.html file) to figure out WHAT goes on your page. HTML defines your content and where to find it (such as graphics).

They use the CSS to figure out HOW you want that content displayed/formatted.

Page 3: CSS – Cascading Style Sheets

Painter/Contractor analogy

Much like a decorator and a builder work towards finishing your house…

HTML builds your page CSS decorates your pageSo if you make the style p{color:blue} you

must have <p> tags in your document for it to work.

“You have to build it before you can paint it.”

Page 4: CSS – Cascading Style Sheets

CSS

CSS Rules Selector and declaration Declaration = at least one CSS property

and related property value.Ex: h1 {color:red;}

Syntax is very different from HTML

Page 5: CSS – Cascading Style Sheets

CSS style must refer to an HTML tag<html

<head>

<style type=“text/css”>

body {background-color: #000000}

p {font-weight: bold}

h1 {color: blue}

#custom {font-family: arial}

</style>

</head>

<body>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

<p> Phasellus lacinia rutrum erat. Integer lobortis, dui eu lobortis laoreet, nunc ligula convallis urna, vel viverra nisl elit ut risus. </p>

<h1>Integer id enim. Praesent eleifend. </h1>

<div id=“custom”> Maecenas accumsan pulvinar risus. Aliquam a turpis. Integer velit turpis, venenatis ac, laoreet sit amet, venenatis nec, dolor.. </div>

</body>

</html>

Page 6: CSS – Cascading Style Sheets

Associating your CSS

For CSS to work in your document it must be linked or embedded into your code.

Since we’re just starting out we’ll use embedded (also called internal) styles

(We’ll talk more about this, later) In your <head> you need to have the following

tags:<style type=“text/css”>

</style> All your styles will go between these tags for

right now.

Page 7: CSS – Cascading Style Sheets

color

Changes the color of the text in an element

p {color: #435678;}

color values can be listed many ways: for example

p{color:blue;} or p{color: rgb(0,0,255);} orp {color:#0000FF;}

Page 8: CSS – Cascading Style Sheets

background-color

highlights background of textor entire element

body {background-color: #435678;}

Page 9: CSS – Cascading Style Sheets

font-weight

Used to change the thickness of a font used on text.

Value could be numerical: 100-900 scale

Value could be a word: Bold (equals 700) Bolder (+100 from the container’s font-weight) Lighter (-100 form the container’s font-weight) Normal inherit

Example: p {

font-weight: 800; }

Page 10: CSS – Cascading Style Sheets

Font Size

Font size may be defined in points, pixels, inches, or centimeters (pt, px, in, cm) or as a percentage. Absolute:

can be: xx-small, x-small, small, medium, large, x-large, xx-large.

mm, in, cm, pc, pt

Relative larger, smaller. em, ex, px,

Page 11: CSS – Cascading Style Sheets

font-size

Value could be numerical: 12pt, 12em, 12pc, 12px…

Value could be a word: small xx-large

Example: p {

font-size: 12pt; }

Page 12: CSS – Cascading Style Sheets

CSS shorthand

You can list all the font properties in one list.

Must be in a specific order Selector {

font: style variant weight size family;}

Any values that aren’t listed are set to their default values.

Page 13: CSS – Cascading Style Sheets

letter-spacing (aka kerning)

Selector { letter-spacing: 12pts;}

Example values for letter-spacing: Normal – no extra spacing 20px, 30em…- increases spaces between

letters -20px, -30em… - reduces spaces between

letters Inherit – inherits from parent (containg

element)

Page 14: CSS – Cascading Style Sheets

word-spacing

Selector { word-spacing: 12pts;}

Example values for letter-spacing: Normal – no extra spacing between words 20px, 30em…- increases spaces between

words -20px, -30em… - reduces spaces between

words Inherit – inherits from parent (containg

element)

Page 15: CSS – Cascading Style Sheets

Generic Font families

Serif (flourish fonts: ex. Times New Roman) Sans-serif (simple character fonts: ex. arial) Monospace (ex. courier) Fantasy (zany fonts) Cursive (cursive aka “script” fonts)

Page 16: CSS – Cascading Style Sheets

Serif vs sans-serif

Sans-serif simpler, but easier to read Serif can help distinguish between

numbers and letters using “feet” and other flourishes.

Page 17: CSS – Cascading Style Sheets

Monospace font

Characters that are all the same size “Typewriter” fonts Ex. Courier, andale mono, vt102,

mishiwaka

Page 18: CSS – Cascading Style Sheets

Color Units

Many different types of values can be used as long as the format or units are with the value.

body {background-color: blue} Color names are unreliable at the moment beyond the

basic 8 color names. body {background-color: #0000FF}

#<hex><hex><hex> body {color: rgb (0, 0, 255)}

rgb(<number>, <number>, <number>) body {color: rgb (0%, 0%, 100%)}

rgb(<percentage>,<percentage>,<percentage>)

Page 19: CSS – Cascading Style Sheets

Length Units

{margin-right: 24px } The number can be an integer or a

decimal fraction, and can be preceded by + or -.

Units can be absolute or relative: Absolute: mm, cm, in, pt, pc (millimeters,

centimeters, inches, points, picas) Relative: em, ex, px (the element's font

height, the element's x-height, pixels)

Page 20: CSS – Cascading Style Sheets

Comments in CSS

/* comment goes here */

This will not be part of the web page, or the CSS styles. It is merely a way for you to make notes on the style sheet.

You should use comments like this to organize your content. You should design your site so that another web designer can understand what is what 10 years from now.

USE IT!