Post on 05-Jan-2016
description
Cascading Style Sheets Provide means to control and change presentation of
HTML documents.
Allow the user to impose a standard style.
Three levels of specification: Inline level -- embeded in tag invocation.
Document level -- applied to a whole document.
External level -- Apply to a number of documents. Inline level has precedence over document level, which
has precedence over external level.
Cascading Style Sheets
HTML primarily concerned with content rather than style.
HTML tags have presentation properties for which browsers have default values.
Cascading Style Sheets are not technically HTML, but can be embedded in HTML documents.
Cascading Style Sheets
Cascading Style Sheet specification developed in 1996 ----> CSS1
CSS2 followed in 1998.
Current browsers do not implement all of CSS2.
Style is specified for a tag by the values of its presentation properties.
Browsers can ignore style sheets or use their own default values for presentation properties.
Level of Style Sheets
Inline style sheets appear in the tag itself. Document level style sheets appear within the
head of the document. External style sheets are in separate files,
potentially on any server on the internet. Format depends on the level of the style sheet
Inline Style Specification Format
Style sheets appears as the value of the style attribute style ="property_1:value_1;
property_2: value-2; ...property_n: value-n;”
Scope of inline style sheet is the content of the tag.
Document Style Specification Format
List of rules that are the content of the <style> tag.
The type attribute of the <style> tag must be set to "text/css"
The list of rules are not HTML. Hence, they must be placed in an HTML comment.
Documentation comments for the rule must use a different form -- use C comments: /* ... */
External style sheets format is a list as in document style
External Style Sheets
Written with the MIME type text/css A <link> tag is used to specify that the browser is to
fetch and use external style sheet file: <link rel = stylesheet type="text/css"
href="http://www.whereever.org/termpaper.css"> </link>
Can be validated
http:/jigsaw.w3.org/css-validator
/validator-upload.html
Style Classes Style classes allow different occurrences of the same tag
to use different style specifications
A style class has a name attached to a tag name:
p.narrow (property:value list)
p.wide (property:value list)
A class on an occurrence of a tag is specified with its class attribute
<p class ="narrow"> ... </p>
<p class ="wide"> ... </p>
Generic Style Classes
To apply style to more than one tag Defined using a generic tag (which must have a
name beginning with a period)
.really-big( ... ) It is used as if it were a normal style class
<h1 class ="really-big"> ... </h1>
<p class ="really-big"> ... </p>
Properties/Property Values
There are 56 different properties in 6 categories Fonts
Colors & backgrounds
Text
Boxes and Layouts
Lists
Tags
Will not discuss all. For more details go to: http://www.w3.org
Property Value Format Keywords: left, small, ... (Not case sensitive)
Length: numbers (may be with decimal points) px -pixels
in -inches
cm -centimiters,
pt -points
pc -picas (12 points)
em -height of the letter "m"
x-height -height of the letter "x"
No space is allowed between number and unit specs.
Property Value Format
<html>
<head> <title> Font Properties </TITLE> <style type = "text/css"> <!-- /* Document-level style sheet*/ p.big {font-size: 14pt; font-style: italic; font-family: 'Times New Roman'; } p.small {font-size: 10pt; font-weight: bold; font-family: 'Courier New'; } --> </style> </head>
Property Value Format
<body><p class = "big">If a job is worth doing, it’s worth doing right.</p><p class = "small">Two wrongs don't make a right, but they certainlycan get you in a lot of trouble.</p><h2 style = "font-family: 'Times New Roman'; font-size: 24pt; font-weight: bold"> Chapter 1 Introduction</h2><h3 style = "font-family: 'Courier New'; font-size: 18pt"> 1.1 The Basics of Computer Networks</h3></body></html>
Property Value Format (cont) Percentage -just a number followed by the
percent sign URL value: url(protocol://server/pathname)
Color Color name
rgb(n1, n2, n3)
Hex form: #XXXXXX
Property values inhereted by nested tags unless overridden
Font Properties
Font-family list of font names (browser picks 1st) Font-family: Arial, Helvetica, Courrier Generic fonts: serif, sans-serif, cursive, fantasy, and monospace (defined in CSS)
If font name has more than one word, single-quoted
Font-size lenght number of a name
Font-style: italic, normal
Font-weight: bolder, lighter, bold, normal
Font Properties
Font used to specify list of font properties
order must be: style, weight, size, name(s)
font: bolder 14pt Arial Helvetica
Font Properties
<html><head> <title> Font Properties </TITLE> <style type = "text/css"> <!-- /* Document-level style sheet*/ p.big {font-size: 14pt; font-style: italic; font-family: 'Times New Roman'; } p.small {font-size: 10pt; font-weight: bold; font-family: 'Courier New'; } --> </style> </head>
Font Properties
<body><p class = "big">If a job is worth doing, it’s worth doing right.</p><p class = "small">Two wrongs don't make a right, but they certainlycan get you in a lot of trouble.</p><h2 style = "font-family: 'Times New Roman'; font-size: 24pt; font-weight: bold"> Chapter 1 Introduction</h2><h3 style = "font-family: 'Courier New'; font-size: 18pt"> 1.1 The Basics of Parallel Programming</h3></body></html>
Colors & backgrounds
Complications: Monitors vary widely Browser vary widely
There are three color collections: Set of 16 colors garanteed to be dispalyable by all
graphical browsers on all color monitors The web palette of 216 colors One of 16 million different colors
Garanteed set of 16 colors:
Black 000000 Silver C0C0C0 Gray 808080 White FFFFFF Marron 800000 Red FF0000 Purple 800080 Fuchia FF00FF
Green 008000 Lime 00FF00 Olive 808000 Yellow FFFF00 Navy 000080 Blue 0000FF Teal 008080 Aqua 00FFFF
The web palette
Consist of 216 colors Use hex color value of: (look on back of book)
00 33 66 99 CC FF
Colors & backgrounds
The color property specifies forground of color elements
<h2 style="color:red">Apple</h2> The background-color property specifies the
backgound color elements
<p style="font-size:24; color:blue;
background-color:aqua">To make it softer, use aqua background!</p>
Colors & backgrounds
The background-image property
use with care
Alignment of Text Property text-indent allows indentation. Use
length of % Property text-align has possible values: left
(default), center, right, or justify Property float allows text to flow arround another
element: left, right, or none (default)
An element on the right with text flowing on its left can be obtained with default text-align value (left) for the text and right value for float on the element on the right.
Alignment of Text
Property margin-left allows to set margins arround an object.
<img src = "c210.jpg" style="float: right; margin-left: 0.5in; margin-bottom: 0.05in" />
Lists propertiesUnordered list:
List-style-type Bullets can be: disk (default), square, circle Setting it on the <ul> tag applies to all items:
<ul style = "list-style-type: square"> <li> ... </ul>
Setting it on the <li> it applies to just that item:
<ul> <li style="list-style-type:square">
First item </li>
<li style = "list-style-type: circle">
second item </li> </ul>
Lists propertiesUnordered list:
List-style-image: Could use an image for bullets in an unordered list<li style = "List-style-image:
url(bigbird.gif)">
Lists propertiesOrdered list:
List-style-type: Use to change the sequence values:
Property value Sequence type First fourdecimal Arabic numerals 1, 2, 3, 4
upper-alpha Uc letters A, B, C, D
lower-alpha Lc letters a, b, c, d
upper-roman Uc Roman I, II, III, IV
lower-roman Lc Roman i, ii, iii, iv
The <span> Tag
Used to define an element in the content of a larger element
The default is to leave content as it is
Use <span> to apply an inline style sheet to its content
<p>Now is the <span style = "font-size: 40; font-family: ariel; color: bue"> most </span> opportune time! </p>
Can be nested and can have id and class attributes
The <div> Tag
Usefull for style applications Used to create sections (or divisions) for which
style can be specified e.g. A section of four paragraphs for wich a particular
style is warranted.