Scribd Logo
Importer

Bienvenue sur Scribd !

  • CSS CSS

    Transféré par

    Sruthz Divakarla
    56 vues15 pages
    css

    Titre original

    Css

    Copyright

    © Attribution Non-Commercial (BY-NC)

    Formats disponibles

    PDF, TXT ou lisez en ligne sur Scribd

    Avez-vous trouvé ce document utile ?

    Ce contenu est-il inapproprié ?

    Signaler ce document
    css

    Droits d'auteur :

    Attribution Non-Commercial (BY-NC)
    Téléchargez comme PDF, TXT ou lisez en ligne sur Scribd
    Signaler comme contenu inapproprié
    56 vues15 pages

    CSS CSS

    Transféré par

    Sruthz Divakarla
    css

    Droits d'auteur :

    Attribution Non-Commercial (BY-NC)
    Téléchargez comme PDF, TXT ou lisez en ligne sur Scribd
    Signaler comme contenu inapproprié
    sur 15

    CSS

    CSS stands for Cascading Style Sheet g y

    What is CSS?
    CSS stands for Cascading Style Sheets Styles define how to display HTML elements Styles are normally stored in Style Sheets External Style Sheets can save you a lot of work External Style Sheets are stored in CSS files Multiple style definitions will cascade into one

    How to Insert a Style Sheet When a browser reads a style sheet it will sheet, format the document according to it. There are three ways of inserting a style sheet:
    External Style Sheet Internal Style Sheet Multiple Style Sheets

    External Style Sheet


    An external style sheet is ideal when the style is applied to many pages. pages. With an external style sheet you can change the look of an sheet, entire Web site by changing one file. Each page must link to the file. style sheet using the <link> tag. The <link> tag goes inside the head tag. section: section:
    <head> h d <link rel="stylesheet" type="text/css href="mystyle.css"/> </head>

    The browser will read the style definitions from the file mystyle.css, mystyle css and format the document according to it. An external style sheet can be written in any text editor. The file should not contain any html tags. Your style sheet should be saved with a .css extension. An example of a style sheet file is shown below:
    hr {color: sienna} p {margin-left: 20px} {marginbody {background-image: url("images/back40.gif")} {background-

    Internal Style Sheet


    An internal style sheet should be used when a single y g document has a unique style. You define internal styles in the head section by using the <style> tag, like this: <head> head <style type="text/css"> hr {color: yellow} p {margin-left: 20px} {marginbody {background-image: url("images/puppy.gif")} {background</style> </head> The browser will now read the style definitions, and format the document according to it.

    Multiple Style Sheets


    If some properties have been set for the same selector in different style sheets, the values will b i h it d f diff t t l h t th l ill be inherited from the more specific style sheet. For example, an external style sheet has these properties f the h3 selector: ti for th l t h3 { color: red; texttext-align: left; fontfont-size: 8pt } And an internal style sheet has these properties for the h3 selector:

    h3 { texttext-align: right; fontfont-size: 20pt } If the page with the internal style sheet also links to the g y external style sheet the properties for h3 will be: color: red; texttext li t t-align: right; i ht fontfont-size: 20pt The color is inherited from the external style sheet and the text-alignment and the font-size is replaced by the textfontinternal style sheet.

    CSS Syntax
    The CSS syntax is made up of three parts:
    a selector, l t a property and a value:

    selector {property: value}


    The selector is normally the HTML element/tag you wish to define, The property is the attribute you wish to change, and each property can take a value. The property and value are separated by a colon, and surrounded by curly braces

    body {color: black}


    Note: If the value is multiple words, put quotes around the value:

    p {font-family: "sans serif"} {fontNote: If you wish to specify more than one property, you must separate each property with a semicolon. The example below shows how to define a center aligned paragraph, with a red text color:

    p{ {text- g {text-align:center;color:red} ; }

    To make the style definitions more readable, you y ,y can describe one property on each line, like this: p{textp{text-align: center;color: black;font-family: arial} black;font-

    External Style Sheet - Example-1 ExampleThe HTML file be o links to a e te a sty e e e below s an external style sheet with the <link> tag:
    <html> <head> <link rel="stylesheet" type text/css href="ex1.css" /> type="text/css" href ex1.css / </head> <body> <h1>This header is 36 pt</h1> <h2>This header is blue</h2> <p>This paragraph has a left margin of 50 pixels</p> </body> </html>

    This is the style sheet file (ex1.css): s s t e sty e s eet e (e css)


    body { backgroundbackground-color:yellow; } h1 { fontfont-size:36pt; } h2 { color:blue; } p { marginmargin-left:50px; }

    Example - 2
    <html> <head> <link rel="stylesheet" type="text/css" li k l " l h " " / " href="ex2.css" /> </head> <body> <h1>This is a header 1</h1> <hr /> <p>You can see that the style sheet formats the text</p> <p><a href="http://www.google.com" target="_blank">This is a link</a></p> g p </body> </html>

    This is the style sheet file (ex2.css) s s t e sty e s eet e (e css)


    body {background-color:tan;} {backgroundh1 {color:maroon;font-size:20pt;} {color:maroon;fonthr {color:navy;} p {font-size:11pt;margin-left:15px;} {font-size:11pt;margina:link {color:green;} a:visited {color:yellow;} a:hover {color:black;} a:active {color:blue;}

    Internal Sty e S eet Text on Image te a Style Sheet e to age


    <html> <head> <h d> <style type="text/css"> img.x { position:absolute; left:0px; top:0px; z-index:-1; index:} </style> </head> <body> <h1>This is a Heading</h1> <img class="x" src="bulbon.gif" width="100" height="180"> <p>Default z-index is 0 Z-index -1 has lower priority </p> z0. Zpriority.</p> </body> </html>

    <html> <head> <style t t l type="text/css"> type="text/css" "t t/ "> body { backgroundbackground-image: url('smiley.gif'); url('smiley.gif'); backgroundbackground-repeat: nono-repeat; backgroundbackground-attachment: fixed } </style> </head> <body> <p>The image will not scroll with the rest of the page</p> <p>The image will not scroll with the rest of the page</p> <p>The image will not scroll with the rest of the page</p> <p>The image will not scroll with the rest of th page</p> < >Th i ill t ll ith th t f the </ > </body>

    Vous aimerez peut-être aussi