Cascading Style Sheet

Cascading Style Sheet
Introduction
• Cascading Style Sheets (CSS) was a standard introduced by the World
Wide Web Consortium (W3C) in 1995.
• Objective: To help designers get more control over their Web pages
by enhancing what HTML can do—it is used to stylize the content of a
Web page.
• HTML is concerned with the structure and organization of a
document, CSS is concerned with its layout and presentation, or
formatting the document.
• Earlier HTML tags were used to set up the structure and style of a
page.
Introduction
• Problem with HTML for styling a Document:
• If you wanted to create an H1 tag with an Arial blue font, point size 22, you
would have to set the same attributes for each H1 tag in the entire document
• With CSS you can set the style once for all H1 tags and put that style
definition in its own .css file.
• Style sheets are called cascading because the effects of a style can be
inherited or cascaded down to other tags.
• If a style has been defined for a parent tag, any tags defined within
that style may inherit that style.
Introduction
• Example: Suppose a style has been defined for a <p> tag.
• The text within these tags has been set to blue and the font is set to
a sans serif font.
• If within the <p> tag, another set of tags is embedded, such as <b> or
<em>, then those tags will inherit the blue color and the “sans serif”
font.
• The style has cascaded down from the parent to the child.
Introduction
• Working: A style sheet consists of the style rules that tell
your browser how to present a document.
• The rules consist of two parts:
• A selector—the HTML element you are trying to stylize
• The declaration block—the properties and values that
describe the style for the selector.
Introduction
Introduction
Example:
<html>
<head><title>First Style Sheet</title>
<style type="text/css">
h1 { color: saddlebrown } /* rule */
h2 { color: darkblue }
</style>
</head>
<body bgcolor=silver>
<h1>Welcome to my Stylin' Page</h1>
<h2>What do you think?</h2>
</body>
</html>
Introduction
CSS Program Structure
• Comments:
• CSS comments, like C language comments, are enclosed in /* */.
• They are the textual comments that are ignored by the CSS parser
H1 { color: blue } /* heading level 1 is blue */

• Grouping:
• Grouping is used to reduce the size of style sheets.
• There are different types of grouping:
• grouping selectors
• grouping declarations
• grouping a property's values
• grouping selectors:
H1, H2, H3 { font-family: arial; color: blue }
• grouping declarations:
H1 {
font-weight: bold;
font-size: 12pt;
font-family: verdana;
}
• grouping a property's values
H2 {font: bold 24pt arial}
<html>
<head><title>Grouping Properties</title>
h1,h2,h3 { color: blue } /* grouping selectors */
h1 { /* grouping declarations */
font-weight: bold;
font-size: 30pt;
}
h2 { /* grouping a property's values */
font: bold 24pt arial
}
</style>
</head>
<h2>What do you think?</h2>
<h3>Groovy!</h3>
</body>
</html>
Common Style Sheet Properties
Property Value/Example Tags Affected
Fonts
font 14pt sans-serif, 80% sans-serif, 110% arial All
font-family serif, sans-serif, cursive, fantasy, monospace All
font-size 12pt, 150%, x-large, medium All
font-style normal, italic All
font-weight normal, bold, bolder, lighter,100, 200...900 All
font-variant normal, small-caps All

Colors and Background

background-color red, blue, #F00, transparent All
background-image URL (bay.gif), none All
background-repeat repeat, repeat-x (horizontally), repeat-y All

(vertically), no-repeat
background-position right top, top center, center, bottom,
100% 100%, 0% 0%, 50% 50%, 50px 75 px
background-attachment fixed, scroll
color red, green, #F00, rgb(255,0,0) All
Text Alignment
letter-spacing normal, 0.1em All
line-height normal, 1.2, 1.2em, 120% All
text-decoration underline, overline, line-through, blink All
text-transform capitalize, uppercase, lowercase, none All
text-align left, right, center, justify All
word-spacing normal, 2em All

Margins and Borders
border-color red, green, teal All
border-left <border-left-width> or <border-style> or All

<color>
border-left-width thin, medium, thick, 3em All
border-right All
border-right-width All
margin 5em, 3em, 2em, 1em (top, right, All

bottom, left)
Working with Colors
• Color properties to create color for the document’s background and
fonts, margins, borders, and more.
• The colors can be expressed with real names (e.g., red, blue, yellow,
magenta) or their corresponding hexadecimal values (e.g., #FF0000,
#0000Ff, #ffff00, #ff00FF).
Working with Colors
Common Color Names and Hexadecimal Values

Working with Colors
Example:
<head>
<title>Colors</title>
body {
font-family:cursive;
background-color: blue;
}
h1 {color: #FFFF33;} /* yellow */
p { color: white ; }
</style>
</head>
Working with Colors
<body>
<font size="2">
<p>This paragraph is all white text on a blue background.<br>
Do you like it? I think it has potential.
</p>
</body>
Working with Colors
Working with Fonts
<head>
body { background-color: darkblue; }
h1 { color: yellow; font-size:x-large; font-family: lucida, verdana,
helvetica; }
h2 { color:lightgreen; font-size:large; font-family:courier; }
h3 { color:lightblue; font-size:medium; font-family:helvetica; }
p { color:white; font-size: 22pt; font-style: italic; font-family: arial;
font-variant:small-caps; }
</style>
</head>
Working with Fonts
<body>
<h1>My name is Papa Bear</h1>
<h2>My name is Mama Bear</h2>
<h3>and I'm the Baby Bear</h3>
<p>Once upon a time, yaddy yaddy yadda...</p>
</body>
Working with Fonts
Working with Text
<html>
<head><title>First Style Sheet</title>
#title{ // ID Selector
word-spacing: 10px;
letter-spacing: 4px;
text-decoration: underline;
text-align: center;
font-size: 22pt ;
font-family:arial;
font-weight: bold;
}
Working with Text
p{
line-height: 2;
text-indent: 6%;
font-family:arial;
font-size:18;
}
</style>
</head>
Working with Text
<body bgcolor="coral">
<p id=title>The Color Palette</p>
<p>The world is a colorful place. Web browsers display millions of
those colors every day to make the pages seem real and interesting.
Browser colors are displayed in …… </p>
<p> Although there are millions of different combinations of color, it is
best when working with Web pages to use what are called Web-safe
colors.</p>
</body>
Working with Text
Working with Backgrounds and Images
<head>
body {
background-image: url('Moonbeams.jpg');
background-repeat: no-repeat;
background-attachment: fixed
background-color: #ccccff;
background-position:center;
}
h2 {
color:white;
font-family:cursive;
font-variant:small-caps;
}
</style>
</head>
<body>
<h2 align='center'>Looking at Moonbeams</h2>
</body>
Working with Margins and Borders
<head>
body { margin-top: 1cm; margin-left: 2cm ; margin-bottom: 1cm;
margin-right: 2cm; border-width: thick; border-style: solid;
border-color: red blue green yellow; padding:15px;
}
h1{
font-weight: bold;
font-size: 30pt;
}
h2 {
border-style: dotted; border-color: purple; font: bold 24pt arial
}
</style>
</head>
<h1>Crossing the Border!</h1>
<h2>Welcome!</h2>
<h3>Nice country.</h3>
</body>
Types of Style Sheets
• The ways to define style sheets within a document:
• Embedded—The style is defined within the <style> tags for
the HTML document.
• Inline—The style is defined for a specific HTML element.
• External—The style is defined in an external file.
The Embedded Style Sheet and the <style> Tag
• A style sheet that is created with the HTML <style></style> tags right in the
current document.
• The <style></style> tags are placed between the <head></head> tags in
the document
• An Example:
<html>
<head>
<style type="text/css" >
h1 { color: blue ; }
</style>
</head>
The Inline Style and the <style> Attribute
• Inline style sheets are also embedded within an HTML document, but
are assigned as an attribute of the <style> tag in the body of the
document. (set to each element)
• Useful for overriding an already existing style for a particular element.
• On the negative side, they have to be redefined for any element that
requires that style, element by element.
• An Example:
<h1 style= "color: red; "> This is red text</h1>
<html>
<head>
body { background-color: orange; color: darkblue; }
</style>
</head>
<body>
<h1 style="color:darkred; text-align:center; text-decoration:underline;">
Inline Styling </h1>
<p style="color: black; background-color: white;
font-family:sans-serif;font-size:large">
This paragraph uses an inline style. As soon as another paragraph is
started, the style will revert back to its default.
</p>
<p> This paragraph has reverted back to its default style, and so has the
following heading.</p>
<h1>Default heading</h1>
</body>
</html>
The External Type with a Link
• The CSS can be separated from the HTML document by placing
style sheets in external files.
• The external style sheets are the most powerful type if you want
the style to affect more than one page.
• The file name for the external style sheet has a .css extension
• To link the external file to the existing HTML file, a <link> is used:
<link rel=stylesheet href="style_file.css" type="text/css">
• Here we do not use <style> </style> tags.
(The external extern.css file)
body { background-color: pink; }
p{
margin-left:20%;
margin-right:20%;
font-family: sans-serif;
font-size: 14
}
h1, h2, h3 { text-align: center; font-family: sans-serif; color: darkblue }
em { color: green; font-weight: bold }
<head>
<link rel=stylesheet type="text/css“ href="extern.css">
</head>
<body>
<h1><u>External Stylin'</u></h1>
<h2>Paragraph Style Below</h2>
<p>The style defined for this paragraph is found in an external CSS
document. The filename ends with <em> .css </em>. Now we can
apply this style to as many pages as we want to.</p>
<h2>An H2 Element</h2>
<h3>An H3 Element</h3>
<p>This is not a <em> designer's dream style </em>, but it illustrates
the power. Don't you think so?</p>
</body>
</html>
Importing with @import
• This rule allows you to import one external CSS file into another by adding
the @import rule
• Format:
@import url(externalfile.css);
• Example:
@import url(http://www.mystyles.com/style.css);
@import url(/stylesheets/.css);
h1 { color: blue }
</style>
Positioning Elements and Layers
• CSS has the ability to position objects on a page, to size
them, and to make them either visible or invisible.
• This helps to move text and images, create animation,
scrolling text, and more.
• There are 3 types of positioning elements on a document:
• Absolute positioning
• Relative positioning
• The z-index layering
Property What it Specifies
bottom, right The placement of the bottom, right edges of an element
clip A specified region of the element that will be seen
display Whether an element is displayed
overflow What to do if there is an overflow; that is, there isn’t enough space for the
Element.
position How to position the element on the page.
top, left The placement of the top, left edges of an element.
visibility Whether an element can be seen.
width, height The size in width and height of an element’s content
z-index The third dimension in a stack of objects
General properties
Absolute Positioning
• Absolute positioning places an element in a specific location on the
page using the absolute coordinates (x, y) of the element in terms of
the browser window itself.
• The top and left properties are used to determine the coordinates.
• If not specified, the browser will assume the top left corner of the
browser window, where x is 0 and y is 0
• The bottom right corner depends on the resolution of the screen.
<head>
#first{
background-color: red;
border-style: solid;
font-weight: bold;
top: 20;
position: absolute;
left: 20;
height: 100;
width: 100;
}
#second{
background-color: blue;
font-weight: bold;
top: 30 ;
position: absolute;
left: 60;
height: 100;
width: 100;
}
</style>
<body>
<p id="first"> First position </p>
<p id="second"> Second position </p>
</body>
Relative Positioning
• Relative positioning places the element in a position relative to the
element where it is defined within the document.
• Used to control the way elements appear in relation to other
elements in the document.
<html>
<head><title>Positioning</title>
<style>
#divStyle
{ background-color:lightblue;
position: absolute;
width: 250px; height: 150px;
border-color: darkblue;
}
#paraStyle
{ color:darkblue;
position: relative;
font-size:18pt;
}
</style>
</head>
<body>
<div style="left:50px; top:50px" id="divStyle">
<h3 style="left:15%; top:20%" id="paraStyle">
This is a paragraph.
</h3>
</div>
</body>
The z-index and Three Dimensions
• The absolute position properties include three coordinates: x, y, and
z, where x is the left side of an object, y is the right side, and z is the
value of the stacking position.
• If you have three containers layered on top of each other, the z
position of the bottom layer is 0; the next layer, 1; and the top layer in
the stack is layer 2.
<head><title>layers</title></head>
<body bgcolor="lightgreen">
<span style="position: absolute; z-index:0; background-color: red; width: 200;height:250;
top: 50px; left:160px;"></span>
<span style="position: absolute; z-index:1; background-color:yellow; width: 90;height:300;
<span style="position: absolute; z-index:2; background-color: blue; width: 250;height:100;
<span style="position: absolute; z-index:3; background-color: white; width: 50;height:50;
</body>

Cascading Style Sheet

Hochgeladen von

Dokumentinformationen

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

Cascading Style Sheet

Hochgeladen von

Copyright:

Verfügbare Formate

Cascading Style Sheet

H1 { color: blue } /* heading level 1 is blue */

font-family serif, sans-serif, cursive, fantasy, monospace All

font-size 12pt, 150%, x-large, medium All

font-style normal, italic All

font-weight normal, bold, bolder, lighter,100, 200...900 All

font-variant normal, small-caps All

Colors and Background

background-image URL (bay.gif), none All

background-repeat repeat, repeat-x (horizontally), repeat-y All

line-height normal, 1.2, 1.2em, 120% All

text-decoration underline, overline, line-through, blink All

text-transform capitalize, uppercase, lowercase, none All

text-align left, right, center, justify All

word-spacing normal, 2em All

border-left <border-left-width> or <border-style> or All

margin 5em, 3em, 2em, 1em (top, right, All

Common Color Names and Hexadecimal Values

Das könnte Ihnen auch gefallen