Survey
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
Download 7.1 - DIT
Document related concepts
Transcript
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
