Scribd Logo
Upload

Welcome to Scribd!

  • Cascading Style Sheets: For E.G. Assume Is by Default Specified As A 18pt Text. Style Sheets Can Be Written

    Uploaded by

    Sushmit Harsh
    28 views10 pages
    XHTML tags have associated properties, which store presentation details for browsers. Style sheets can be used to apply new styles or override the defaults associated with certain tags. Lower level style sheets can override higher level style sheets, so that the style of the content within a tag is determined in effect through a cascade of style sheets.

    Original Description:

    Original Title

    5. Css

    Copyright

    © Attribution Non-Commercial (BY-NC)

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    XHTML tags have associated properties, which store presentation details for browsers. Style sheets can be used to apply new styles or override the defaults associated with certain tags. Lower level style sheets can override higher level style sheets, so that the style of the content within a tag is determined in effect through a cascade of style sheets.

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    28 views10 pages

    Cascading Style Sheets: For E.G. Assume Is by Default Specified As A 18pt Text. Style Sheets Can Be Written

    Uploaded by

    Sushmit Harsh
    XHTML tags have associated properties, which store presentation details for browsers. Style sheets can be used to apply new styles or override the defaults associated with certain tags. Lower level style sheets can override higher level style sheets, so that the style of the content within a tag is determined in effect through a cascade of style sheets.

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 10

    Controlling Display for XHTML documents - Cascading Style Sheets Introduction Most XHTML tags have associated properties,

    , which store presentation details for browsers. (if not browser applies default properties.) Style sheets can be used to apply new styles or override the defaults associated with certain tags. For e.g. Assume <h2> is by default specified as a 18pt text. Style sheets can be written to specify a separate font-size to display <h2> tags in 20pt. Cascading Style Sheets (CSS) Called cascading because they can be specified in three different levels to define the style of a XHTML document. Lower level style sheets can override higher level style sheets, so that the style of the content within a tag is determined in effect through a cascade of style sheets. Levels: External Level (lowest priority) Document Level or Internal Level Inline Level (highest priority) Inline Level Style applies to the content of a single element. (specified within opening tag.) Has precedence over document level, which in turn has precedence over external level. E.g. <font color=blue><p>Hello</p> <p style="color:blue;">Hello</p> Document Level Applies to the whole body of the document. Declared in the <head> section, using a <style> element. <style type=text/css> .. .. </style> Each style rule has two parts Selector indicates the elements where the rule should be applied.

    Style-properties list of property/value pairs. selector {property_1:value_1; property_2:value_2;value_n;} If a property is given more than one value, those values are separated by commas. External Level Are stored separately & referenced in all docs that use them. Are written as separate text files with MIME type text/css. The browser fetches the external CSS document just as it does other web pages. CSS file is not a XHTML document, but contains just the style rules. To reference a css file in your document: <link> tag is placed in the <head> section of each document that uses the external stylesheet. <link rel=stylesheet type=text/css href =mystyle.css /> Forms of Selectors 1. Simple Selector Applicable to a single element. Property values in the rule apply to all occurrences of named element. e.g. h1 { font-size:24pt; } h2, h3 { font-family: verdana, serif; } Selectors can also specify element positions for the styles to apply. e.g. body b em { font-size:14pt; } - specifies element hierarchy such that this style rule only applies to <em> elements occurring within <p> tags in document body. - are called contextual or descendant selectors 2. Class Selector allows different occurrences of same tag to use different styles. tagname.classname {prop-value list;} syntax: e.g. p.normal {font-size:12;} p.warning {font-size:14;color:red;} In the XHTML document, use <p class=normal>. </p>

    3. Generic Selector used to define a class that can be applicable to more than one kind of element. syntax: .classname{prop-value list} e.g. .warning{color:red;} 4. id Selector Allows style to be applied to one specific element based on its id. #specific_id{prop-value list;} syntax: e.g. #section10 {font-size:20pt;} In the XHTML document, use <h2 id=section10>Chapter 10</h2> 5. Universal Selector Applies its style to all elements in the document. Denoted by a * syntax: *{prop-value list} e.g. * {color:black;} Pseudo Classes Styles that apply when some event occurs rather than because some element simply exists in the document. Two types: Hover: applies when its associated element has mouse cursor over it. Focus: applies when user places mouse cursor over its associated element and clicks. syntax: tagname:pseudoclass-name{prop-value list;} e.g. a:hover { color:red; font-size:12pt;} Style Properties - Specifying Property Values Keywords - left, small, Length - numbers, maybe used with decimal points Units: px pixels in inches cm centimeters

    6.

    mm millimeters pt points pc - picas (12 points) * No space is allowed between the number and the unit specification, e.g. 1.5 in is illegal! Percentage - just a number followed immediately by a percent sign Colors Color name, e.g. white Hex form: #xxxxxx, e.g. #ffffff rgb(n1, n2, n3), e.g. rgb(255, 255, 255) Numbers can be decimal (0-255) or percentages * Property values are inherited by all nested tags, unless overridden. Font Properties Font family: Used to specify a list of font names. E.g. font-family: arial, helvetica, times new roman; Font size: E.g. font-size:10pt Other values: xx-small, x-small, small, med, large, x-large, xx-large. (called relative values.) Disadvantage of relative values is that there is a lack of strict font size control. Different browsers may have different values for each of them. Font variant: Used to set special display styles for specified font. E.g. font-variant: small-caps; Other values: normal, all-caps Font style: Used to specify the italics property. E.g. font-style: italic;

    Font weight: Used to specify degree of boldness. E.g. font-weight: bold; Other values - normal, bolder, lighter. Also multiples of 100 in the range (100-900) where 400 is normal and 700 is same as bold. Font shorthands: If more than one font property must be specified, the values can be stated in a list as the value of the font property. E.g. font: bold 14pt Times New Roman Arial; Follows a specific order Only font-size and font-family are compulsory in the value list. Font-style, font-variant and font-weight are optional and can be in any order, but must precede font size and font names. Font-family must be last, font-size must be second last. Text Properties Text Decoration: Used to specify some special feature of text. E.g. text-decoration : overline; Other values: Line-through, Underline, None(default) Text Indentation: First line of text is to be indented as specified. Values are specified either in length (cm, inch) or as a percentage. E.g. text-indent : 0.5in; Text align: E.g text-align : right; Other values: center, justify, left (default) Float: Used generally with image and table tags, to specify flow of text around some element. Values can be right, left or none.

    E.g. float:right;

    - the image on RHS with text on its LHS.

    usage: <style> img {float:right;} </style> List Properties Two presentation details of lists can be specified sequencing values that precede items in ordered lists. shape of bullets in unordered lists 1. For Ordered Lists: list-style-type Used to specify types of sequencing values. e.g. list-style-type:decimal; Other values: upper-alpha, lower-alpha, upper-roman, lower-roman 2. For Unordered Lists a. list-style-type: values disc, circle, square, none e.g. ul {list-style-type:square;} Style classes can be defined to allow different list items to have different bullet types. b. list-style-image: Used to specify an image as a list item bullet. e.g. {list-style-image : url(images/my_bullet.gif);} Color Properties Color property: {color:red;} or {background-color:green;}

    Color groups: Three levels of color collections. Named Colors: Smallest set has standard names and are generated to be correctly displayed on all browsers and on all color monitors. (Black, silver, gray, white, maroon, red, purple, fuchsia, green, lime, olive, yellow, navy, blue, teal, aqua.) Web palette: set of 216 colors that are correctly displayed on web-ready Windows and Mac machines, but not on Unix machines. Hexadecimal color palette: Numbers with six hexadecimal digits can be used to specify 16 million colors. Background Properties background-color Set to a color value or the keyword transparent (the default). Can be applied to any element. E.g. h1 {background-color: blue; color: white;} background-image Puts an image behind the contents of an HTML element. Value - either a URL or the keyword none (default). Can place a background image behind the entire document or selected parts of the document. E.g. body {background-image: url(.../marble.gif);} background-position Used to offset the starting position (from the left-hand corner). Image fills area from this offset. Values can be specified as follows: Absolute length E.g : table {background-image: url(../img.gif); background-position:10px 15px;} - offsets the image 10 pixels to the right, 15 pixels down. Keywords: left, center, right; top, center, bottom can be used for 0, 50,100% respectively. E.g. : table {background-image: url(.../img.gif); background-position: 50% center;}

    - can be used to offset the background of the table to the center. Percentage: measured from 0-100%, from left to right, top to bottom; - background-position: 50% 50% offsets the image to the center of the display. background-position Used to offset the starting position (from the left-hand corner). Image fills area from this offset. If one value specified, it applies to both vertical and horizontal offset. Absolute length E.g : table {background-image: url(../img.gif); background-position:10px 15px;} - offsets the image 10 pixels to the left, 10 pixels down. Keywords: left, center, right; top, center, bottom can be used for 0, 50,100% respectively. E.g. : table {background-image: url(.../img.gif); background-position: 50% center;} - can be used to offset the background of the table to the center. Percentage: measured from 0-100%, from left to right, top to bottom; So, background-position: 50% 50% offsets the image to the center of the display. background-repeat Used to alter the default repeat property of the browser for an image (tile image both horizontally and vertically to fill the given space). Values repeat-x: tile horizontally only. repeat-y: tile vertically only. no-repeat: suppress tiling e.g. used to place a watermark or logo in the background without tiling. background (shorthand property) Accepts values for all of the background properties in any order.

    Margin Properties Allows control of the margin space around an element.

    Properties: margin-left, margin-right, margin-top, margin-bottom. Values: length or percentage keyword: auto -- tells browser to revert to normal. percent values: computed as a percentage of the containing element's width. default: 0. Examples body {margin-left: 1in; margin-top: 0.5in; margin-right: 1in;} p {margin-left: 0.5cm;} img {margin-left: 10%;} - creates margin to the left of <img> tag equal to 10% of the width of the image.

    <span> and <div> tags <span> Used for applying special font properties to a small part of a large block of text. (typically a single character or word in a paragraph) E.g. Define a style for <span> in the style sheet. span.danger {font-size:24pt;color:red;} Use in XHTML document within a block of text. <p> <span class=danger>Slippery Floor</span> </p> <div> Defines an entire section or division of HTML markup. used to group block-elements to format them with styles. is very often used together with CSS, to layout a web page. E.g. Define a style for <div> in the style sheet. div.one {font-family:verdana; color:cyan; margin-left:1in; .;} Use in XHTML document within a block of text. <div class=one> <a>.</a> <img> </img>

    <p></p> </div> CSS Animations CSS3 is the latest standard for CSS, is still under development by W3C. CSS3 contains several new text features like text wrap, shadow effects, mirror effects etc. CSS3 supports 2-d and 3-d transforms and transitions. With CSS3, web designers can use whatever font he/she likes. Hence, CSS3 animations may replace animated gifs, Flash animations, and JavaScripts in the future.

    You might also like