Cascading Style Sheet For HTML

1|Page
Cascading Style Sheet for HTML Cascading Style Sheets, a new feature being added to HTML that gives both Web site developers and users more control over how pages are displayed. With CSS, designers and users can create style sheets that define how different elements, such as headers and links, appear. These style sheets can then be applied to any Web page. The term cascading derives from the fact that multiple style sheets can be applied to the same Web page. We begin with a small HTML document:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <HTML> <HEAD> <TITLE>Sample HTML</TITLE> </HEAD> <BODY> <H1>Sample HTML</H1> <P>Morong High School. </BODY> </HTML>
The <!DOCTYPE> declaration must be the very first thing in your HTML document, before the <html> tag. The <!DOCTYPE> declaration is not an HTML tag; it is an instruction to the web browser about what version of HTML the page is written in. In HTML 4.01, the <!DOCTYPE> declaration refers to a Document Type Declaration (DTD), because HTML 4.01 was based on Standard Generalized Markup Language (SGML). The DTD specifies the rules for the markup language, so that the browsers render the content correctly.
To set the text color of the H1 elements to red, you can write the following CSS rules:
A style (or rule) is made of two main parts: a selector, which tells web browsers what to format, and a declaration block, which lists the formatting instructions that the browsers use to style the selector.
p { color: red; font-size: 1.5em; }
h1 { color: red } selector property name property value
A CSS rule consists of two main parts: selector (h1) and declaration (color: red). In HTML, element names are case-insensitive so h1 works just as well as H1. The declaration has two parts: property name (color) and property value (red).
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <HTML> <HEAD> <TITLE>Sample HTML</TITLE> <STYLE type="text/css"> h1 { color: red } </STYLE> </HEAD> <BODY> <H1>Sample HTML</H1> <P>Morong High School. </BODY> </HTML>
Internal Style Sheets An internal style sheet is a collection of styles thats part of the web pages code. It always appears between opening and closing HTML <style> tags in the pages <head> portion. Heres an example:
<style type="text/css"> h1 { color: #FF7643; font-family: Arial; } p { color: red; font-size: 1.5em; } </style> </head> <body> 
2|Page
External Style Sheets An external style sheet is nothing more than a text file containing all your CSS rules. It never contains any HTML codeso dont include the <style> tag. Linking a Style Sheet Using HTML The most common method of adding an external style sheet to a web page is to use the HTML <link> tag. You write the tag slightly differently depending on whether youre using HTML or XHTML. For example, heres HTML:
<link rel="stylesheet" type="text/css" href="css/global.css">
Three attributes: rel="stylesheet" indicates the type of linkin this case, a link to a style sheet. type="text/css" lets the browser know what kind of data to expect a text file, containing CSS. href points to the location of the external CSS file on the site. The value of this property is a URL and will vary depending on where you keep your CSS file. It works the same as the src (source) attribute you use when adding an image to a page or the href attribute of a link pointing to another page.
The HTML Family Tree The HTML that forms any web page is akin to a family tree, where the HTML tags represent various family members. The first HTML tag you use on a pagethe <html> tagis like the grand pappy of all other tags. The <html> tag surrounds the <head> tag and the <body> tag, which makes <html> the ancestor of both. Similarly, a tag inside of another tag is a descendent. The <title> tag in the following example is the <head> tags descendent:
<html> <head> <title>A Simple Document</title> </head> <body> <h1>Header</h1> <p>A paragraph of <strong>important</strong>text.</p> </body> </html>
HTML consists of nested tags - tags within tags within even more tags. The relationship between these tags how theyre nested within each otherforms a kind of family tree.
3|Page
This simple tree diagram (right) represents the structure of the web page pictured to the left. Every tag on a web page is a descendent of the <html> tag, since <html> wraps around them all. A tag can descend from multiple tags. For example, the first <a> tag listed in this diagram is a descendent of the <strong>, <p>, <body>, and <html> tags.
For maximum flexibility, we changed without modifying the source HTML document, and they may be shared among several documents. To link to an external style sheet, you can use the LINK element:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <HTML> <HEAD> <TITLE>Sample HTML</TITLE> <LINK rel="stylesheet" href="sample.css" type="text/css"> </HEAD> <BODY> <H1>Sample HTML</H1> <P>Morong High School. </BODY> </HTML>
The LINK element specifies: the type of link: to a "stylesheet". the location of the style sheet via the "href" attribute. the type of style sheet being linked: "text/css". To show the close relationship between a style sheet and the structured markup, we continue to use the STYLE element in this tutorial.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <HTML> <HEAD> <TITLE>Sample HTML</TITLE> <STYLE type="text/css"> body { color: black; background: white } h1 { color: red; background: white } </STYLE> </HEAD> <BODY> <H1>Sample HTML</H1> <P>Morong High School. </BODY> </HTML>
The style sheet now contains four rules: The first two set the color and background of the BODY element (its a good idea to set the text color and background color together), while the last two set the color and the background of the H1 element. Since no color has been specified for the P element, it will inherit the color from its parent element, namely BODY. The H1 element is also a child element of BODY but the second rule overrides the inherited value.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <HTML> <HEAD> <TITLE>Sample HTML</TITLE> <STYLE type="text/css"> body { font-family: "Gill Sans", sans-serif; font-size: 12pt; margin: 3em; } </STYLE> </HEAD> <BODY>
4|Page
Rule sets, Declaration Blocks, and Selectors A rule set consists of a selector followed by a declaration block. A declaration block starts with a left curly brace ({) and ends with the matching right curly brace (}). In between there must be a list of zero or more semicolonseparated (;) declarations. The selector consists of everything up to the first left curly brace ({).
h1, h2 {color: green } h3, h4 & h5 {color: red } h6 {color: black }
Declarations and Properties A declaration is either empty or consists of a property name, followed by a colon (:), followed by a property value. Around each of these there may be white space. Because of the way selectors work, multiple declarations for the same selector may be organized into semicolon (;) separated groups. Example(s): Thus, the following rules:
h1 h1 h1 h1 h1 h1 { { { { { { font-weight: bold } font-size: 12px } line-height: 14px } font-family: Helvetica } font-variant: normal } font-style: normal }
are equivalent to:

h1 { font-weight: bold; font-size: 12px; line-height: 14px; font-family: Helvetica; font-variant: normal; font-style: normal }
A property name is an identifier. Any token may occur in the property value. Parentheses ("( )"), brackets ("[ ]"), braces ("{ }"), single quotes (), and double quotes (") must come in matching pairs, and semicolons not in strings must be escaped. Parentheses, brackets, and braces may be nested. Inside the quotes, characters are parsed as a string. Comments Comments begin with the characters "/*" and end with the characters "*/". They may occur anywhere outside other tokens, and their contents have no influence on the rendering. Comments may not be nested.
img { float: left } /* correct CSS 2.1 */
Values Integers and real numbers Some value types may have integer values (denoted by <integer>) or real number values (denoted by <number>). Real numbers and integers are specified in decimal notation only. An <integer> consists of one or more digits "0" to "9". A <number> can either be an <integer>, or it can be zero or more digits followed by a dot (.) followed by one or more digits. Both integers and real numbers may be preceded by a "-" or "+" to indicate the sign. -0 is equivalent to 0 and is not a negative number. Lengths Lengths refer to distance measurements. Measurement Values
% in cm mm em percentage inch centimeter millimeter 1em is equal to the current font size. 2em means 2 times the size of the current font. e.g., if an element is displayed with a font of 12 pt, then '2em' is 24 pt. the 'em' is a very useful unit in css, since it can adapt automatically to the font that the reader uses one ex is the x-height of a font (x-height is usually about half the font-size) point (1 pt is the same as 1/72 inch)
ex pt
5|Page
pc px pica (1 pc is the same as 12 points) pixels (a dot on the computer screen) h1 { margin: 0.5in } h2 { line-height: 3cm } h3 { word-spacing: 4mm } h4 { font-size: 12pt } h4 { font-size: 1pc } p { font-size: 12px } p { line-height: 120% } /* /* /* /* /* /* /* inches */ centimeters */ millimeters */ points */ picas */ px */ 120% of font-size */
URLs and URIs URI values (Uniform Resource Identifiers, see [RFC3986], which includes URLs, URNs, etc) in this specification are denoted by <uri>. The functional notation used to designate URIs in property values is "url()", as in: Example:
body { background: url("http://www.example.com/pinkish.png") }
Colors A <color> is either a keyword or a numerical RGB specification. The list of color keywords is: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, orange, purple, red, silver, teal, white, and yellow. These 17 colors have the following values:
maroon #800000 yellow #ffff00 fuchsia #ff00ff green #008000 aqua #00ffff silver #c0c0c0 red #ff0000 olive #808000 white #ffffff navy #000080 teal #008080 gray #808080 orange #ffa500 purple #800080 lime #00ff00 blue #0000ff black #000000
body {color: black; background: white } h1 { color: maroon } h2 { color: olive }
The RGB color model is used in numerical color specifications. These examples all specify the same color:
em em em em { { { { color: color: color: color: rgb(255,0,0) } /* integer range 0 - 255 */ rgb(300,0,0) } /* clipped to rgb(255,0,0) */ rgb(255,-10,0) } /* clipped to rgb(255,0,0) */ rgb(110%, 0%, 0%) } /* clipped to rgb(100%,0%,0%) */
Strings Strings can either be written with double quotes or with single quotes.
"this "this this this is is is is a a a a string" \"string\"" "string" \string\
Grouping When several selectors share the same declarations, they may be grouped into a comma-separated list. Example: In this example, we condense three rules with identical declarations into one.
h1 { font-family: sans-serif } h2 { font-family: sans-serif } h3 { font-family: sans-serif }
is equivalent to:
h1, h2, h3 { font-family: sans-serif }
Class selectors Working with HTML, use the period (.) notation as an alternative to the ~= notation when representing the class attribute.
H1.pastoral { color: green } /* H1 elements with class~=pastoral */
Given these rules, the first H1 instance below would not have green text, while the second would:
<H1>Not green</H1> <H1 class="pastoral">Very green</H1>
ID selectors
6|Page
The ID attribute of a document language allows authors to assign an identifier to one element instance in the document tree. CSS ID selectors match an element instance based on its identifier. A CSS ID selector contains a "#" immediately followed by the ID value, which must be an identifier. Example(s): The following ID selector matches the H1 element whose ID attribute has the value "chapter1":
h1#chapter1 { text-align: center }
In the following example, the style rule matches the element that has the ID value "z98y". The rule will thus match for the P element:
<HEAD> <TITLE>Match P</TITLE> <STYLE type="text/css"> *#z98y { letter-spacing: 0.3em } </STYLE> </HEAD> <BODY> <P id=z98y>Wide text</P> </BODY>
The dynamic pseudo-classes: :hover, :active, and :focus Interactive user agents sometimes change the rendering in response to user actions. CSS provides three pseudo-classes for common cases: The :hover pseudo-class applies while the user designates an element (with some pointing device), but does not activate it. The :active pseudo-class applies while an element is being activated by the user. For example, between the times the user presses the mouse button and releases it. The :focus pseudo-class applies while an element has the focus (accepts keyboard events or other forms of text input).
Example:
a:link { color: red } /* unvisited links */ a:visited { color: blue } /* visited links */ a:hover { color: yellow } /* user hovers */ a:active { color: lime } /* active links */
Box dimensions Each box has a content area (e.g., text, an image, etc.) and optional surrounding padding, border, and margin areas; the size of each area is specified by properties defined below. The following diagram shows how these areas relate and the terminology used to refer to pieces of margin, border, and padding: Box Model
7|Page
The margin, border, and padding can be broken down into top, right, bottom, and left segments (e.g., in the diagram, "LM" for left margin, "RP" for right padding, "TB" for top border, etc.). The perimeter of each of the four areas (content, padding, border, and margin) is called an "edge", so each box has four edges: content edge or inner edge The content edge surrounds the rectangle given by the width and height of the box, which often depend on the elements rendered content. The four content edges define the boxs content box. padding edge The padding edge surrounds the box padding. If the padding has 0 width, the padding edge is the same as the content edge. The four padding edges define the boxs padding box. border edge The border edge surrounds the boxs border. If the border has 0 width, the border edge is the same as the padding edge. The four border edges define the boxs border box. margin edge or outer edge The margin edge surrounds the box margin. If the margin has 0 width, the margin edge is the same as the border edge. The four margin edges define the boxs margin box. Example of margins, padding, and borders
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <HTML> <HEAD> <TITLE>Examples of margins, padding, and borders</TITLE> <STYLE type="text/css"> UL { background: yellow; margin: 12px 12px 12px 12px; padding: 3px 3px 3px 3px; /* No borders set */ } LI { color: white; /* text color is white */ background: blue; /* Content, padding will be blue */ margin: 12px 12px 12px 12px; padding: 12px 0px 12px 12px; /* Note 0px padding right */ list-style: none /* no glyphs before a list item */ /* No borders set */ } LI.withborder { border-style: dashed; border-width: medium; /* sets border width on all sides */
8|Page
Margin properties: margin-top, margin-right, margin-bottom, margin-left, and margin Margin properties specify the width of the margin area of a box. The margin shorthand property sets the margin for all four sides while the other margin properties only set their respective side. The margin property is a shorthand property for setting margin-top, margin-right, margin-bottom, and margin-left at the same place in the style sheet. If there are four values, they apply to the top, right, bottom, and left, respectively. Example:
body { margin: 2em } /* all margins set to 2em */ body { margin: 1em 2em } /* top & bottom = 1em, right & left = 2em */ body { margin: 1em 2em 3em } /* top=1em, right=2em, bottom=3em, left=2em */
The last rule of the example above is equivalent to the example below:
body { margin-top: 1em; margin-right: 2em; margin-bottom: 3em; margin-left: 2em; /* copied from opposite side (right) */
Padding properties: padding-top, padding-right, padding-bottom, padding-left, and padding The padding properties specify the width of the padding area of a box. The padding shorthand property sets the padding for all four sides while the other padding properties only set their respective side. The properties defined in this section refer to the <padding-width> value type. The padding property is a shorthand property for setting padding -top, padding-right, padding-bottom, and padding-left at the same place in the style sheet. Example(s):
h1 { background: white; padding: 1em 2em; }
Border properties The border properties specify the width, color, and style of the border area of a box. These properties apply to all elements. Border width: border-top-width, border-right-width, border-bottom-width, border-left-width, and border-width The border width properties specify the width of the border area. The properties defined in this section refer to the <border-width> value type, which may take one of the following values: thin A thin border. medium A medium border. thick A thick border. <length> The borders thickness has an explicit value. Explicit border widths cannot be negative. This property is a shorthand property for setting border-top-width, border-right-width, border-bottom-width, and border-left-width at the same place in the style sheet.
9|Page
If there is only one component value, it applies to all sides. If there are two values, the top and bottom borders are set to the first value and the right and left are set to the second. If there are three values, the top is set to the first value, the left and right are set to the second, and the bottom is set to the third. If there are four values, they apply to the top, right, bottom, and left, respectively. Example(s): In the examples below, the comments indicate the resulting widths of the top, right, bottom, and left borders:
h1 { border-width: thin } h1 { border-width: thin thick } h1 { border-width: thin thick medium } /* thin thin thin thin */ /* thin thick thin thick */ /* thin thick medium thick */
Border color: border-top-color, border-right-color, border-bottom-color, border-left-color, and border-color The border color properties specify the color of a boxs border. border-top-color, border-right-color, border-bottom-color, border-left-color The border-color property sets the color of the four borders. Values have the following meanings: <color> Specifies a color value. transparent The border is transparent (though it may have width). Example(s): In this example, the border will be a solid black line.
p { color: black; background: white; border: solid; }
Border style: border-top-style, border-right-style, border-bottom-style, border-left-style, and border-style The border style properties specify the line style of a boxs border (solid, double, dashed, etc.). The properties defined in this section refer to the <border-style> value type, which may take one of the following values: none No border; the computed border width is zero. hidden Same as none, except in terms of border conflict resolution for table elements. dotted The border is a series of dots. dashed The border is a series of short line segments. solid The border is a single line segment. double The border is two solid lines. The sum of the two lines and the space between them equals the value of border-width. groove The border looks as though it were carved into the canvas. ridge The opposite of groove: the border looks as though it were coming out of the canvas. inset The border makes the box look as though it were embedded in the canvas. outset The opposite of inset: the border makes the box look as though it were coming out of the canvas. Border shorthand properties: border-top, border-right, border-bottom, border-left, and border This is a shorthand property for setting the width, style, and color of the top, right, bottom, and left border of a box. Example(s):
h1 { border-bottom: thick solid red }
The border property is a shorthand property for setting the same width, color, and style for all four borders of a box. Unlike the shorthand margin and padding properties, the border property cannot set different values on the four borders. To do so, one or more of the other border properties must be used. Example(s): For example, the first rule below is equivalent to the set of four rules shown after it:
10 | P a g e
p { border: solid red } p { border-top: solid red; border-right: solid red; border-bottom: solid red; border-left: solid red }

Cascading Style Sheet For HTML

Caricato da

Informazioni sul documento

Titolo originale

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

Cascading Style Sheet For HTML

Caricato da

Copyright:

Formati disponibili

1|Page

p { color: red; font-size: 1.5em; }

h1 { color: red } selector property name property value

are equivalent to:

body {color: black; background: white } h1 { color: maroon } h2 { color: olive }

Potrebbero piacerti anche