Introduction to CSS

Cascading Style Sheets Taking control of you web pages

What we will learn today Why we use CSS Three ways to use CSS in an XHTML document How to write a style declaration How to target XHTML elements for styling How to change the style of that element How to style text

Why CSS? Separation of content from markup Cleaner code Easier to manage style changes

Why not Dreamweaver or FrontPage? They produce messy code Don’t always do what you want Hard to troubleshoot problems You are NOT in control

What is CSS? A rule that defines a particular style that is applied to you XHTML markup A rule can define Font-size of the text of paragraphs Thickness of a border around an image Position of a headline Color of a background Etc.

Three ways to style Inline Styles Embedded Styles Linked

Inline <p style="font-size: 25pt; font-weight: bold; font-style: italic; color: red;">By adding inline CSS styling to this paragraph, we can override the default styles.</p>

Inline Styles Inline styles have a narrow scope Not much better than using ‘font’ tags for everything Should generally be AVOIDED

Embedded <head> <title>Inline Style Example</title> <style type="text/css"> h1 {font-size: 2em; font-weight:bold;} p { color:blue; } </style> </head> <body> <h1>First level heading tag</h1> <p>Here is the blue paragraph to styled by the embedded stylesheet.</p> </body> </html>

Embedded Scope limited to the page Page styles win out over external style sheets, but they lose out to inline styles

Linked <head> <link rel="stylesheet" href="stylesheet.css" type="text/css" media="screen" /> </head> <body>

Linked <head> <style type=“text/css”> @import url(stylesheet.css), media; </style> </head> <body>

Linked Style sheet Separates our markup and styles Can be linked to multiple pages Make changes across an entire site Create different styles for print or handheld devices

Linked Embedded Inline

Anatomy of a CSS rule Selector Declaration p {color: red} Property Value

Anatomy of a CSS rule Selector Declaration h1 {font-size: 10px} Property Value

Grouping declarations p {color:red} p {font-size:12px} p {line-height:15px} Multiple declarations can be contained within a rule p {color:red; font-size:12px; line-height:15px;}

Grouping selectors h1 {color: blue; font-weight: bold;} h2 {color: blue; font-weight: bold;} h3 {color: blue; font-weight: bold;} h1, h2, h3 {color: blue; font-weight: bold;} h3 {font-style: italic;}

Contextual Selectors em {color: green;} p em {color: green;} Descendent Selector em is a descendent of p

Contextual Selectors Example

Contextual Selectors Child Selector p>em {color: green;} Child Selector

IDWIMIE It Doesn’t Work In Microsoft Internet Explorer

Classes and IDs Give us the ability to assign styles without regard for the document hierarchy example

Classes Can names can be used multiple times in a document Is represented in the selector by a period ‘.’

IDs An ID name can only be used ONCE in any html document Is represented in the selector by a hash ‘#’ Otherwise work the same as a class Example

When to use Classes vs. IDs Try to used tag and descendent selectors as much as possible Use classes when you can’t use a tag/descendent, and you need to target multiple elements on a page IDs are typically used to target entire sections of a page, usually in a ‘div’ tag.

Universal Selector Represents all elements * {color:green;} Universal Selector p * em {font-weight: bold;}

Selector Summary Tag Selector Descendent Selector Class and ID Selectors Universal Selector Child Selector -- IDWIMIE

Rule Declarations What can we change about the element? Size Position Color

Values Types Words {font-weight: bold;} Numeric values {font-size: 12px} Color Values {font-color: red}

Numeric Values Absolute values Pixels – 10px Points – 10pt Inches – 10in Centimeters – 10cm Millimeters – 10mm Picas – 10pc

Numeric Values Relative Values percentage – 10% em – 10em ex – 10x

Color Values Hexadecimal #RRGGBB or #RGB {color: #ffffff} is white {color: #000000} is black {color: #00ff00} is green {color: #0000ff} is blue

Color Values

Styling Fonts First rule of fonts in web design: You can’t use the fonts you want. Sorry. Times, Arial, Verdana, Courier

Win XP and Mac OS X Arial Franklin Gothic Tahoma Arial Black Georgia Times New Roman Arial Narrow Impact Trebuchet MS Century Gothic Monotype Corsiva Verdana Comic Sans MS Palatino Webdings Courier New Symbol

Serif vs. Sans-Serif Serif: Times New Roman Sans-Serif: Verdana Monospace: Courier New

Font-Family property font-family { “trebuchet ms”, helvetica, arial, sans-serif;}

Sizing fonts Three types of values to size fonts: Absolute Pixels, inches, etc. Relative Percentages or ems Keywords x-small, small, large, x-large, etc.

Sizing with ems body {font-family: verdana, arial, sans- serif; font-size 100%;} p {font-size: 1em;}

Font-Style Font-style: h2 {font-style: italic;} Font-weight: em {font-weight: bold;} Font-Variant: h2 {font-varient: small-caps;}

Font Property Shorthand p {font-weight: bold; font-style: italic; font-variant: small-caps; font-size: 1em; font-family: verdana, arial sans-serif;} p {font: bold italic small-caps 1em verdana, arial sans-serif;}

Text properties Line-height p {line-height: 1.2;} p {font: 1em/1.3; verdana, arial, sans-serif;} Creates space between the lines of a block of text. Text-align h1 {text-align: center;} p {text-align: justify;} Sets overall spacing between words. Text-indent p {text-indent: 3em;} Sets the start position of the text box in relation to its containing element

Text properties Text-Decoration .retailprice {text-decoration: strikethrough} a:link {text-decoration: none} Allows you to set a type of decoration to your text. Values include: underline, overline, strikethrough, and blink. Text-Transform p.yelling {text-transform: capitalize;} Changes capitalization of text within an element. Values include uppercase, lowercase, capitalize, none.

Text properties Letter-spacing p {text-indent: 3em;} Sets overall spacing between letter. Print typographers refer to this as ‘Tracking’ Word-Spacing p {text-indent: 3em;} Sets overall spacing between words. Vertical-align span.raised {font-size: .4em; vertical-align: 50%} Moves type up or down with respect to the baseline.

http://pakitworld.board-directory.com	44
http://smashingweb.ge6.org	6
http://speakerrate.com	4
http://ranjith.zfs.in	4
http://119.111.65.78	2

Introduction to CSS

by Larry King on Nov 29, 2009

Accessibility

Categories

Tags

Upload Details

Usage Rights

5 Embeds 60

Statistics

Introduction to CSS — Presentation Transcript