Scribd Logo
Importer

Bienvenue sur Scribd !

  • Css

    Transféré par

    Tripal Reddy
    22 vues50 pages
    CSS is short for Cascading Style Sheets CSS is added to html to give web developers more control over the design of web pages. CSS allows a designer to create a standard set of settings that controls the style of all the web pages With CSS you can add style (fonts, colors, spacing, size, etc.,) to web pages y more advanced techniques control the layout of the page y styles such as fonts, font sizes, margins, can be specified in one place, with the casca

    Description originale:

    Copyright

    © Attribution Non-Commercial (BY-NC)

    Formats disponibles

    PPTX, PDF, TXT ou lisez en ligne sur Scribd

    Avez-vous trouvé ce document utile ?

    Ce contenu est-il inapproprié ?

    Signaler ce document
    CSS is short for Cascading Style Sheets CSS is added to html to give web developers more control over the design of web pages. CSS allows a designer to create a standard set of settings that controls the style of all the web pages With CSS you can add style (fonts, colors, spacing, size, etc.,) to web pages y more advanced techniques control the layout of the page y styles such as fonts, font sizes, margins, can be specified in one place, with the casca

    Droits d'auteur :

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

    Css

    Transféré par

    Tripal Reddy
    CSS is short for Cascading Style Sheets CSS is added to html to give web developers more control over the design of web pages. CSS allows a designer to create a standard set of settings that controls the style of all the web pages With CSS you can add style (fonts, colors, spacing, size, etc.,) to web pages y more advanced techniques control the layout of the page y styles such as fonts, font sizes, margins, can be specified in one place, with the casca

    Droits d'auteur :

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

    KGR Department of Information Technology CBIT

    Cascading Style Sheets


    y Style sheets make it easy to override default behavior y y y y

    of HTML elements CSS is short for Cascading Style Sheets CSS is added to HTML to give web developers more control over the design of web pages. CSS allows a designer to create a standard set of settings that controls the style of all the web pages With CSS you can add style (fonts, colors, spacing, size, etc..,) to web pages.

    Contd.
    y More advanced techniques control the layout of the

    page. y Styles such as fonts, font sizes, margins, can be specified in one place, with the cascading style sheets.

    Types of Styles
    y Based on the usage area the styles are categorized into

    following types: y In-line styles (Tag Level) y Internal Styles (Page Level) y External Styles (Web Site Level)

    In-line styles (Tag Level)


    y Applying styles at tag level is called Inline styles. y It can be applied using style attribute. y Usage:

    <p style="color: red; font-family: 'Arial Black'; "> This paragraph is styled in red with the Arial Black font. </p>

    Internal Styles
    y Applying styles at page level is called Internal styles. y It can be applied using <STYLE> tag inside the <HEAD> tag. y Usage:
    <head> <style> P{ color: red; font-family: 'Arial Black'; } </style> </head>

    External Styles
    y Styles that are prepared at web site level is called

    external styles. y This can be achieved with the *.css files. y Steps to implement external styles:
    1. Define styles in a normal notepad file. 2. Save as *.css 3. Refer the *.css file from html document 4. Browse and Test the html document.

    Linking CSS file from HMTL


    <HEAD> <LINK href= *.css type= text/css relation= stylesheet /> </HEAD>

    Specifying style rules


    y General form of rule

    selector

    property: value
    { { { {

    }
    } } } }

    or selector selector selector selector Example:

    property1: value 1 property:2 value2 property:3 value3 propertyN: valueN

    H1{text-align : center ; color : blue}

    CSS Text Styles


    y color: value;
    color name - example:(red, black...) hexadecimal number - example:(#ff0000, #000000) RGB color code - example:(rgb(255, 0, 0), rgb(0, 0, 0))

    Contd.
    y Letter Spacing

    letter-spacing: value;
    Possible values are normal length Example: Theselettersarespacedat5px.

    Contd.
    y Text Align y text-align: value; Possible values are
    left right center justify Examples: This text is aligned left. This text is aligned in the center. This text is aligned right. This text is justified.

    Contd.

    Contd.
    y Text Indent
    Possible values are length percentage Examples: This text is indented 10px pixels.

    Contd.
    y Text Transform y text-transform: value;
    Possible values are none capitalize lowercase

    Examples: This First Letter In Each Word Is Capitalized, Though It Is Not In My File. THIS TEXT IS ALL UPPERCASE, THOUGH IT IS ALL LOWERCASE IN MY FILE. this text is all lowercase. though it is all uppercase in my file.

    Font Styles
    y Font Family

    font-family: Verdana, sans-serif; y Font Size font-size: value;


    xx-large x-large larger large medium small smaller x-small xx-small length % (percent)

    Contd.
    y Font Style

    Possible values are normal itailc y Font Variant font-variant: value;


    Possible values are normal small-caps

    Contd.
    y y y y y y y y y y y y y y y

    Font Weight font-weight: value; lighter normal 100 200 300 400 500 600 700 800 900 Bold bolder

    CSS Anchors, Links


    y a:link {color: #009900;} y a:visited {color: #999999;} y a:hover {color: #333333;} y a:focus {color: #333333;} y a:active {color: #009900;}

    background
    y CSS properties used for background effects: y background-color y background-image y background-repeat y background-attachment y background-position

    Contd.
    y Background Color The background color of a page is defined in the body selector body {background-color:#b0c4de;} y Background Image body {background-image:url('paper.gif');} y Background Image - Repeat Horizontally or Vertically body { background-image:url('gradient2.png'); background-repeat:repeat-x; }

    Contd.
    y Background Image - Set position and no-repeat body { background-image:url('img_tree.png'); background-repeat:no-repeat; } y background-position body { background-image:url('img_tree.png'); background-repeat:no-repeat; background-position:right top; }

    Contd.
    y How to specify a fixed background-image

    body { background-image:url('smiley.gif'); background-repeat:no-repeat; background-attachment:fixed; } Default value:scroll The background-attachment property sets whether a background image is fixed or scrolls with the rest of the page.

    Background shorthand property


    y background: #ffffff url(path_to_image) top left no-

    repeat fixed;
    Values: attachment color image position repeat

    Contd.
    y Background Attachment

    background-attachment: value;
    Values: fixed scroll

    y Background Color

    background-color: value;
    color name hexadecimal number RGB color code transparent

    Contd.
    y Background Image y background-image: url(path_to_image); Values: url None

    Contd.
    y Background Position y background-position: value;
    Values: top left top center top right center left center center center right bottom left bottom center bottom right x-% y-% x-pos y-pos

    Contd.
    y Background Repeat y background-repeat: value;
    Values repeat repeat-x repeat-y

    Types of style classes


    y Class

    The class selector allows you to set multiple styles to the same element or tag in a document Ex:<p class="blue"> This paragraph would have a blue background. </p> <p> And this paragraph would default back to the normal style. </p> <p class="red"> And this paragraph would have a red background color. </p>

    Contd.
    Now Css looks like: <style type="text/css"> p.blue { background-color: #0000ff; } p.red { background-color: #ff0000; } </style> y If you want to use a single class across multiple HTML elements, simply remove the HTML element from the beginning of the style call (be sure to leave the period (.) in place):

    Contd.
    y Ex: <style type="text/css"> .blue {background-color: #0000ff;} .red {background-color: #ff0000;} </style> y These two classes are then available to any element that needs them: <p class="blue"> This paragraph would have a blue background. </p> <h2 class="blue">And this h2 would also have a blue background.</h2>

    Contd.
    y ID SELECTOR y The ID selector allows you to give a name to a specific

    style without associating it with a tag or other HTML element. <style type="text/css"> #indent1 { text-indent: 10px; } </style> y You associate an ID tag the same way you associate classes, within the element that should have that style: y <h3 id="indent1">

    Block styles
    y The 3 ways that HTML elements can be displayed y Block Takes up the full width available, with a new line

    before and after (display: block;)


    y Inline Takes up only as much width as it needs, and

    does not force new lines (display: inline;)


    y Not displayed Some tags, like <meta /> and <style> are

    not visible (display: none;)

    Block
    y Common HTML elements that are naturally blocky y y y y

    display include: <div>Your general-purpose box <p>Paragraph <ul>, <ol>, Lists (unordered, ordered) <li>, List items <table>Tables

    Contd.
    y <blockquote>Like an indented paragraph, meant for

    quoting passages of text y <pre>Indicates a block of preformatted code y <form>An input form

    <ul> example
    y You change the display property of any elements

    <ul> <li><a href= # >Home</a></li> <li><a href= # >About us</a></li> <li><a href= # >Products</a></li> <li><a href= # >FAQs</a></li> <li><a href= # >Contact us</a></li> </ul>

    Contd.
    y Add css
    <style type= text/css > .toolbar li { display:inline; background-color:#eee; border:1px solid; border-color:#f3f3f3 #bbb #bbb #f3f3f3; margin:0; padding:.5em; zoom: 1; } </style> <ul class= toolbar > <li><a href= # >Home</a></li> <li><a href= # >About us</a></li> <li><a href= # >Products</a></li> <li><a href= # >FAQs</a></li> <li><a href= # >Contact us</a></li> </ul>

    CSS Border
    y The CSS border properties allow you to specify the y y y y y

    style and color of an element's border. border-style dotted: Defines a dotted border dashed: Defines a dashed border solid: Defines a solid border double: Defines two borders. The width of the two borders are the same as the border-width value

    Contd.
    y border-width y The border-width property is used to set the width of

    the border. y he width is set in pixels, or by using one of the three pre-defined values: thin, medium, or thick. y The "border-width" property does not work if it is used alone. Use the "border-style" property to set the borders first.

    Contd.
    y border-color y name - specify a color name, like "red" y RGB - specify a RGB value, like "rgb(255,0,0)" y Hex - specify a hex value, like "#ff0000" y You can also set the border color to "transparent". y The "border-color" property does not work if it is used

    alone. Use the "border-style" property to set the borders first. y Border - Shorthand property border:5px solid red;

    CSS Margin
    y The margin clears an area around an element (outside

    y y y y

    the border). The margin does not have a background color Possible Values auto: The browser sets the margin. The result of this is dependant of the browser Length: Defines a fixed margin (in pixels, pt, em, etc.) %:Defines a margin in % of the containing element

    Contd.
    y exmaple y margin-top:100px;

    margin-bottom:100px; margin-right:50px; margin-left:50px;

    Contd.
    y

    Short hand property

    margin:25px 50px 75px 100px;


    y y y y

    top margin is 25px right margin is 50px bottom margin is 75px left margin is 100px

    margin:25px 50px 75px;


    y y y

    top margin is 25px right and left margins are 50px bottom margin is 75px

    margin:25px 50px;
    y y

    top and bottom margins are 25px right and left margins are 50px

    margin:25px;
    y

    all four margins are 25px

    Padding
    y The padding clears an area around the content (inside

    the border) of an element. y length:Defines a fixed padding (in pixels, pt, em, etc.) y Padding - Individual sides padding-top:25px; padding-bottom:25px; padding-right:50px; padding-left:50px;

    Contd.
    y Padding - Shorthand property
    padding:25px 50px 75px 100px; y top padding is 25px y right padding is 50px y bottom padding is 75px y left padding is 100px padding:25px 50px 75px; y top padding is 25px y right and left paddings are 50px y bottom padding is 75px padding:25px 50px; y top and bottom paddings are 25px y right and left paddings are 50px padding:25px; y all four paddings are 25px

    DIV
    y Div (short for division) divides the content into

    individual sections. Each section can then have its own formatting, as specified by the CSS. Div is a block-level container, meaning that there is a line feed after the </div> tag.

    Contd.
    y Example
    y

    .large { color: #00FF00; font-family:arial; font-size: 4pt; } The HTML code

    <div class="large"> This is a DIV sample. </div> gets displayed as This is a DIV sample.

    references
    y http://www.emdpi.com/fontsize.html y http://w3schools.com/cssref

    Vous aimerez peut-être aussi