Cascading Style Sheets (CSS)
Prepared by: Prof. Samson N. Milanes Jr., MS Engineering
Overview
Cascading Style Sheets, also known as CSS
Provide
a way for you to apply styles such as fonts, font sizes font styles, borders, and colors to HTML and other online documents. CSS grew out of a need to separate the format, or appearance, of an online document from the content.
Overview
Cascade: in the context of CSS
This
term means, that only one style sheet can derive from, or spill over into, another. Web designers to have significantly control over where and how Web content is displayed.
CSS provides more power and flexibility
Allows
Content vs. Format
Content: the actual text, graphics, and other features of document design. Format: contrary to content, refers to how the contents features appear. CSS is important to Web page designers because it allows them to separate content and format.
Three Ways to Add Styles
STYLE Attribute: Inline Style Sheet
Apply
only to individual elements or tags
to all elements within the current document
STYLE Element: Internal Style Sheet
Apply
External Style Sheet (Reuse Style)
Apply
a collection of styles in a separate file Represent the best method for reuse of styles
Inline Style Sheet
A style applied through the STYLE attribute applies only to the current element or tag.
STYLE attribute centering text in a <P> tag: <P STYLE=text-align: center>Warning!</P>
Internal Style Sheet
A style that can apply to all elements or tags of a certain type within an HTML document.
<HEAD> <TITLE>Cascading Style Sheets</TITLE> <STYLE TYPE=text/css> <!-H1 {text-align: center} --> </STYLE> </HEAD>
External Style Sheet
A style that allows you to reuse an external style sheet with other documents. You can also link to more tan one style sheet at a time.
/* File: Stylesheet.css */
H1 {text-align: center}
External Style Sheet
You can link one or more HTML documents to it with the <LINK> tag in a HEAD section.
<HEAD> <TITLE>Cascading Style Sheets</TITLE>
<LINK REL=stylesheet TYPE =text/css REF=stylesheet.css>
</HEAD>
<LINK> Element
The <link> tag defines the relationship between a document and an external resource. The <link> tag is most used to link to style sheets. Note: The <link> element is an empty element, it contains attributes only.
This
element goes only in the head section, but it can appear any number of times.
REL Attribute
REL required. Specifies the relationship between the current document and the linked document.
= alternate = archives = author = help = icon = search = stylesheet = tag
Properties and Values
The property describes what appearance you want to change and the value describes how you want to change it; always separated by a colon (:) Two Parts of the Style Value:
actual
property value of the property Property: value | font-family: Arial
A Word About <FONT>
The term deprecated applies when a tag has fallen out of favor, usually because a better tag has been added to the latest specification. The <FONT> tag allows you to control:
typeface
with the FACE attribute font color with the COLOR attribute font size with the SIZE attribute
Font and Text Properties
CSS offers a variety of properties that controls fonts and text. With these properties, you can:
change
a font typeface control font size make text bold or italic justify text
Font and Text Properties
Font & Text Properties font-family font-size font-weight font-style text-align text-indent Description Font or typeface Size of the font Normal or bold Normal, italic, or oblique Left, center, right, or justify Indent first line Code Example font-family: Tahoma; font-size: 12pt; font-weight: bold; font-style: italic; text-align: right; text-indent: 10pt;
Font-Size Property
CSS applies four length units that start with the letter P, as shown below:
Length Unit Point (pt) Pica (pc) Pixel (px) Definition 1/72 of an inch Equal to 12 points Units measure by pixel will vary according to the number picture element dots (pixels) on a display Units divisible by 100, similar to monetary units and financial indicators Code Example font-size: 12pt; font-size: 2 pc; font-size: 40px:
Percentage (%)
font-size: 200%
Font-Weight Property
Font-weight Value normal 100-900 bold bolder lighter Description Normal font weight (same as 400) Nine-value range of boldness Bold font weight (same a 700) Increment to the next value in the range Decrement to the previous value in the range Code Example font-weight: normal; font-weight: 700; font-weight: bold; font-weight: bolder; font-weight: lighter;
Adding the Font Property
<HTML> <HEAD> <TITLE>Cascading Style Sheets</TITLE> </HEAD> <BODY> <P STYLE=font-family: Arial, Verdana; font-size: 24pt; font-weight: bold>This paragraph has some style.</P> </BODY> </HTML>
Color and Background Properties
Color & Background Properties color background-color background-image background-repeat Description Color of text, borders, etc. Background color of a tag Image to place in background of page How a background image is displayed Code Example color: blue; background-color: black; background-image: url (water.gif) background-repeat: repeat-y;
Color Property
You can specify colors using the following methods. Each of following examples applies the color red:
A A
color name
red; rgb (255,0,0);
color: color:
red, green, blue (RGB) triplet RGB triplet using percentages
rgb (100%,0%,0%);
#FF0000;
An A
color:
color:
hexadecimal value representing the RGB triplet
Color Names with Numeric Values
Color Name antiquewhite cornflowerblue gainsboro lemonchiffon linen moccasin peru wheat Hexadecimal Value #FAEBD7 #6495ED #DCDCDC #FFFACD #FAF0E6 #FFE4B5 #CD853F #F5DEB3 RGB Value 250,235,215 100,149,237 220,220,220 255,250,205 250,240,230 255,222,173 205,133,63 238,222,179
Background-Repeat Property
Background-repeat property indicate how you want the background image to be displayed. Four values are associated with this property:
repeat:
the background image is repeated both vertically and horizontally. repeat-x: the image is repeated along the horizontal X axis, but only a single line. repeat-y: the image is repeated along the vertical X axis, but only a single line. no-repeat: as you may have suggested, the image is not repeated at all, but is only displayed once.
Margin Property
Margin properties are part of CSS box properties, such as margins and borders, control the size, shape, and position of surrounding elements.
margin-left:
controls the left margin of an element. margin-right: affects the right margin. margin-top: adjusts the margin above the element. margin-bottom: handles the margin below it. margin: handles all four margins with one command.
Border Property
CSS offers a number of ways to render borders using border properties:
Border Property border-style border-width border-color Definition Style of the border Width of the border Color of the border Code Example border-style: solid; border-width: 3pt; border-color: red;
CSS includes a good number of border styles, such as solid, dotted, dashed, double, groove, ridge, inset, outset, and none.
Reusing Styles
Among the most powerful features of CSS is the ability to reuse style definitions so they apply not only one, but to all tags of a particular type. Reuse = Reduced Maintenance
<HEAD>
Element <STYLE> Element Type Attribute <STYLE TYPE=text/css> Commenting Styles with <!-- and -->
Applying a Style to an Entire Document
<HTML> <HEAD> <TITLE>Cascading Style Sheets</TITLE> <STYLE TYPE=text/css> <!-H1 {text-align: center;} --> </STYLE> </HEAD>
Applying a Style to an Entire Document
<BODY> <H1>Document Styles</H1> <P>Document styles allow you to reuse styles throughout a document.</P> <H1>Reduced Maintenance</H1> <P>Document styles reduce maintenance.</P> </BODY> </HTML>
CSS Rule
A selector is a keyword that indicates the element or class of elements to which a style is applied. CSS Rule
selector
{property: value} H1 {text-align: center;}
selector {text-align: center;} CSS declaration
H1
CSS Declaration
The CSS declaration is a subset of the CSS rule. The CSS declaration consists of:
opening
brace ({) CSS property, followed by a colon (:) value that is legal for the property semicolon (;) should follow each property/value set closing brace (})
Adding More Document Styles
<HTML> <HEAD> <TITLE>Cascading Style Sheets</TITLE> <STYLE TYPE=text/css> <!-H1 {font-family: verdana, arial, helvetica, sans-serif; font-size: 18pt; margin-top: .5in; text-align: center; color: cornflowerblue;}
P {font-family: book antiqua, times new roman, san-serif; margin-left: 50pt; --> </STYLE> </HEAD>
Creating an External Style Sheet
<STYLE TYPE=text/css> <!-/* Stylesheet.css */ H1 {font-family: verdana, arial, helvetica, sans-serif; font-size: 18pt; margin-top: .5in; text-align: center; color: cornflowerblue;} P {font-family: book antiqua, times new roman, san-serif; margin-left: 50pt; --> </STYLE>
Linking to an External Style Sheet
<HTML> <HEAD> <TITLE>Cascading Style Sheets</TITLE> <LINK REL=stylesheet TYPE =text/css HREF=stylesheet.css> </HEAD> <BODY>
Advantages of External Styles
External style sheets have several advantages over document-level or element-level styles.
reuse
external sheets with other HTML documents link more than one style sheet to a single HTML document easily establish a look and feel for an entire Web site from a single external style sheet reduce the time and cost of maintaining styles by placing all styles in a single repository
Style by Inheritance
You can override a style inherited from a parent tag by using the STYLE attribute. A style applied to a <BODY> tag, for example, will be inherited by its children.
<STYLE TYPE=text/css> <!-BODY {font-size: 12pt} --> </STYLE>
@Import Rule
The @import rule works only if you are using Microsoft Internet Explorer 4 or later.
<LINK REL=stylesheet TYPE =text/css HREF=stylesheet.css>
<STYLE TYPE=text/css> <!-@import url (stylesheet.css) --> </STYLE>
Adding Style with Class
The Class attribute, like the STYLE attribute, is a core attribute of HTML 4.0. Think of a class selector as a container of sorts that can hold styles. Class selector definitions begin with a period (.) ID selector definitions begin with a pound sign (#)
Class and ID Selector Definitions
Class selector
.small {font-size: 10pt} <P CLASS=small>The font size for this element is 10 points.</P>
ID selector
#big {font-size: 18pt} <P ID=big>The font size for this element is 18 points</P>
Adding Class and ID Selectors
/* Stylesheet.css */ H1 {font-family: verdana, arial, helvetica, sans-serif; font-size: 18pt; margin-top: .5in; text-align: center; color: cornflowerblue;}
#section1 {font-size: 24pt; text-align: left; font-style: italic;}
Adding Class and ID Selectors
H2 {font-family: verdana, arial, helvetica, sansserif; font-size: 14pt; margin-top: .2in; text-align: left; color: cornflowerblue;} P {font-family: book antiqua, times new roman, sanserif; margin-left: 50pt;}
Adding Class and ID Selectors
.note {margin-top: 30px; margin-left: 150px; margin-right: 150px; margin-bottom: 40px; font-size: 10pt;} B {color: cornflowerblue;}
Using DHTML to Create Effects
Dynamic HTML is a term that describes the criterion of dynamic effects using HTML, CSS, and JavaScript (or another scripting language). Pseudo-classes allow you to alter the appearance of elements based on a user action.
The
selector for a pseudo-class is formed by an element name followed immediately by colon (:). Pseudo-class names are case-sensitive.
Pseudo-Classes
Pseudo-Class :hover Description A dynamic pseudo-class that changes when a mouse pointer hovers over the element. A dynamic pseudo-class that changes when activated by the click of a mouse button. A dynamic pseudo-class that changes while the element has focus, that is, it is ready to accept keyboard input. Code Example A:hover {textdecoration: underline; color: red;} A:active {color: blue;}
:active
:focus
A:focus {backgroundcolor: ivory;}
Pseudo-Classes
Pseudo-Class :link Description A link-related pseudoclass that controls the appearance of a link.
A link-related pseudoclass that controls the appearance of a visited link.
Code Example A:link {text-decoration: none;} A:visited {color: black;}
:visited
:first-child
A pseudo-class that identifies an element that is the first child of another element.
DIV > P:first-child {margin-left: 1in;}
:lang
A pseudo-class that identifies the language of an HTML document.
HTML:lang(de) {quotes: \2009 \203A;}
<SPAN> Element
The <SPAN> tag is a special inline element with the sole purpose of providing a way to apply styles or scripting to inline text. Other examples of inline elements are <B>, <I>, <U>, <EM>, and <STRONG>.
Using the A:hover Pseudo-class
B {color: cornflowerblue;} SPAN {font-family: courier new; monospace; font-size: 13pt;}
A {text-decoration: none; color: black;} A:hover {text-decoration: underline; color: cornflowerblue; background-color: gainsboro;}
