SOALAN 1 - LEARNING PORTFOLIO



CASCADING STYLE SHEETS

STYLE INCLUSION METHODS

This section defines the basic methods to associate CSS-based style information with HTML or XHTML documents.

EMBEDDED STYLES

Document-wide styles can be embedded in a document's head element using the tag.

Note that styles should be commented out to avoid interpretation by nonstyle-aware browsers. However, be aware that comment masking is frowned upon in XHTML and linked styles should be used or a CDATA section employed.

Example

You can apply styles directly to elements in a document using the core attribute style. As the closest style inclusion method to a tag, inline styles will take precedence over document wide or linked styles.

Example

CSS1 Test

LINKED STYLES

Styles can be contained in an external style sheet linked to a document or a set of documents (see Chapter 10), as shown in the following example. Linked information should be placed inside the tag.

Example

The rel attribute is generally set to the value stylesheet but may also have a value of alternate stylesheet with an associated title value to provide different looks for the same page.

Examples

Chapter 11 has examples and more information on using alternative style sheets.

The media attribute may also be used to define the media to which a style sheet is applied. The keyword values screen or print are commonly used. The default value of all is applied when media is not specified.

Examples

CSS2 does define a rich set of media values as shown in Table B-1, but practice shows few are supported.

CSS MEASUREMENTS

CSS supports a number of measurements including absolute units such as inches, centimeters, points, and so on, as well as relative measures such as percentages and em units. Table B-2 summarizes these units of measure.

|Unit |Description |Example |

|[pic] |[pic] |[pic] |

|% |Defines a measurement as a percentage relative to another |p {font-size: 14pt; |

| |value, typically an enclosing element. |line-height: 150%;} |

|cm |Defines a measurement in centimeters. |div {margin-bottom: |

| | |1cm;} |

|em |A relative measurement for the height of a font in em |p {letter-spacing: |

| |spaces. Because an em unit is equivalent to the size of a |5em;} |

| |given font, if you assign a font to 12pt, each "em" unit | |

| |would be 12pt; thus, 2em would be 24pt. | |

|ex |This value defines a measurement relative to a font's |p {font-size: 14pt; |

| |x-height. The x-height is determined by the height of the |line-height: 2ex;} |

| |font's lowercase letter x. | |

|in |Defines a measurement in inches. |p {word-spacing: |

| | |.25in;} |

|mm |Defines a measurement in millimeters. |p {word-spacing: |

| | |12mm;} |

|pc |Defines a measurement in picas. A pica is equivalent to 12|p {font-size: 10pc;} |

| |points; thus, there are 6 picas per inch. | |

|pt |Defines a measurement in points. A point is defined as |body {font-size: |

| |1/72nd of an inch. |14pt;} |

|px |Defines a measurement in screen pixels. |p {padding: 15px;} |

| |

CSS SELECTORS

CSS1 and 2 support a rich set of selectors for specifying which particular element(s) that a CSS rule applies to. CSS1 selectors are presented in Table B-4. CSS2 introduces a number of new selectors as summarized in Table B-5. Many of these selectors use document context to determine how styles should be applied to elements, potentially reducing reliance on HTML/XHTML selectors such as class and id. For more information, see Chapter 11.

|Selector |Description |Example |

|[pic] |[pic] |[pic] |

|element |Selects all elements of the name specified in the |h1 {color: red;} |

| |rule. |/* makes all h1 tags red */ |

|#id |Selects any tag with an id attribute set. |#test {color: green;} |

| | |/* makes a tag with id='test' green */ |

|.class |Selects any tag with the specified class value. |.note {color: yellow;} |

| | |/* makes all tags with class='note' yellow */ |

|element.class |Selects the specified elements with a particular |h1.note {text-decoration: underline;} |

| |class value. |/* underlines all H1 tags with class='note' */ |

|Grouping |Applies the same rules to a group of tags. |h1,h2,h3 {background - color: orange;} |

| | |/* sets the background color of all h1,h2,and h3 elements to orange */ |

|Contextual |Selects descendent tags. |p strong {color: purple;} |

| | |/* sets all strong tags that are descendents of p tags purple */ |

|:first-line |Selects the first line of an element. |p:first-line {color: red;} |

| | |/* makes the first lines of a paragraph red */ |

|:first-letter |Selects the first letter of an element. |p:first-letter {font-size: larger;} |

| | |/* makes the first letter of a paragraph larger */ |

|a:link |Specifies the unvisited link. |a:link {font-weight: bold;} |

| | |/* makes unvisited links bold */ |

|a:active |Specifies the link as it is being pressed. |a:active {color: red;} |

| | |/* makes links red as they are pressed */ |

|a:visited |Specifies the link after being pressed. |a:visited {text-decoration: line-through;} |

| | |/* puts a line through visited links */ |

|* |The wildcard selector is used to apply a match to |* {background - color: red;} |

| |any element. It can be used for a global rule or, |div * span {background - color: yellow;} |

| |more commonly, in contextual or child selection | |

| |rules. | |

|> |This selector defines a rule that matches only |body > p {background - color: yellow;} |

| |elements that are directly enclosed within another | |

| |element, such as a tag with a document body. | |

|+ |The adjacent sibling selector defines a rule that |h1 + p {color: red;} |

| |applies a style to the first incidence of an element| |

| |immediately after the first element. In other words,| |

| |the two tags are adjacent siblings in their parse | |

| |tree. | |

|[ ] |The attribute selector has many uses. Unfortunately,|a [href] |

| |many browsers do not support it. The basic inclusion|{ background - color: yellow;} |

| |of an attribute name in brackets matches when the | |

| |attribute is used on the selected element. A |a [ href = "http:// " ] |

| |specific attribute value can be matched with = and |{font-weight: bold;} |

| |pieces of an attribute can also be matched. The |p [title~= "Test match" ] |

| |symbol ~= can be used to match space-separated |{ font-style: italic; } |

| |attribute values while |= is used to match |p [lang|= "en" ] |

| |dash-separated attribute values. It is also possible|{ color: red; } |

| |to match multiple attribute values at once. |/* English text in red */ |

| | |p [title= "Test Selector" ] |

| | |[ lang|= "en" ] |

| | |{border-style: dashed; border-width: 1px; } |

|@media |Defines style rules for multiple media types in a |@media screen {body {font-family: sans-serif; font-size: 18 pt;}} |

| |single style sheet. See "Media-Dependent Style | |

| |Sheets" in Chapter 11. | |

|@page |Used to define rules for page sizing and orientation|@page {size: 8.5in 11in;} |

| |rules for printing. | |

|:left |Sets page layout rules for a left-hand page when |@page :left {margin-left: 4cm; margin-right: 3cm;} |

| |printing. | |

|:right |Sets page layout rules for a right-hand page when |@page :right {margin-left: 3cm; margin-right: 4cm;} |

| |printing. | |

|:first |Sets page layout rules for the first page in a |/* Top margin on first page 10cm */ |

| |document when printing. |@page :first {margin-top: 10cm;} |

|:first-child |Applies a style to the first child element of an |p:first-child {color: red;} |

| |element. | |

|:focus |Changes the display of an element when the element |input:focus{background - color: yellow;} |

| |receives focus (generally, ). | |

|:hover |Changes the display of an element when a cursor |a:hover {text-decoration: underline;} |

| |passes over the element. Commonly supported for |p:hover {background - color: yellow;} |

| |links, but defined for nearly every element. | |

|:lang |Applies style to an element according to what |*:lang(fr) {color: blue;} |

| |language the element is in. |*:lang(en) {color: red;} |

|:before |Defines content to be placed before an element. See |div: before {content: url ( section.gif ) ;} |

| |the content property for more information on use. | |

|:after |Defines content to be placed after an element. See |div:after {content: url(sectionend.gif);} |

| |the content property for more information on use. | |

| |

CSS Properties

|Font and Type Settings Properties |

|Defines basic font and type settings for a CSS style. |

|Property |Descriptions |Example Values |

|font-family |Sets the font type (or series of families) for the style. Browsers display |verdana, tahoma, arial |

| |text in the first font in the series that is installed on the user’s system. | |

|font-size |Defines the size of the text. You can choose a specific size by selecting the |20px, 20pt, 1.5em, 150%, 2in, 3cm, |

| |number and the unit of measurement, or you can choose a relative size. Pixels |3mm, small, medium, large, smaller, |

| |as a unit work well to prevent browsers from distorting your text. |larger, xx-small, x-small, |

| | |xx-large, x-large |

|font-style |Specifies the font style. The default setting is Normal. |normal, italic, oblique |

|line-height |Sets the height of the line on which the text is placed. This setting is |normal, 20px, 20 pt, 2em, 200%, 3cm,|

| |traditionally called leading. Select Normal to have the line height for the |3mm |

| |font size calculated automatically, or enter an exact value and select a unit | |

| |of measurement. | |

|text-decoration |Adds an underline, overline, or line-through to the text, or makes the text |none, underline, overline, |

| |blink. The default setting for regular text is None. The default setting for |line-through, blink |

| |links is Underline. When you set the link setting to none, you can remove the | |

| |underline from links by defining a special class. | |

|font-weight |Applies a specific or relative amount of boldface to the font. Normal is |normal, bold, bolder, lighter, 100, |

| |equivalent to 400; Bold is equivalent to 700. |400,1000 |

|font-variant |Sets the small caps variant on text. |normal, small-caps |

|text-transform |Capitalizes the first letter of each word in the selection or sets the text to|capitalize, uppercase, lowercase, |

| |all uppercase or lowercase. |none |

|color |Sets the text color. |red, #FF0000, rgb(255,0,0) |

Notes:

The CSS Properties section is adapted from Macromedia Dreamweaver MX Help.

|Background Properties |

|Defines background settings for a CSS style. You can apply background properties to any element in a web page. For example, create a style |

|which adds a background color or background image to any page element, for example behind text, a table, the page, and so on. You can also set |

|the positioning of a background image. |

|Property |Descriptions |Example Values |

|background-color |Sets the background color for the element. |red, #FF0000, rgb(255,0,0) |

|background-image |Sets the background image for the element. |url(logo.gif), |

| | |url (images/logo.gif) |

|background-repeat |Determines whether and how the background image is repeated. Use the |no-repeat |

| |Repeat property to redefine the body tag and set a background image |Displays the image once at the |

| |that does not tile or repeat |beginning of the element. |

| | | |

| | |repeat |

| | |Tiles the image horizontally and |

| | |vertically behind the element. |

| | | |

| | |repeat-x, repeat-y |

| | |Display a horizontal and vertical |

| | |band of images, respectively. Images |

| | |are clipped to fit within the |

| | |boundaries of the element. |

|background-attachment |Determines whether the background image is fixed at its original |fixed, scroll |

| |position or scrolls along with the content. Note that some browsers may| |

| |treat the Fixed option as Scroll. | |

|background- position |Specify the initial position of the background image in relation to the|left, center, right, |

| |element. This can be used to align a background image to the center of |top, center, bottom, |

| |the page, both vertically and horizontally. If the attachment property |20px, 2em, 10pt, 2mm, 2in |

| |is Fixed, the position is relative to the Document window, not to the | |

| |element. | |

|Block Properties |

|Define spacing and alignment settings for tags and attributes. |

|Property |Descriptions |Example Values |

|word-spacing |Sets the spacing between words. You can specify negative values, but the |normal, 2em 10px, 5pt |

| |display depends on the browser. | |

|Letter-spacing |Increases or decreases space between letters or characters. To decrease the |normal, 2em 10px, 5pt |

| |space between characters specify a negative value, for example (-4). Letter | |

| |spacing settings override justified text settings. | |

|vertical-align |Specifies the vertical alignment of the element to which it is applied. |baseline, top, text-top, middle, sub,|

| | |super, bottom, text-bottom, 150% |

|text-align |Sets how text is aligned within the element. |left, right, center, justify |

|text-indent |Specifies how far the first line of text indents. |2em, 150%, 20px, 2in, 2mm |

| |A negative value may be used to create an outdent, but the display depends on | |

| |the browser. | |

|white-space |Determines how white space within the element is handled. Choose from three |normal, pre, nowrap |

| |options: Normal collapses white space; Pre handles it as if the text were | |

| |enclosed in pre tags (that is, all white space, including spaces, tabs, and | |

| |returns, is respected); Nowrap specifies that the text only wraps when a br tag| |

| |is encountered. | |

|Display |Specifies whether an element is displayed and if so how it is displayed. None |none, inline, block, list-item, |

| |turns off the display of an element to which it is assigned. |run-in, compact, marker, table, |

| | |inline-table, table-row-group, |

| | |table-header-group |

|Box Properties |

|Define settings for tags and attributes that control the placement of elements on the page. |

|Property |Descriptions |Values |

|width, height |Sets the width and height of the element. |auto, 20px, 2em, 200% |

|float |Sets which side other elements, such as text, layers, tables and so on, will |left, right, none |

| |float around an element. Other elements wrap around the floating element as | |

| |usual. | |

|Clear |Defines the sides that do not allow layers. If a layer appears on the clear |left, right, both, none |

| |side, the element with the clear setting moves below it. | |

|padding |Specifies the amount of space between the content of an element and its border|5px, 2em, 10%, 2in, 2mm |

|padding-top |(or margin if there is no border). Deselect the Same For All option to set the| |

|padding-bottom |padding for individual sides of the element. | |

|padding-left | | |

|padding-right | | |

|margin |Specifies the amount of space between the border of an element (or the padding|auto, 5px, 2em, 10%, 2in, 2mm |

|margin-top |if there is no border) and another element. Deselect Same For All to set the | |

|margin-bottom margin-left |margin for individual sides of the element. | |

|margin-right | | |

|Border Properties |

|Define settings, such as width, color, and style, for the borders around elements. |

|Property |Descriptions |Values |

|border |Sets the style appearance, thickness and color of the border. To set the same |Style: |

|border-top |settings for all borders, only set the border property. |none, solid, dashed, dotted, double, |

|border-bottom | |groove, ridge, inset, outset. |

|border-left |Format: | |

|border-right |border_property: style thickness color; |Thickness: |

| | |thin, medium, thick, 5px, 2em, 10% |

| | | |

| | |Color: |

| | |red, #FF0000, rgb(255,0,0) |

|List Properties |

|Define list settings, such as bullet size and type, for list tags. |

|Property |Descriptions |Values |

|list-style-type |Sets the appearance of bullets or numbers. |disc, square, circle, decimal, |

| | |lower-roman, upper-roman, |

| | |lower-alpha, upper-alpha, none |

|list-style-image |Specifies a custom image for bullets. |none, images/logo.gif) |

|list-style-position |Sets whether list item text wraps and indents (outside) or whether the |inside, outside |

| |text wraps to the left margin (inside). | |

|Positioning Properties |

|Change the tag or block of selected text into a new layer using the default tag for defining layers as set in the Layer preferences. |

|Property |Descriptions |Example Values |

|position |Determines how the browser should position the layer. |absolute |

| | |Places the layer using the |

| | |coordinates entered in the Placement |

| | |boxes relative to the top left corner|

| | |of the page. |

| | | |

| | |relative |

| | |Places the layer using the |

| | |coordinates entered in the Placement |

| | |boxes relative to object’s position |

| | |in the text flow of the document. |

| | |This option is not displayed in the |

| | |Document window. |

| | | |

| | |static |

| | |Places the layer at its location in |

| | |the text flow. |

|visibility |Determines the initial display condition of the layer. If you do not specify a |inherit |

| |visibility property, by default most browsers inherit the parent’s value. |Inherits the visibility property of |

| | |the layer’s parent. If the layer has |

| | |no parent, it will be visible. |

| | | |

| | |visible |

| | |Displays the layer contents, |

| | |regardless of the parent’s value. |

| | | |

| | |hidden |

| | |Hides the layer contents, regardless |

| | |of the parent’s value. |

|z-index |Determines the stacking order of the layer. Higher numbered layers appear above |auto, 1, 2, 3 |

| |lower-numbered layers. Values can be positive or negative. (It’s easier to change the | |

| |stacking order of layers using the Layers panel | |

|overflow |Determines what happens if the contents of a layer exceed its size. These properties |visible |

| |control how this expansion is handled. |Increases the layer’s size so that |

| | |all of its contents are visible. The |

| | |layer expands down and to the right. |

| | | |

| | |hidden |

| | |Maintains the layer’s size and clips |

| | |any content that doesn’t fit. No |

| | |scroll bars are provided. |

| | | |

| | |scroll |

| | |Adds scroll bars to the layer |

| | |regardless of whether the contents |

| | |exceed the layer’s size. Specifically|

| | |providing scroll bars avoids |

| | |confusion caused by the appearance |

| | |and disappearance of scroll bars in a|

| | |dynamic environment. This option is |

| | |not displayed in the Document window |

| | |and works only in browsers that |

| | |support scroll bars. |

| | | |

| | |auto |

| | |Makes scroll bars appear only when |

| | |the layer’s contents exceed its |

| | |boundaries. This option is not |

| | |displayed in the Document window. |

|left |Specifies the location and size of the layer. How the browser interprets the location |auto, 5px, 5pt, 3em,10% |

|right |depends on the setting for Type. Size values are overridden if the content of the layer| |

|top |exceeds the specified size. | |

|bottom |The default units for location and size are pixels. For CSS layers, you can also | |

| |specify the following units: pc (picas), pt (points), in (inches), mm (millimeters), cm| |

| |(centimeters), (ems), (exs), or % (percentage of the parent’s value). The abbreviations| |

| |must follow the value without a space: for example, 3mm. | |

|clip |Defines the part of the layer that is visible. If you specify a clipping region, you |rect (5px 5px 5px 5px) |

| |can access it with a scripting language such as JavaScript and manipulate the | |

| |properties to create special effects such as wipes. These wipes can be set up by using | |

| |timelines and the Change Property behavior. | |

| | | |

| |Format: | |

| |clip: rect(top_value right_ value bottom_value left_value); | |

|Extensions Properties |

|The Extensions style attributes include filters, page break, and cursor options, most of which aren’t supported in any browser or are supported|

|only in Internet Explorer 4.0 and above. |

|Property |Descriptions |Example Values |

|page-break-before |Forces a page break during printing either before or after the object |auto, always, left, right |

|page-break-after |controlled by the style. Choose the option you want to set in the pop-up | |

| |menu. This option is not supported by any 4.0 browser, but support may be | |

| |provided by future browsers. | |

|cursor |Changes the pointer image when the pointer is over the object controlled |hand, crosshair, text, wait, default,|

| |by the style |help, e-resize, ne-resize, |

| | |nw-resize, w-resize, sw-resize, |

| | |s-resize, se-resize, auto |

|filter |Applies special effects to the object controlled by the style, including |FlipH, FlipV, Gray, Invert, Light, |

| |blur and inversion. |Xray |

-----------------------

__________________________________________________

December 2004, Page 5 of 10, jumail

................
................

In order to avoid copyright disputes, this page is only a partial summary.

Google Online Preview   Download