Embed Size (px)
Citation preview
Lecture # 33
Cascade Style Sheets (CSS)
Cascade Style Sheets (CSS):
Preserving a consistent “look and feel” of a website
across multiple pages
Content vs Style• Before version 4.0 of HTML, style information was intermixed
with content. • Version 4.0 and above separate HTML into
– Content – what is in an html page• Described in the “HTML” presentation
– Style – how does that information look– Some tags were deprecated: <bold>, <center>, <font>– Additional capabilities were added
• Style is specified by “css” or cascade style sheets• For a tutorial on CSS see
* http://www.w3schools.com/css/demo_default.htm *http://pagetutor.com/css_tutor/index.html
For free access to many books on CSS go Here and search for “css”
CSS PropertiesProperties: what “look and feel” features do you want to define?
– Background properties – what does the background look like– Border and outline properties – what do borders look like– Dimension properties – how tall and wide are html elements– Font properties – what is the font of the text– List properties – what do lists look like– Margin properties – what do margins look like– Padding properties – what does the padding around elements look
like– Positioning properties – where does an element appear on the page– Table properties – what does a table look like– Text properties – everything about the text except the font– Others: Generated content properties, print properties, pseudo-
classes/elements properties
• CSS Saves a Lot of Work!• CSS defines HOW HTML elements are to
be displayed.• Styles are normally saved in external .css
files. External style sheets enable you to change the appearance and layout of all the pages in a Web site, just by editing one single file!
Understanding Style Rules
• A Style Rule is composed of two parts: a selector and a declaration.
TH {color: red;}.• The Selector indicates the element to which the
rule is applied.• The Declaration determines the property values of
a selector.
SelectorDeclaration
Understanding Style Rules
• The Property specifies a characteristic, such as color, font-family, position, and is followed by a colon (:).
• The Value expresses specification of a property, such as red for color, arial for font family, 12 pt for font-size, and is followed by a semicolon (;).
P {color: red;}
Property Value
Declaration Syntax• CSS declarations end with ;• Groups are surrounded by { … }:
• p {color:red;text-align:center;}
• To improve readability:• p
{color:red;text-align:center;}
CSS Comments begin with "/*", and end with "*/":• /*This is a comment*/
•In addition to setting a style for a HTML element, CSS allows you to specify your own selectors called "id" and "class".
•The id Selector•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 "#".•The style rule below will be applied to the element with id="para1":
•Example•#para1{text-align:center;color:red;}
The id and class Selectors
The class Selector
• 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 any HTML elements with the same class.
• The class selector uses the HTML class attribute, and is defined with a "."• In the example below, all HTML elements with class="center" will be center-
aligned:
• Example• Below, all p elements with class="center" will be center-aligned:
p.center {text-align:center;}
Three Ways to Insert CSS
• Internal style sheet - part of the current html file
• Inline style - imbedded in the html
• External style sheet - stored in a separate .css file
Use when a single document has a unique style:
<head><style type="text/css">hr {color:red;}p {margin-left:20px;}body {background-image:url("images/back40.gif");}</style></head>
Internal Style Sheet
Can be used for local override of styles set for the same Selector externally:
For example, an external style sheet has these properties for the h3 selector:h3
{color:red;text-align:left;font-size:8pt;}
And an internal style sheet has these properties for the h3 selector:h3
{text-align:right;font-size:20pt;}
The properties for h3 will be:color:red;text-align:right; Color is inherited from external style sheet font-size:20pt; Text-alignment, font-size from internal style sheet
Inline Styles
Demos of CSS Internal & Inline Styles
Go to
http://www.w3schools.com/css/demo_default.htm
• Ideal for applying style to many pages. • Change the look of an entire Web site by changing the .css file.• Each page must link to the style sheet using the <link> tag:
<head><link rel="stylesheet" type="text/css" href="mystyle.css" /></head>
• Example of a .css style sheet file:
hr {color:red;}p {margin-left:20px;}body {background-image:url("images/back40.gif");}
External Style Sheet
Demos of CSS External Style Sheets
• The font family of a text is set with the font-family property.
• The font-family property should hold several font names as a "fallback" system. If the browser does not support the first font, it tries the next font.
• p{font-family:"Times New Roman", Times, serif;}
Font Family
Color Values• Several properties take a color value.
• There are several ways to specify colors.
Here are 2 (For more information go here.)
• Use standard names:
body {background-color:yellow}– Makes entire web page background yellow
body {background-color:#FFFF00}
Measurement Values• Width, height, and length properties require integer
values representing “amounts”.• Specify using units such as pixels, points, percentages,
ems, inches, millimeters, and centimeters. For more information see http://www.w3schools.com/css/css_units.asp.
• Examples:img {width: 100px; height:100px}
Specifies width and height in terms of pixels
img {width: 50%; height:50%}Specifies width and height as a percent of
itsenclosing block
<div> tags• <div> tag: a paired tag
• used primarily to group elements so they can be formatted using CSS style properties
Layout Model
• All HTML elements are considered boxes
• In order to set the width and height of an element correctly in all browsers, you need to know how the box model works.
• The box model illustrates how the CSS properties: margin, border, and padding, affects the width and height of an element.
Layout ModelContinued
• When you specify the width and height properties of an element with CSS, you are just setting the width and height of the content area. To know the full size of the element, you must also add the padding, border and margin.
Layout ModelContinued
• If an element had the following properties:
width:250px;
padding:10px;
border:5px solid gray;
margin:10px;
• It would be 300px wide
What does Cascade Mean?
• Properties of one style sheet or style definition override another
• Internal overrides External
• Inline overrides Internal
Some Useful Properties
• Don’t expect you to memorize them.• Do expect you to be able to look them up
– Here– Or, for books on CSS go Here; search for “css”– Google is your friend
• We will introduce several CSS properties• Inherited properties
– Inherited from parent or containing element
Background Properties
Property Descriptionbackground Sets background properties in one declarationbackground-attachment Sets whether a background image is fixed or
scrolls with the rest of the pagebackground-color Sets the background color of an element background-image Sets the background image for an elementbackground-position Sets the starting position of a background imagebackground-repeat Sets how a background image will be repeated
Margin Properties
Property Descriptionmargin Sets all the margin properties in one declaration margin-bottom Sets the bottom margin of an element margin-left Sets the left margin of an element margin-right Sets the right margin of an element margin-top Sets the top margin of an element
Border and Outline PropertiesProperty Descriptionborder Sets all the border properties in one declaration border-bottom Sets all the bottom border properties in one declaration border-bottom-color Sets the color of the bottom border border-bottom-style Sets the style of the bottom border border-bottom-width Sets the width of the bottom border border-color Sets the color of the four borders border-left Sets all the left border properties in one declaration border-left-color Sets the color of the left border border-left-style Sets the style of the left border border-left-width Sets the width of the left border border-right Sets all the right border properties in one declaration border-right-color Sets the color of the right border border-right-style Sets the style of the right border border-right-width Sets the width of the right border border-style Sets the style of the four borders border-top Sets all the top border properties in one declaration border-top-color Sets the color of the top border border-top-style Sets the style of the top border border-top-width Sets the width of the top border border-width Sets the width of the four borders outline Sets all the outline properties in one declaration outline-color Sets the color of an outline outline-style Sets the style of an outline
outline-width Sets the width of an outline
Padding Properties
Property Descriptionpadding Sets all the padding properties in one declaration padding-bottom Sets the bottom padding of an element padding-left Sets the left padding of an element padding-right Sets the right padding of an element padding-top Sets the top padding of an element
Dimension Properties
Property Descriptionheight Sets the height of an element max-height Sets the maximum height of an element max-width Sets the maximum width of an element min-height Sets the minimum height of an element min-width Sets the minimum width of an element width Sets the width of an element
Font Properties
Property Descriptionfont Sets all the font properties in one declaration font-family Specifies the font family for text font-size Specifies the font size of text font-style Specifies the font style for text font-variant Specifies whether or not a text should be displayed in a small-caps font font-weight Specifies the weight of a font
Text Properties
Property Descriptioncolor Sets the color of text direction Specifies the text direction/writing direction letter-spacing Increases or decreases the space between characters in a text line-height Sets the line height text-align Specifies the horizontal alignment of text text-decoration Specifies the decoration added to text text-indent Specifies indentation of first line in a text-block text-shadow Specifies the shadow effect added to text text-transform Controls the capitalization of text vertical-align Sets the vertical alignment of an element white-space Specifies handling of white-space inside elementword-spacing Increases/decreases space between words in a text
List Properties
Property Descriptionlist-style Sets all the properties for a list in one declaration list-style-image Specifies an image as the list-item marker list-style-position Specifies where to place the list-item marker list-style-type Specifies the type of list-item marker
Positioning PropertiesProperty Descriptionbottom Sets the bottom margin edge for a positioned box clear Specifies sides where other float elements not allowed clip Clips an absolutely positioned element cursor Specifies the type of cursor to be displayed display Specifies the type of box an element should generate float Specifies whether or not a box should float left Sets the left margin edge for a positioned boxoverflow Specifies what happens if content overflows boxposition Specifies the type of positioning for an element right Sets the right margin edge for a positioned box top Sets the top margin edge for a positioned box visibility Specifies whether or not an element is visible z-index Sets the stack order of an element
Table PropertiesProperty Descriptionborder-collapse Specifies whether or not table borders should be
collapsed border-spacing Specifies distance between borders of adjacent cells caption-side Specifies the placement of a table caption empty-cells Specifies whether or not to display borders and
background on empty cells in a table table-layout Sets the layout algorithm to be used for a table
Examples
• Many more examples can be found at
http://www.w3schools.com/css/
