Chapter 4a cascade style sheet css

Chapter 4: Client-Side Scripts
 Cascading Style Sheets (CSS)
 Client-Side Scripting with JavaScript
 Dynamic HTML (DHTML)
 The Document Object Model (DOM)
 Application of Client-Side Scripts
Web Programming1

Cascading Style Sheets (CSS)
 An extension (addition) to HTML which allows us to
style our web pages
 Provides more detailed attributes to elements than the
ones defined in standard HTML
 Styles are defined once and used any number of times
and in several contexts
 Clearly separate content from its presentation
Saves a lot of work
 Especially in website maintenance and upgrading
3 Web Programming

Cascading Style Sheets (CSS):
 is a simple mechanism for adding style (e.g. fonts, colors,
layouts) to Web documents.
 Styles provide powerful control over the presentation of
web pages.
Web Programming4

CSS (cont’d)
 CSS styles can be specified:
 Inside a single HTML element (inline)
 Inside the <head> element of an HTML document (internal)
 In an external CSS file (external)
 Rules of precedence application:
 Inline styles
 Internal styles (Embedded)
 External styles
 Browser default
 From highest to lowest
5 Web Programming

 A style sheet consists of a set of rules.
 Each rule consists of one or more selectors and a
declaration block.
 A declaration block consists of a list of declarations in
curly braces ({}).
 Each declaration consists of a property, a colon (:), a
value, then a semi-colon (;).
Web Programming6

 CSS Syntax
 selector {property: value;}
Web Programming7

Guy-Vincent Jourdan :: CSI 3140 :: based on
Jeffrey C. Jackson’s slides
CSS Syntax
 Parts of a style rule (or statement)

 The selector is normally the HTML element you want to style.
p {color:red;text-align:center;}
 To make the CSS more readable, you can put one declaration
on each line, like this:
p
{
color:red;
text-align:center;
}
 Selectors can be grouped (separated by comma)
Ex. p, div, table { align: center }
Web Programming9

CSS (cont’d)
 Types of selectors
 HTML tag names
 Class selectors
 Id selectors
 HTML tag names as selectors
 used to override the default attributes of HTML tags
Format: tag_name {property : value}
Ex. a { color: red;
text-decoration: overline
}
10 Web Programming

CSS (cont’d)
 The class selector
 define generic styles that can be applied to different HTML elements
 applied to the class attribute of HTML elements
 The class selector is used to specify a style for a group of
elements. Unlike the id selector, the class selector is
most often used on several elements.
 This allows you to set a particular style for many HTML
elements with the same class.
 The class selector uses the HTML class attribute, and is
defined with a "."
11 Web Programming

Format:
1. Styles for a particular element
tag_name.style_name { property: value }
Ex. p.color { color: green }
 <p class=“color”>some text</p>
2. Styles for all elements
.style_name { property: value }
Ex. .color { color: blue }
 <div class=“color”>some text</div>
<table class=“color”>…</table>
Web Programming12

 In the example below, all HTML elements with
class="center" will be center-aligned:
 .center {text-align:center;}
 You can also specify that only specific HTML elements
should be affected by a class.
 In the example below, all p elements with class="center"
will be center-aligned:
 p.center {text-align:center;}
Web Programming13

CSS (cont’d)
 The Id selector
 unlike the class selector, the Id selector always applies to only
one element
 The id selector is used to specify a style for a single,
unique element.
 The id selector uses the id attribute of the HTML
element, and is defined with a "#".
14 Web Programming

Format:
1. Styles for a particular element
tag_name#style_name { property: value }
Ex. p#color { color: green }
 <p id=“color”>some text</p>
2. Styles for all elements
#style_name { property: value }
Ex. #color { color: blue }
 <div id=“color”>some text</div>
<table id=“color”>…</table> possible ???
Web Programming15

CSS (cont’d)
 CSS comments
 Format:
/* comment text */
/*This is a comment*/
p
{
text-align:center;
/*This is another comment*/
color:black;
font-family:arial;
}
16 Web Programming

 Three Ways to Insert CSS
 There are three ways of inserting a style sheet:
 External style sheet
 Internal style sheet
 Inline style
Web Programming17

Inline Styles
 An inline style loses many of the advantages of style sheets by mixing content with
presentation.
 style information is directly attached to the HTML elements they affect
 higher cascade precedence than the other specification methods
 declaring an individual element’s format:
 Attribute style
 CSS (style) property
 Followed by a colon and a value
Web Programming18
<tag_name style=“property:value; property: value;”> … </tag_name>
Ex. <table style=“background-color: yellow”>… </table>
<p style="color:sienna;margin-left:20px">This is a paragraph.</p>

inline.html
(1 of 2)
1 <?xml version = "1.0"?>
2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
3 "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
4
5 
6 
7
8 <html xmlns = "http://www.w3.org/1999/xhtml">
9 <head>
10 <title>Inline Styles</title>
11 </head>
12
13 <body>
14
15 <p>This text does not have any style applied to it.</p>
16
17 
18 
19 
20 <p style = "font-size: 20pt">This text has the
21 <em>font-size</em> style applied to it, making it 20pt.
22 </p>
23

24 <p style = "font-size: 20pt; color: #0000ff">
25 This text has the <em>font-size</em> and
26 <em>color</em> styles applied to it, making it
27 20pt. and blue.</p>
28
29 </body>
30 </html>

Internal or Embedded Style Sheets
 this method can only specify style information for the current
document:
 1:1 relationship
 However, the same document may have other style definitions applied to
it
 1:M relationship
 embedded style sheet rule will have higher precedence than
external style sheet rule, if there is a conflict between styles
 embedded style sheet rule will have lower precedence than an
inline style sheet rule

Internal / Embedded Style Sheets
 Embed an entire CSS document in an XHTML document’s head
section inside a style element
 Attribute type
 Multipurpose Internet Mail Extensions (MIME) type
 describes the type of the document’s content
 text/css is the type for CSS document
 Style properties are defined for:
 Existing defined elements, such as p (paragraph), h3 (header), li (Iist)
or any other
 Style class that can be applied to either:
 Any existing type of element in the body of the document or
 One specific element in the document

Internal or Embedded Style Sheets
 An internal style sheet should be used when a single document has a unique style. You define
internal styles in the head section of an HTML page, by using the <style> tag, like this:
defined in the <head> element
<style type=“text/css”>
{property:value; ...}
</style>
Eg:
 <head>
<style>
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
</style>
</head>
Web Programming23

Style Sheet Syntax Explained
selector
property value rule

External Style Sheet
 An external style sheet is ideal when the style is applied
to many pages. With an external style sheet, you can
change the look of an entire Web site by changing one
file. Each page must link to the style sheet using the
<link> tag. The <link> tag goes inside the head section:
 defined in a separate CSS file
 linked to an HTML document using the <link> tag
<link rel=“stylesheet” type=“text/css” href=“url”>
 changes to the styles in the external CSS file will be
automatically reflected in all the HTML document in which the
style is attached
Web Programming25

CSS (cont’d)
 An external style sheet can be written in any text editor.
The file should not contain any html tags. Your style
sheet should be saved with a .css extension. An example
of a style sheet file is shown below:
 hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
 Do not add a space between the property value and the
unit (such as margin-left:20 px). The correct way is:
margin-left:20px
26 Web Programming

styles.css
(1 of 1)
1 /* Fig. 6.4: styles.css */
2 /* An external stylesheet */
3
4 a { text-decoration: none }
5
6 a:hover { text-decoration: underline;
7 color: red;
8 background-color: #ccffcc }
9
10 li em { color: red;
11 font-weight: bold;
12 background-color: #ffffff }
13
14 ul { margin-left: 2cm }
15
16 ul ul { text-decoration: underline;
17 margin-left: .5cm }

external.html
(1 of 2)
1 <?xml version = "1.0"?>
2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
3 "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
4
5 
6 
7
8 <html xmlns = "http://www.w3.org/1999/xhtml">
9 <head>
10 <title>Linking External Style Sheets</title>
11 <link rel = "stylesheet" type = "text/css"
12 href = "styles.css" />
13 </head>
14
15 <body>
16
17 <h1>Shopping list for <em>Monday</em>:</h1>
18 <ul>
19 <li>Milk</li>
20 <li>Bread
21 <ul>
22 <li>White bread</li>
23 <li>Rye bread</li>
24 <li>Whole wheat bread</li>
25 </ul>

26 </li>
27 <li>Rice</li>
28 <li>Potatoes</li>
29 <li>Pizza <em>with mushrooms</em></li>
30 </ul>
31
32 <p>
33 <a href = "http://www.food.com">Go to the Grocery store</a>
34 </p>
35
36 </body>
37 </html>

Some common CSS properties
Background
 CSS background properties are used to define the background
effects of an element
 CSS properties used for background effects:
 background-color: color
 background-image: url(url)
 Sets the background image for an element
 background-repeat: repeat_type {repeat, repeat-x, repeat-y, no-
repeat}
 background-attachment: attachment_type {scroll, fixed}
 Sets whether a background image is fixed or scrolls with the rest
of the page (default: scroll)
30 Web Programming

Background Color
 The background-color property specifies the background
color of an element.
 The background color of a page is defined in the body
selector:
 body {background-color:#b0c4de;}
 With CSS, a color is most often specified by:
• a HEX value - like "#ff0000"
• an RGB value - like "rgb(255,0,0)"
• a color name - like "red"
h1 {background-color:#6495ed;}
p {background-color:#e0ffff;}
div {background-color:#b0c4de;}
Web Programming31

Background Image
 The background-image property specifies an image to use
as the background of an element.
 By default, the image is repeated so it covers the entire
element.
 The background image for a page can be set like this:
body {background-image:url('paper.gif');}
 Background Image - Repeat Horizontally or Vertically
 By default, the background-image property repeats an image
both horizontally and vertically.
Web Programming32

Example:
body
{
background-image:url('gradient2.png');
background-repeat:repeat-x;
}
Web Programming33

Background - Shorthand property
 To shorten the code, it is also possible to specify all the properties in
one single property. This is called a shorthand property.
 The shorthand property for background is simply "background":
Background Image - Set position and no-
repeat
 The position of the image is specified by the background-position
property:
body
{
background-image:url('img_tree.png');
background-repeat:no-repeat;
background-position:right top;
} Web Programming34

 The background-position property sets the starting
position of a background image.
 Values of background-position
left top
left center
left bottom
right top
right center
right bottom
center top
center center
center bottom
Web Programming35

body {
background:#ffffff url('img_tree.png') no-repeat right top;
}
 When using the shorthand property the order of the
property values is:
 background-color
 background-image
 background-repeat
 background-attachment
 background-position
 It does not matter if one of the property values is
missing, as long as the ones that are present are in this
order.
Web Programming36

 Text
 color: color
 The color property is used to set the color of the text.
 The color can be specified by:
 name - a color name, like "red"
 RGB - an RGB value, like "rgb(255,0,0)"
 Hex - a hex value, like "#ff0000"
 The default color for a page is defined in the body
selector.
body {color:blue;}
h1 {color:#00ff00;}
h2 {color:rgb(255,0,0);}
Web Programming37

The text-decoration property
 Specifies the decoration added to text.
 Note: The color of the decoration should be set by the "color"
property.
 Set the text decoration for h1, h2, h3, and h4 elements:
h1 {text-decoration:overline}
h2 {text-decoration:line-through}
h3 {text-decoration:underline}
h4 {text-decoration:blink}
Web Programming38

 direction: direction {ltr, rtl} borwser issue??
 letter-spacing: value
 text-align: alignment {left, right, center, justify}
 text-decoration: decoration {none, underline, overline, line-
through, blink}
 white-space: Sets how white space inside an element is
handled
normal
pre
nowrap
Web Programming39

Example:
<!DOCTYPE html>
<html>
<head>
<style>
h1 {text-align:center;}
p.date {text-align:right;}
p.main {text-align:justify;}
</style>
</head>
<body>
<h1>CSS text-align Example</h1>
<p class="date">May, 2009</p>
<p class="main">In my younger and more vulnerable years my father gave me some advice
that I've been turning over in my mind ever since. 'Whenever you feel like criticizing
anyone,' he told me, 'just remember that all the people in this world haven't had the
advantages that you've had.'</p>
<p><b>Note:</b> Resize the browser window to see how the value "justify" works.</p>
</body>
</html>
Web Programming40

CSS (cont’d)
text-indent: value
 The text-indent property specifies the indentation of the
first line in a text-block.
 Note: Negative values are allowed. The first line will be
indented to the left if the value is negative.
 Value: Defines a fixed indentation in px, pt, cm, em, etc.
 (16px=1em).
41 Web Programming

 text-transform: transform {none, capitalize, uppercase,
lowercase}
 The text-transform property controls the capitalization
of text.
 Capitalize: Transforms the first character of each word
to uppercase
 Uppercase: Transforms all characters to uppercase
 lowercase :Transforms all characters to lowercase
Example:
h1 {text-transform:uppercase;}
h2 {text-transform:capitalize;}
p {text-transform:lowercase;}
Web Programming42

word-spacing: value
 The word-spacing property increases or decreases the
white space between words.
 Note: Negative values are allowed.
 Example
 Specify that the space between words in paragraphs
should be 30 pixels:
p
{
word-spacing:30px;
}
Web Programming43

CSS Font
 CSS font properties define the font family, boldness,
size, and the style of a text.
Font Family
 The font family of a text is set with the font-family
property.
 Note: If the name of a font family is more than one
word, it must be in quotation marks, like font-family:
"Times New Roman".
 More than one font family is specified in a comma-
separated list:
Web Programming44

• Times New Roman
Georgia
• Arial
Verdana
• Courier New
Lucida Console
• Monospace
• Sans-serif
Eg:
p{font-family:"Times New Roman", Times, serif;}
Web Programming45

 Font Style
 The font-style property is mostly used to specify italic
text.
 This property has three values:
 normal - The text is shown normally
 italic - The text is shown in italics
 oblique - The text is "leaning" (oblique is very similar to italic,
but less supported)
 p.normal {font-style:normal;}
p.italic {font-style:italic;}
p.oblique {font-style:oblique;}
Web Programming46

Font Size
 The font-size property sets the size of the text.
 Setting the text size with pixels, gives you full control
over the text size:
Eg:
h1 {font-size:40px;}
h2 {font-size:30px;}
p {font-size:14px;}
(16px=1em)
Web Programming47

d
 An em is equal to the current font-size, for instance, if
the font-size of the document is 12pt, 1em is equal to
12pt.
 Ems are scalable in nature, so 2em would equal 24pt, .
5em would equal 6pt Web Programming48

 Pixels (px): Pixels are fixed-size units that are used in
screen media (i.e. to be read on the computer screen).
One pixel is equal to one dot on the computer screen
(the smallest division of your screen’s resolution). Many
web designers use pixel units in web documents in order
to produce a pixel-perfect representation of their site as
it is rendered in the browser. One problem with the
pixel unit is that it does not scale upward for visually-
impaired readers or downward to fit mobile devices.
Web Programming49

 Points (pt): Points are traditionally used in print media
(anything that is to be printed on paper, etc.). One point
is equal to 1/72 of an inch. Points are much like pixels, in
that they are fixed-size units and cannot scale in size
Web Programming50

So, What’s the Difference?
 It’s easy to understand the difference between font-size
units when you see them in action. Generally,1em =
12pt = 16px = 100%. When using these font-sizes, let’s
see what happens when you increase the base font size
(using the body CSS selector) from 100% to 120%.
Web Programming51

 As you can see, both the em and percent units get larger
as the base font-size increases, but pixels and points do
not. It can be easy to set an absolute size for your text,
but it’s much easier on your visitors to use scalable text
that can display on any device or any machine. For this
reason, the em and percent units are preferred for web
document text.
Web Programming52

 font-style: style {normal, italic, oblique}
 font-weight: weight {normal, bold, bolder, lighter, 100, 200,
…}
 font-size: size
 font-family: font_list (in order of precedence, separated by
comma)
 Borders
 Margins
 Padding
 List properties
Web Programming53

Borders
 Box model
 describes the rectangular boxes that are generated for
elements
Web Programming54

 Margin - Clears an area around the border. The margin
does not have a background color, it is completely
transparent
 Border - A border that goes around the padding and
content. The border is affected by the background color
of the box
 Padding - Clears an area around the content. The
padding is affected by the background color of the box
 Content - The content of the box, where text and
images appear
Web Programming55

 Width and Height of an Element
 Important: When you set the width and height
properties of an element with CSS, you just set the width
and height of the content area. To calculate the full size
of an element, you must also add the padding, borders
and margins.
Web Programming56

 The total width of the element in the example below is
300px
 width:250px;
padding:10px;
border:5px solid gray;
margin:10px
 The total width of an element should be calculated like this:
 Total element width = width + left padding + right padding + left border +
right border + left margin + right margin
 The total height of an element should be calculated like this:
 Total element height = height + top padding + bottom padding + top
border + bottom border + top margin + bottom margin
Web Programming57

 Margin properties:
 margin-top
 margin-right
 margin-bottom
 margin-left
 margin
 These properties set the top, right, bottom, and left
margin of a box.
 Eg: H1 { margin-top: 2em }
Web Programming58

 The margin property is a shorthand property for setting
margin-top, margin-right, margin-bottom and
margin-left at the same place in the style sheet.
 (top->right->bottom->left)
 If there is only one value, it applies to all sides.
 If there are two values, the top and bottom margins are
set to the first value and the right and left margins are set
to the second.
 If there are three values, the top is set to the first value,
the left and right are set to the second, and the bottom is
set to the third.
Web Programming59

 If there are four values, they apply to the top, right,
bottom, and left, respectively.
 Eg:
 1) BODY { margin: 2em } /* all margins set to 2em
*/
 2) BODY { margin: 1em 2em } /* top & bottom = 1em,
right & left = 2em */
 3) BODY { margin: 1em 2em 3em } /* top=1em,
right=2em, bottom=3em, left=2em */
Web Programming60

 The last rule of the example above is equivalent to the
example below:
BODY {
margin-top: 1em;
margin-right: 2em;
margin-bottom: 3em;
margin-left: 2em; /* copied from opposite side (right) */
}
Web Programming61

 Border properties
 border-top-width ={thin,thick,medium,length}
 border-right-width
 border-bottom-width
 border-left-width
 border-width
 Border width
 These properties set the width of the top, right, bottom,
and left border of a box
Web Programming62

 The border's thickness has an explicit value. Explicit border widths
cannot be negative
Eg:
H1 { border-width: thin } /* thin thin thin thin
*/
H1 { border-width: thin thick } /* thin thick thin
thick */
H1 { border-width: thin thick medium }
Web Programming63

 border-top-color
 border-right-color
 border-bottom-color
 border-left-color
 border-color
Web Programming64

 border-style
 The border-style property specifies what kind of border to
display
 None of the border properties will have ANY effect unless the
border-style property is set!
 border-style values:
 none: Defines no border
 dotted: Defines a dotted border
 dashed: Defines a dashed border
 solid: Defines a solid border
 double: Defines two borders. The width of the two borders
are the same as the border-width value
Web Programming65

 groove: Defines a 3D grooved border. The effect
depends on the border-color value
 ridge: Defines a 3D ridged border. The effect depends on
the border-color value
 inset: Defines a 3D inset border. The effect depends on
the border-color value
 outset: Defines a 3D outset border. The effect depends
on the border-color value
Web Programming66

 Border - Individual sides
 In CSS it is possible to specify different borders for
different sides:
p
{
border-top-style:dotted;
border-right-style:solid;
border-bottom-style:dotted;
border-left-style:solid;
}
Web Programming67

 The example above can also be set with a single
property:
Example
border-style:dotted solid;
Web Programming68

 The border-style property can have from one to four values.
 border-style:dotted solid double dashed;
 top border is dotted
 right border is solid
 bottom border is double
 left border is dashed
 border-style:dotted solid double;
 top border is dotted
 right and left borders are solid
 bottom border is double
 border-style:dotted solid;
 top and bottom borders are dotted
 right and left borders are solid
 border-style:dotted;
 all four borders are dotted
 The border-style property is used in the example above. However, it also works with border-
width and border-color.
Web Programming69

 Border - Shorthand property
 To shorten the code, it is also possible to specify all the
individual border properties in one property. This is
called a shorthand property.
 The border property is a shorthand for the following
individual border properties:
 border:<border-width>|<border-style>|<color>
 The 'border' property is a shorthand property for setting the same width, color, and style for all four
borders of a box.
 border-width
 border-style (required)
 border-color
 Example
 border:5px solid red;
Web Programming70

<!DOCTYPE html>
<html>
<head>
<style>
p.none {border-style:none;}
p.dotted {border-style:dotted;}
p.dashed {border-style:dashed;}
p.solid {border-style:solid;}
p.double {border-style:double;}
p.groove {border-style:groove;}
p.ridge {border-style:ridge;}
p.inset {border-style:inset;}
p.outset {border-style:outset;}
p.hidden {border-style:hidden;}
</style>
</head>
Web Programming71

<p class="none">No border.</p>
<p class="dotted">A dotted border.</p>
<p class="dashed">A dashed border.</p>
<p class="solid">A solid border.</p>
<p class="double">A double border.</p>
<p class="groove">A groove border.</p>
<p class="ridge">A ridge border.</p>
<p class="inset">An inset border.</p>
<p class="outset">An outset border.</p>
<p class="hidden">A hidden border.</p>
Web Programming72

 Unlike the shorthand 'margin' and 'padding' properties,
the 'border' property cannot set different values on the
four borders. To do so, one or more of the other border
properties must be used.
 For example, the first rule below is equivalent to the set
of four rules shown after it:
 P { border: solid red }
 P {
 border-top: solid red;
 border-right: solid red;
 border-bottom: solid red;
 border-left: solid red
 }

Web Programming73

CSS Pseudo-classes
 CSS pseudo-classes are used to add special effects to some selectors.
 Syntax
 The syntax of pseudo-classes:
 selector:pseudo-class {property:value;}
 Anchor Pseudo-classes
 Links can be displayed in different ways in a CSS-supporting browser:
 Example
 a:link {color:#FF0000;} /* unvisited link */
a:visited {color:#00FF00;} /* visited link */
a:hover {color:#FF00FF;} /* mouse over link */
a:active {color:#0000FF;} /* selected link */
Web Programming74

:first-letter
 The :first-letter selector is used to add a style to the first
letter of the specified selector.
Example
 Select and style the first letter of every <p> element:
p:first-letter
{
font-size:200%;
color:#8A2BE2;
}
Web Programming75

Note: The following properties can be used with :first-
letter:
 font properties
 color properties
 background properties
 margin properties
 padding properties
 border properties
 text-decoration
 vertical-align (only if float is 'none')
 text-transform
 line-height
 float
 clear
Web Programming76

:first-line Selector
 :first-line selector is used to add a style to the first line of the specified selector.
 Note: The following properties can be used with :first-line:
 font properties
 word-spacing
 letter-spacing
 text-decoration
 vertical-align
 text-transform
 line-height
 clear
Web Programming77

Example
Select and style the first line of every <p> element:
p:first-line
{
background-color:yellow;
color:#ff0000;
font-variant:small-caps
}
Web Programming78

Note: The "first-line" pseudo-element can only be used with block-level
elements.
Note: The following properties apply to the "first-line" pseudo-element:
 font properties
 word-spacing
 letter-spacing
 text-decoration
 vertical-align
 text-transform
 line-height
 clear
Web Programming79

CSS - The :before Pseudo-element
 The ":before" pseudo-element can be used to insert
some content before the content of an element.
 The following example inserts an image before each <h1>
element:
Example
h1:before
{
content:url(smiley.gif);
}
Web Programming80

<!DOCTYPE html>
<html>
<head>
<style>
h1:before {content:url(smiley.gif);}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>The :before pseudo-element inserts content before an element.</p>
<p><b>Note:</b> IE8 supports the content property
only if a !DOCTYPE is specified.</p>
</body>
</html>
Web Programming81

CSS - The :after Pseudo-element
 The ":after" pseudo-element can be used to insert some
content after the content of an element.
 The following example inserts an image after each <h1>
element:
Example
h1:after
{
content:url(smiley.gif);
}
Web Programming82

display property
 The display property defines how a certain HTML
element should be displayed.
Web Programming83
none
The element will not be displayed
at all
box (or flex-box)
The element is displayed as a block-
level flex container box
block
level element (like paragraphs and
headers)
flex
level flex container box
inline
This is default. The element is
displayed as an inline-level element
(like span)

list-item
The element is displayed as
a list-item, which means
that it has a bullet in front
of it
table
The element is displayed as
a table
Web Programming84

<!DOCTYPE html>
<html>
<head>
<style>
p {display:inline}
</style>
</head>
<body>
<p>These two paragraphs generates inline boxes, and it results in</p>
<p>no distance between the two elements.</p>
</body>
</html>
Web Programming85

Positioning
 The CSS positioning properties allow you to position an
element
 There are four different positioning methods.
 position:static
 Postion:relative
 Postion:absolut
 Postion:fixed
Web Programming86

position:static
 The default positioning for all elements is position:static,
which means the element is not positioned and occurs
where it normally would in the document.
 Normally you wouldn't specify this unless you needed to
override a positioning that had been previously set.
Eg:
.static { position: static; }
<div class="static">static is the default value. An element
with position: static; is not positioned in any special way. A
static element is said to be not positioned and an element
with its position set to anything else is said to be positioned.
</div>
Web Programming87

position:relative
 If you specify position:relative, then you can use top or
bottom, and left or right to move the element relative to
where it would normally occur in the document.
 Let's move div down 20 pixels, and to the left 40 pixels:
Eg:
Web Programming88
#div { position:relative; top:20px; left:-40px; }
.relative1 {
position: relative;
}
.relative2 { position: relative; top: -20px; left: 20px; background-color: white;
width: 500px;
}

<div class="relative1">relative behaves the same as static unless you add some extra
properties.
</div>
<div class="relative2">Setting the top, right, bottom, and left properties of a relatively-
positioned element will cause it to be adjusted away from its normal position. Other
content will not be adjusted to fit into any gap left by the element.
</div>
Web Programming89

position:absolute
 When you specify position:absolute, the element is
removed from the document and placed exactly where
you tell it to go.
Eg: Let's move div a to the top right of the page:
Web Programming90
#div { position:absolute; top:0; right:0; width:200px; }

Web Programming91
.relative {
position: relative;
width: 600px;
height:
400px;
}
.absolute {
position: absolute;
top: 120px;
right: 0;
width: 300px;
height: 200px;
}

Web Programming92
<div class="relative">
This element is relatively-positioned. If this element was position:
static; its absolutely-positioned child would escape and would be
positioned relative to the document body.
<div class="absolute">
This element is absolutely-positioned. It's positioned relative to its
parent.
</div>
</div>

Fixed Positioning
 An element with fixed position is positioned relative to
the browser window.
 It will not move even if the window is scrolled:
Example
Web Programming93
p.pos_fixed
{
position:fixed;
top:30px;
right:5px;
}

Overlapping Elements
 When elements are positioned outside the normal flow, they can overlap
with other elements.
 The z-index property specifies the stack order of an element (which
element should be placed in front of, or behind, the others)
 An element can have a positive or negative stack order:
Example
Web Programming94
img
{
position:absolute;
left:0px;
top:0px;
z-index:-1;
}

<!DOCTYPE html>
<html>
<head>
<style>
img {
position:absolute;
left:0px;
top:0px;
z-index:-1;
}
</style>
</head>
<body>
<img src="w3css.gif" width="100" height="140" />
<p>Because the image has a z-index of -1, it will be placed behind the
text.</p>
</body>
</html>
Web Programming95

CSS Lists
 The CSS list properties allow you to:
 Set different list item markers for ordered lists
 Set different list item markers for unordered lists
 Set an image as the list item marker
List
 In HTML, there are two types of lists:
 unordered lists - the list items are marked with bullets
 ordered lists - the list items are marked with numbers or letters
 With CSS, lists can be styled further, and images can be used as the
list item marker.
Web Programming96

 Different List Item Markers
 The type of list item marker is specified with the list-style-type
property:
Example
Web Programming97
ul.a {list-style-type: circle;}
ul.b {list-style-type: square;}
ol.c {list-style-type: upper-roman;}
ol.d {list-style-type: lower-alpha;}

An Image as The List Item Marker
 To specify an image as the list item marker, use the list-
style-image property:
Example
Web Programming98
ul
{
list-style-image: url('sqpurple.gif');
}

CSS list-style-position Property
 The list-style-position property specifies if the list-item
markers should appear inside or outside the content
flow.
 The list-style-position property specifies if the list-item
markers should appear inside or outside the content
flow.
Web Programming99
ul1{
list-style-type:circle;
list-style-position:inside;
}
Ul2{
list-style-type:circle;
list-style-position:outside;
}

side
Indents the marker and the
text. The bullets appear
inside the content flow
outside
Keeps the marker to the
left of the text. The bullets
appears outside the
content flow. This is
default
Web Programming100

2 columns - right menu
#Header {
margin:50px 0px 10px 0px;
padding:17px 0px 0px 20px;
border:1px dashed #999;
background-color:#eee;
}
#Content {
padding:10px;
background-color: #eee;
}
#Menu {
position:absolute;
top:100px;
right:20px;
width:150px;
padding:10px;
}

<body>
<div id="Header">
<h1>Header.com </h1>
</div>
<div id="Content">
<h1>1. Background</h1>
<p>The Computer Science program was started as one of the streams within the Department of
Mathematics, Faculty of Science, in the early 1980’s. As computers were introduced into
governmental and nongovernmental institutions, the need for trained manpower in Computer
Science was very vital. Realizing the growing need, a diploma program in Computer Science was
launched in the evening program in 1983. In addition, the Department also started to offer
Computer Science as a minor program for Physics, Statistics, and Library Science students. In 1993,
a Degree program in Computer Science was launched.
</p>
<div id="Menu">
<p><a hre="">Link 1</a></p>
</div>
</body>
Web Programming102

Example: Creating 3 columns - flanking menu
Web Programming103

.content {
position:relative;
width:auto;
min-width:120px;
border:1px solid black;
padding:10px;
z-index:3; /* This allows the content to overlap the right menu in narrow windows in good browsers. */
}
#navAlpha {
position:absolute;
width:128px;
top:20px;
left:20px;
border:1px dashed black;
padding:10px;
float:left;
z-index:2;
}
#navBeta {
position:absolute;
width:168px;
top:20px;
right:20px;
border:1px dashed black;
padding:0px;
z-index:1;
}
Web Programming105

<div id="navAlpha">
</div>
<div class="content">
<h1>1. Background</h1>
<p>The Computer Science program was started as one of the streams within the
Department of Mathematics, Faculty of Science, in the early 1980’s. As computers were
introduced into governmental and nongovernmental institutions, the need for trained
manpower in Computer Science was very vital. Realizing the growing need, a diploma
program in Computer Science was launched in the evening program in 1983. In
addition, the Department also started to offer Computer Science as a minor program
for Physics, Statistics, and Library Science students. In 1993, a Degree program in
Computer Science was launched.
</p>
</div>
Web Programming106

<p>The Computer Science program was started as one of the streams within the
Department of Mathematics, Faculty of Science, in the early 1980’s. As computers were
introduced into governmental and nongovernmental institutions, the need for trained
manpower in Computer Science was very vital. Realizing the growing need, a diploma
program in Computer Science was launched in the evening program in 1983.
</p>
</div>
<p><a hre="">Some other links can go here..</a></p>
</div>
<div id="navBeta">
</div>
Web Programming107

Chapter 4a cascade style sheet css

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Andere mochten auch

Andere mochten auch (20)

Ähnlich wie Chapter 4a cascade style sheet css

Ähnlich wie Chapter 4a cascade style sheet css (20)

Chapter 4a cascade style sheet css