Scribd
Upload
494 views

HTML 20121031

The document discusses Cascading Style Sheets (CSS), which is a style sheet language used to describe the presentation of structured documents like HTML. It describes the three versions of CSS - CSS1, CSS2, and CSS3 - and the features each version introduced. It also explains the different ways of applying CSS styles to HTML documents, including inline styles, embedded styles, and external styles. Finally, it covers CSS concepts like the CSS box model and how to specify colors, backgrounds, and other visual properties.

Uploaded by

kiny
Copyright
© © All Rights Reserved
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
494 views

HTML 20121031

The document discusses Cascading Style Sheets (CSS), which is a style sheet language used to describe the presentation of structured documents like HTML. It describes the three versions of CSS - CSS1, CSS2, and CSS3 - and the features each version introduced. It also explains the different ways of applying CSS styles to HTML documents, including inline styles, embedded styles, and external styles. Finally, it covers CSS concepts like the CSS box model and how to specify colors, backgrounds, and other visual properties.

Uploaded by

kiny
Copyright
© © All Rights Reserved
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
You are on page 1/ 25

CSS

MUGANGA Jean Pierre


[email protected]
Introduction
 Style sheets
 Files that describe the layout and appearance of a
document
 CSS
 Cascading Style Sheets
 Style sheet language used on the Web
 CSS specifications are maintained by the World Wide
Web Consortium (W3C)
 Three versions of CSS:
 CSS1
 CSS2
 CSS3
CSS versions
 CSS1
 introduced styles for the following document features:
 Fonts
 Text
 Color
 Backgrounds
 Block-level Elements

New Perspectives on HTML and XHTML, Comprehensive 3


CSS versions
 CSS2
 Introduced styles for the following document features:
 Positioning
 Visual Formatting
 Media Types
 Interfaces

New Perspectives on HTML and XHTML, Comprehensive 4


CSS versions
 CSS3
 Introduced styles for the following document features:

 User Interfaces

 Accessibility

 Columnar layout

 International Features

 Mobile Devices

New Perspectives on HTML and XHTML, Comprehensive 5


Applying CSS to HTML/XHTML document
 How CSS works
 CSS works by allowing you to associate RULES with the
elements that appear in the document .
 These rules govern how the content of those elements
should be rendered.
 Rule is made up of two parts:
 Selector - indicates which element or elements the
declaration applies to.
 Declaration - sets out how the elements should be styled
and is split into two parts:
 Property
 Value
Applying CSS
 Three ways of applying CSS to HTML/XHTML
document:
 Inline Styles
 Embedded Styles
 External Styles

Precedence order
 Inline styles
 Embedded styles
 External styles
Applying CSS to HTML/XHTML document
 Inline styles
 Are applied directly to the elements they affect.
 Easy to use
 General form:
<element style=“property1: value1;
property2: value2; … ; propertyn :
valuen”>
 Eg:
<td style=“ border-style:solid; border-
width:1px; border-color:#000000;”>
Applying CSS to HTML/XHTML document
 Embedded styles
 Style definitions are embedded in a document head.
 General form
<head>
<title></title>
<style>
CSS Rules
</style>
</head>
Applying CSS to HTML/XHTML document
 External styles
 A separate file is used to contain CSS rules
 <link> element is used in the header of HTML/XHTML
element to indicate which style sheet to control the
appearance of the document.
 General form
<head>
<title></title>
<link rel=“stylesheet” type=“text/css”
href=“myexternalstyle.css” />
</head>
Colors & Backgrounds
Colors and backgrounds
 Foreground color
 Is the color of an element.
 In most cases is the color of the font
 Property: color
 Eg.
p.one {color: #C0C0C0}
p.two {color: blue}
Colors and backgrounds
 Background Color
 The background color of an element is the color of the
virtual page that the element is rendered upon
 Property: background-color
 Eg.
<p style=“background-color: blue;
color=white”>This paragraph will render
as white text on a blue background.</p>
Colors and backgrounds
 Background Images
 Images that is inserted in an element’s background.
 Property: background-image
 Eg.
p {
background-image: url(“bg.jpg”);
}
Colors and backgrounds
 Background Images – Repeating background image
 You can specify whether a background image is tiled or not.
 Property: background-repeat
 Values: repeat-x,repeat-y, repeat, no-repeat
 Eg.
p {
background-image: url(“bg.jpg”);
background-repeat: repeat-x;
}
Colors and backgrounds
 Background Images – Scrolling background image
 You can allow the background to scroll when as element is
scrolled or disallow this behavior.
 Property: background-attachment
 Values: scroll, fixed.
 Eg.
body {
background-image: url(“bg.jpg”);
background-attachment: fixed;
}
Colors and backgrounds
 Background Images – Positioning background image
 You can specify the position of the graphic in the element’s
background.
 Property: background-position
 Values:
 top left, top center, right top, left
center, center, right center, bottom left,
bottom center, bottom right

 <percentage> <percentage> (distance from


the left and top)

 <length> <length> (from the left and top)


Colors and backgrounds
 Background Images – Positioning background image
 Eg.
p.one{
background-image: url(“bg.jpg”);
background-position: top center;
}
p.two{
background-image: url(“bg.jpg”);
background-position: 50% 50%;
}
CSS Box Model
CSS Box Model
 The CSS Box Model (1)
 CSS treats every HTML element as if it were in a box.
 Determines how elements are positioned within the
browser window.
 CSS Box consists of:
 Margins
 Border
 Padding
 Content.
CSS Box Model
Border
 The CSS Box Model (2)
Margin-top

Padding-right
Padding-top

Margin-right
Padding-left
Margin-left

Actual Content
Padding-bottom

Margin-bottom
CSS Box Model
 The CSS Box Model (3)
 Note:
When a bottom margin of one element meets the top
margin of another, only the larger of the two will show.
If they are the same size, only one of the margins will
show.
CSS Box Model
 The CSS Box Model (4)
Eg (1)
<html>
<head>
<style>
h1, h2, b, p {
border: 5px solid black;
padding: 5px;
}
b {
background-color: yellow;
}
</style>
CSS Box Model
 The CSS Box Model (5)
Eg (2)
</head>
<body>
<h1>Header 1</h1>
<h2>Header 2</h2>
<p>This is in <b>Paragraph 1</b></p>
<p>This is in <b>Paragraph 2</b></p>
</body>
</html>
CSS Box Model
 The CSS Box Model (6)
Eg (3)
The page will be rendered as follows:

You might also like