Slide5 2012

Cascading Style Sheets (CSS)
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
2
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
 External styles
 Browser default
 From highest to lowest
3
CSS (cont’d)
 CSS syntax
 Consists of :
 A CSS rule has two main parts: a selector, and one or more
declarations:
 Format:
selector { property1 : value1;property2: value 2;… }
 declaration
 Each declaration consists of a property and a value.
 The property is the style attribute you want to change. Each property has a
value.
 A CSS declaration always ends with a semicolon, and declaration groups
are surrounded by curly brackets:
4
 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 }
5 Internet Programming
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
}
6
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 "."
7
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>
 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;}
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 "#".
10
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 ???
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;
}
 Attaching a style definition
12
 Three Ways to Insert CSS
 There are three ways of inserting a style sheet:
 External style sheet
 Internal style sheet
 Inline style
 Inline Styles
 An inline style loses many of the advantages of style sheets by mixing content with
presentation. Use this method sparingly!
 To use inline styles you use the style attribute in the relevant tag. The style attribute can
contain any CSS property.
<tag_name style=“property:value; property: value;”> … </tag_name>
Ex. <table style=“background-color: yellow”>… </table>
 The example shows how to change the color and the left margin of a paragraph:
 <p style="color:sienna;margin-left:20px">This is a paragraph.</p>
 Internal Style Sheet
 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>
 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
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
17
CSS (cont’d)
 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)
18
 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;}
 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.
 body
{
background-image:url('gradient2.png');
background-repeat:repeat-x;
}
 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;
}
 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.
 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
 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);}
 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}
 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
 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>
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).
28
 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;}
 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;
}
 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:
 Times New Roman
Georgia
 Arial
Verdana
 Courier New
Lucida Console
 Monospace
 Sans-serif
 Eg:
 p{font-family:"Times New Roman", Times, serif;}
 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;}
 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)
 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
Borders
 Box model
 describes the rectangular boxes that are generated for
elements
 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
 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.
 The total width of the element in the example below is
300px
 width:250px;
padding:10px;
border:5px solid gray;
margin:1
 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
 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 }
 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.
 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 */
 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) */
 }
 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
 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 }
 border-top-color
 border-right-color
 border-bottom-color
 border-left-color
 border-color
 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
 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
 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;
}
 The example above can also be set with a single property:
 Example
 border-style:dotted solid;
 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.
 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;
 <!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>
 <body>
 <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>
 </body>
 </html>
 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
 }

 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 */
 :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;
}
 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
 :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
 Example
 Select and style the first line of every <p> element:
 p:first-line
{
background-color:yellow;
 color:#ff0000;
 font-variant:small-caps
}
 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
 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);
}
 <!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>
 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);
}
 The display property defines how a certain HTML
element should be displayed.The element will not be
none
displayed at all
The element is displayed as
box (or flex-box) a block-level flex container
box
block a block-level element (like
paragraphs and headers)
flex a block-level flex container
box
This is default. The
element is displayed as an
inline
inline-level element (like
span)
a list-item, which means
list-item
that it has a bullet in front
of it
table
a table
 <!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>
 Positioning
 The CSS positioning properties allow you to position an
element
 There are four different positioning methods.
 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.
 #div { position:static; }
 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:
 #div { position:relative; top:20px; left:-40px; }
 position:absolute
 When you specify position:absolute, the element is
removed from the document and placed exactly where you
tell it to go.
 Let's move div a to the top right of the page:
 #div { position:absolute; top:0; right:0; width:200px; }
 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
 p.pos_fixed
{
position:fixed;
top:30px;
right:5px;
}
 Overlapping Elements
 When elements are positioned outside the normal flow, they can overlap
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
 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>
 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.
 Different List Item Markers
 The type of list item marker is specified with the list-style-
type property:
 Example
 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;}
 <!DOCTYPE html>
 <html><head><style>
 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;}
 </style></head><body>
 <p>Example of unordered lists:</p>
 <ul class="a">
 <li>Coffee</li>
 <li>Tea</li>
 <li>Coca Cola</li>
 </ul >
 <ul class="b">
 <li>Coffee</li>
 <li>Tea</li>
 </ul>
 <p>Example of ordered lists:</p>
 <ol class="c">
 <li>Coffee</li>
 <li>Tea</li>
 </ol>
 <ol class="d">
 <li>Coffee</li>
 <li>Tea</li>
 </ol>
 </body>
 </html>
 An Image as The List Item Marker
 To specify an image as the list item marker, use the list-
style-image property:
 Example
 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.
 Outside:
 Coffee
 Tea
 Coca-cola
 Inside:
 Coffee
 Tea
 Coca-cola
Indents the marker and the
side text. The bullets appear
inside the content flow
Keeps the marker to the left
of the text. The bullets
outside
appears outside the content
flow. This is default

Slide5 2012

Uploaded by

Copyright:

Available Formats

Slide5 2012

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Slide5 2012

Uploaded by

Copyright:

Available Formats

Cascading Style Sheets (CSS)

Cascading Style Sheets (CSS)

 An extension (addition) to HTML which allows us to style

 Rules of precedence application:

 HTML tag names as selectors

 Attaching a style definition

<link rel=“stylesheet” type=“text/css” href=“url”>

 Do not add a space between the property value and the

 The default color for a page is defined in the body

white-space: Sets how white space inside an element is handled

 <p>These two paragraphs generates inline boxes, and it results in</p>

 <p>no distance between the two elements.</p>

ol.c {list-style-type: upper-roman;}

You might also like