cascading style sheets 23 rd march. cascading style sheets (css) css syntax linking css to xhtml...

27
Cascading Style Cascading Style Sheets Sheets 23 rd March

Post on 20-Dec-2015

232 views

Category:

Documents


2 download

TRANSCRIPT

Page 1: Cascading Style Sheets 23 rd March. Cascading Style Sheets (CSS) CSS Syntax Linking CSS to XHTML Inheritance & Cascading Order Font Properties Text Properties

Cascading Style Cascading Style SheetsSheets

23rd March

Page 2: Cascading Style Sheets 23 rd March. Cascading Style Sheets (CSS) CSS Syntax Linking CSS to XHTML Inheritance & Cascading Order Font Properties Text Properties

Cascading Style Sheets Cascading Style Sheets (CSS)(CSS) CSS Syntax Linking CSS to XHTML Inheritance & Cascading Order Font Properties Text Properties Colour Properties Content Positioning

Page 3: Cascading Style Sheets 23 rd March. Cascading Style Sheets (CSS) CSS Syntax Linking CSS to XHTML Inheritance & Cascading Order Font Properties Text Properties

Introduction to CSSIntroduction to CSS

Content and formatting are 2 separate parts

The CSS concept separates content from presentation

CSS is used to define a style sheet separately and then it can be applied to any content on a web page

Editing content becomes easy and formatting becomes much more consistent

CSS has a powerful concept and is easy to use

Page 4: Cascading Style Sheets 23 rd March. Cascading Style Sheets (CSS) CSS Syntax Linking CSS to XHTML Inheritance & Cascading Order Font Properties Text Properties

RTE website RTE website withwith CSS CSS stylesheetstylesheet

Page 5: Cascading Style Sheets 23 rd March. Cascading Style Sheets (CSS) CSS Syntax Linking CSS to XHTML Inheritance & Cascading Order Font Properties Text Properties

RTE website RTE website withoutwithout CSS CSS stylesheetstylesheet

Page 6: Cascading Style Sheets 23 rd March. Cascading Style Sheets (CSS) CSS Syntax Linking CSS to XHTML Inheritance & Cascading Order Font Properties Text Properties

What does this web page What does this web page look like when rendered?look like when rendered?<?xml<?xml version= version="1.0""1.0" encoding= encoding="iso-8859-1"?>"iso-8859-1"?><!DOCTYPE<!DOCTYPE html PUBLIC html PUBLIC "-//W3C//DTD XHTML 1.1//EN""-//W3C//DTD XHTML 1.1//EN" ""http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtdhttp://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">"><html<html xmlns= xmlns=""http://www.w3.org/1999/xhtmlhttp://www.w3.org/1999/xhtml">"><!-- Created on: 22/03/2009 --><!-- Created on: 22/03/2009 --><head><head><title></title><title></title></head></head><body><body><img<img src= src="dit.gif""dit.gif" height= height="100""100" width= width="100"/>"100"/><div><h1><div><h1>DT228-1 2nd Semester SubjectsDT228-1 2nd Semester Subjects</h1></div></h1></div> <div><ul><div><ul>

<li><li> C Programming C Programming</li></li><li><li> Web Development Web Development</li></li>

</ul></div></ul></div></body></body></html></html>

Page 7: Cascading Style Sheets 23 rd March. Cascading Style Sheets (CSS) CSS Syntax Linking CSS to XHTML Inheritance & Cascading Order Font Properties Text Properties

This is what it will look like. This is what it will look like. How would you like it to How would you like it to look?look?

Page 8: Cascading Style Sheets 23 rd March. Cascading Style Sheets (CSS) CSS Syntax Linking CSS to XHTML Inheritance & Cascading Order Font Properties Text Properties

Maybe, like this??Maybe, like this??

Page 9: Cascading Style Sheets 23 rd March. Cascading Style Sheets (CSS) CSS Syntax Linking CSS to XHTML Inheritance & Cascading Order Font Properties Text Properties

<?xml<?xml version= version="1.0""1.0" encoding= encoding="iso-8859-1"?>"iso-8859-1"?><!DOCTYPE<!DOCTYPE html PUBLIC html PUBLIC "-//W3C//DTD XHTML 1.1//EN""-//W3C//DTD XHTML 1.1//EN" ""http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtdhttp://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">"><html<html xmlns= xmlns=""http://www.w3.org/1999/xhtmlhttp://www.w3.org/1999/xhtml">"><head><head><title></title><title></title></head></head><body<body style=style="background-color:"background-color: #FFFF99#FFFF99">"><center<center><img><img src= src="dit.gif""dit.gif" height= height="100""100" width= width="100"/>"100"/></center></center>

<center><center><div<div style=style="position:"position: absolute absolute;; top:top: 150150pxpx;; width:width: 100100%%;; height:height: 100100pxpx;; background-color:background-color: blue blue;">;"><h1><h1><font<font color= color="white">"white">DT228-1 2nd Semester SubjectsDT228-1 2nd Semester Subjects</font></font></h1></h1> </div></div></center></center> <center><center><div<div style=style="position:"position:absoluteabsolute;; top:250top:250pxpx;; width:100width:100%%;; height:100height:100pxpx;">;"><ul><ul>

<li><li> C Programming C Programming</li></li><li><li> Web Development Web Development</li></li>

</ul></div></ul></div></center></center></body></body></html></html>

These are all style attributesThese are all style attributes

Page 10: Cascading Style Sheets 23 rd March. Cascading Style Sheets (CSS) CSS Syntax Linking CSS to XHTML Inheritance & Cascading Order Font Properties Text Properties

CSS SyntaxCSS Syntax A rule is the fundamental syntactic unit of CSS

A CSS rule is a statement that follows a specific syntax

A CSS style sheet consists of a list of rules (statements)

Page 11: Cascading Style Sheets 23 rd March. Cascading Style Sheets (CSS) CSS Syntax Linking CSS to XHTML Inheritance & Cascading Order Font Properties Text Properties

CSS SyntaxCSS Syntax There are 2 types of rules

at-rulesat-rules: begin with an @ character followed by an identifier, the rule definition and terminated by a semi-colon. Example: @import “printPage.css”

rule-setsrule-sets: they set the style of XHTML tags by using property/value pairs. Example: h1, h2 {color:blue; font-weight:bold}

CSS syntax provides comment statements which begin ‘/*’ and end with ‘*/’

CSS also allows XHTML comments i.e. <!--…-->

Page 12: Cascading Style Sheets 23 rd March. Cascading Style Sheets (CSS) CSS Syntax Linking CSS to XHTML Inheritance & Cascading Order Font Properties Text Properties

Using a Simple Style Using a Simple Style SheetSheet

Page 13: Cascading Style Sheets 23 rd March. Cascading Style Sheets (CSS) CSS Syntax Linking CSS to XHTML Inheritance & Cascading Order Font Properties Text Properties

Linking CSS to XHTMLLinking CSS to XHTML

5 options for linking CSS to XHTML: Inline CSS: Used to apply style to one XHTML tag only using

the style attribute inside the tag Embedded CSS: Used to apply style to an entire web page

using the <style> tag inside the <head> tag External CSS: Used to apply style to an entire website by

saving the CSS code in it own external file and using the <link> tag in the <head> section

Import CSS: Works the same way as external CSS but uses the @import statement inside the <style> tag

Attributes and tags: uses class and id attributes and <span> and <div> tags to allow fine control of style

Page 14: Cascading Style Sheets 23 rd March. Cascading Style Sheets (CSS) CSS Syntax Linking CSS to XHTML Inheritance & Cascading Order Font Properties Text Properties

Inline CSSInline CSS

Included (inlined) in an XHTML tag via the style attribute

<b style="color:blue; font-size:16"> text goes here </b>

Page 15: Cascading Style Sheets 23 rd March. Cascading Style Sheets (CSS) CSS Syntax Linking CSS to XHTML Inheritance & Cascading Order Font Properties Text Properties

Embedded CSSEmbedded CSS

Included in the XHTML code of a web page via the <style> tag

<head>

<style type="text/css">body {color: blue; background: #FFFF00}</style>

<head>

Page 16: Cascading Style Sheets 23 rd March. Cascading Style Sheets (CSS) CSS Syntax Linking CSS to XHTML Inheritance & Cascading Order Font Properties Text Properties

External CSSExternal CSS

CSS code is stored in its own file that the XHTML code of any web page can reference and use

<head>

….

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

….

</head>

Page 17: Cascading Style Sheets 23 rd March. Cascading Style Sheets (CSS) CSS Syntax Linking CSS to XHTML Inheritance & Cascading Order Font Properties Text Properties

Import CSSImport CSS

A style sheet may be imported with the at-rule - @import

<head>…..<style type="text/css">@import url("myStyle.css");@import url("http://www.aa.bb.cc/dd.css");body {color: blue; background: yellow}</style>

….

</head>

Page 18: Cascading Style Sheets 23 rd March. Cascading Style Sheets (CSS) CSS Syntax Linking CSS to XHTML Inheritance & Cascading Order Font Properties Text Properties

Attributes & TagsAttributes & Tags Apply to all tags:

<head><title></title><style type="text/css">@import url("myStyle.css");@import url("http://www.aa.bb.cc/dd.css");.shine {color:blue; background:yellow}</style>

</head><body>….<h1 class=“shine”> Hello World! </h1>…</body>

Page 19: Cascading Style Sheets 23 rd March. Cascading Style Sheets (CSS) CSS Syntax Linking CSS to XHTML Inheritance & Cascading Order Font Properties Text Properties

Attributes & TagsAttributes & Tags Apply to individual tag:

<head><title></title><style type="text/css">@import url("myStyle.css");@import url("http://www.aa.bb.cc/dd.css");p.flag {color:blue; font-weight:bold; font-size:16pt}</style>

</head><body>….<p class=“flag”> Hello World! </p>…</body>

Page 20: Cascading Style Sheets 23 rd March. Cascading Style Sheets (CSS) CSS Syntax Linking CSS to XHTML Inheritance & Cascading Order Font Properties Text Properties

Attributes & TagsAttributes & Tags Using <div> and <span>:

<head><title></title><style type="text/css">@import url("myStyle.css");</style>

</head>

<body>

….

<div id=“greeting”> Hello World! </div>

</body>

MyStyle.cssMyStyle.css…….#greeting {color:blue; font-weight:bold}

Page 21: Cascading Style Sheets 23 rd March. Cascading Style Sheets (CSS) CSS Syntax Linking CSS to XHTML Inheritance & Cascading Order Font Properties Text Properties

Linking CSS to XHTMLLinking CSS to XHTML

Page 22: Cascading Style Sheets 23 rd March. Cascading Style Sheets (CSS) CSS Syntax Linking CSS to XHTML Inheritance & Cascading Order Font Properties Text Properties

Inheritance & Cascading Inheritance & Cascading OrderOrder CSS tags and selectors may be nested which gives rise to the inheritance

issue

The inheritance rule is simple and logical: children inherit from their parents, unless they override their parents’ style

When multiple style sheets are used, they cascade

Cascading order is used to resolve conflicts that arise out of cascading

The general rule is the last style sheet overrides the ones specified before them

Cascading order depends on other factors such as weight, specificity, use of special keywords, and browsers

Page 23: Cascading Style Sheets 23 rd March. Cascading Style Sheets (CSS) CSS Syntax Linking CSS to XHTML Inheritance & Cascading Order Font Properties Text Properties

Font PropertiesFont Properties Setting font properties is a very common activity

PropertyProperty

font-familyfont-family

font-stylefont-style

font-sizefont-size

font-weightfont-weight

font-variantfont-variant

font-stretchfont-stretch

PurposePurpose

Specifies text font such as arial, courier

Specify text style such as italic, normal

Specify text size such as 12, 16, 24

Specifies bold text using normal, bold, bolder, lighter, 100-900

Specifies small caps text using small caps

Specifies amount of text stretching horizontally using normal, wider, narrower, condensed, expanded, etc.

Page 24: Cascading Style Sheets 23 rd March. Cascading Style Sheets (CSS) CSS Syntax Linking CSS to XHTML Inheritance & Cascading Order Font Properties Text Properties

Text PropertiesText Properties CSS provides a rich set of text formatting properties

PropertyProperty

text-aligntext-aligntext-justifytext-justifytext-align-lasttext-align-lastMin(Max)-font-sizeMin(Max)-font-sizevertical-alignvertical-aligntext-indenttext-indentline-breakline-breaktext-spacetext-spacetext-wraptext-wrapwhite-spacewhite-spacetext-spacingtext-spacing

ValuesValues

Start, end, left, center, justifyAuto, inter-word, inter-ideograph, kashidaAuto, start, end, center, justify, size10pt, 20pt, etc;Auto, top, sub, super, central, middle, bottomLength, percentageNormal, strict(white space in text stream) normal, honorNormal, noneNormal, pre, nowrap(character spacing) normal, length

Page 25: Cascading Style Sheets 23 rd March. Cascading Style Sheets (CSS) CSS Syntax Linking CSS to XHTML Inheritance & Cascading Order Font Properties Text Properties

Colour PropertiesColour Properties CSS allows you to set colour properties

PropertyProperty

ColorColor

BackgroundBackground

Background-repeatBackground-repeat

OpacityOpacity

Color-profileColor-profile

Rendering-intentRendering-intent

PurposePurpose

Text colour: name, hex code, RGB signals

Background-colour: name, hex code, RGB

Tiling effect: repeat, repeat-x/y, no-repeat

Transparency: 0.0 fully transparent to 1.0

Colour model: RGB, sRGB, URL

Colour-profile: auto, perceptual saturation

Page 26: Cascading Style Sheets 23 rd March. Cascading Style Sheets (CSS) CSS Syntax Linking CSS to XHTML Inheritance & Cascading Order Font Properties Text Properties

Content Positioning Content Positioning (Reminder!)(Reminder!) CSS offers excellent control of placing web elements

position property allows you to do so

CSS uses the 2D coordinate system with origin on the top left corner

The position property takes 2 values – absolute or relative

Absolute positioning uses the origin as the reference point for all measurements

Relative positioning measures coordinates relative to the position of the last placed page element

Example: {position:absolute; top:20px; left:30px}

Page 27: Cascading Style Sheets 23 rd March. Cascading Style Sheets (CSS) CSS Syntax Linking CSS to XHTML Inheritance & Cascading Order Font Properties Text Properties

Reference Reference

Steven M. Schafer (2005), HTML, CSS, JavaScript, Perl, and PHP Programmer's Reference, Hungry Minds Inc,U.S.

Dan Cederholm (2005), Bulletproof Web Design: Improving Flexibility and Protecting Against Worst-Case Scenarios with XHTML and CSS, New Riders.

Ibrahim Zeid (2004), Mastering the Internet, XHTML, and Javascript