Cascading Style Sheets (CSS)
Cascading Style Sheets (CSS)
Overview
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
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.
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.
a collection of styles in a separate file Represent the best method for reuse of styles
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>
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>
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}
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
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
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
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-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;
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:
An A
color:
color:
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 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 -->
CSS Rule
A selector is a keyword that indicates the element or class of elements to which a style is applied. CSS Rule
selector
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 (})
P {font-family: book antiqua, times new roman, san-serif; margin-left: 50pt; --> </STYLE> </HEAD>
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>
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 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>
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
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.
:visited
:first-child
A pseudo-class that identifies an element that is the first child of another element.
:lang
<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>.
A {text-decoration: none; color: black;} A:hover {text-decoration: underline; color: cornflowerblue; background-color: gainsboro;}