Web Development

Download Report

Transcript Web Development

Cascading Style Sheets
23rd March
Cascading Style Sheets (CSS)







CSS Syntax
Linking CSS to XHTML
Inheritance & Cascading Order
Font Properties
Text Properties
Colour Properties
Content Positioning
Introduction 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
RTE website with CSS stylesheet
RTE website without CSS stylesheet
What does this web page look like
when rendered?
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<!-- Created on: 22/03/2009 -->
<head>
<title></title>
</head>
<body>
<img src="dit.gif" height="100" width="100"/>
<div><h1>DT228-1 2nd Semester Subjects</h1></div>
<div><ul>
<li> C Programming</li>
<li> Web Development</li>
</ul></div>
</body>
</html>
This is what it will look like. How
would you like it to look?
Maybe, like this??
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body style="background-color: #FFFF99">
<center><img src="dit.gif" height="100" width="100"/></center>
<center><div style="position: absolute; top: 150px; width: 100%; height: 100px;
background-color: blue;">
<h1><font color="white">DT228-1 2nd Semester Subjects</font></h1>
</div></center>
<center><div style="position:absolute; top:250px; width:100%;
height:100px;"><ul>
<li> C Programming</li>
<li> Web Development</li>
</ul></div></center>
</body>
</html>
These are all style attributes
CSS 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)
CSS Syntax

There are 2 types of rules

at-rules: begin with an @ character followed by an identifier,
the rule definition and terminated by a semi-colon.


Example: @import “printPage.css”
rule-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. <!--…-->
Using a Simple Style Sheet
Linking 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
Inline CSS

Included (inlined) in an XHTML tag via the style
attribute
<b style="color:blue; font-size:16"> text goes here
</b>
Embedded 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>
External 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>
Import 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>
Attributes & 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>
Attributes & 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>
Attributes & Tags

Using <div> and <span>:
MyStyle.css
…….
#greeting {color:blue; font-weight:bold}
<head>
<title></title>
<style type="text/css">
@import url("myStyle.css");
</style>
</head>
<body>
….
<div id=“greeting”> Hello World! </div>
…
</body>
Linking CSS to XHTML
Inheritance & Cascading Order

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
Font Properties

Setting font properties is a very common activity
Property
Purpose
font-family
Specifies text font such as arial, courier
font-style
Specify text style such as italic, normal
font-size
Specify text size such as 12, 16, 24
font-weight
Specifies bold text using normal, bold, bolder,
lighter, 100-900
font-variant
Specifies small caps text using small caps
font-stretch
Specifies amount of text stretching horizontally
using normal, wider, narrower, condensed,
expanded, etc.
Text Properties

CSS provides a rich set of text formatting properties
Property
Values
text-align
text-justify
text-align-last
Min(Max)-font-size
vertical-align
text-indent
line-break
text-space
text-wrap
white-space
text-spacing
Start, end, left, center, justify
Auto, inter-word, inter-ideograph, kashida
Auto, start, end, center, justify, size
10pt, 20pt, etc;
Auto, top, sub, super, central, middle, bottom
Length, percentage
Normal, strict
(white space in text stream) normal, honor
Normal, none
Normal, pre, nowrap
(character spacing) normal, length
Colour Properties

CSS allows you to set colour properties
Property
Purpose
Color
Text colour: name, hex code, RGB signals
Background
Background-colour: name, hex code, RGB
Background-repeat
Tiling effect: repeat, repeat-x/y, no-repeat
Opacity
Transparency: 0.0 fully transparent to 1.0
Color-profile
Colour model: RGB, sRGB, URL
Rendering-intent
Colour-profile: auto, perceptual saturation
Content Positioning (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}
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