Scribd Logo
Upload

Welcome to Scribd!

  • Css

    Uploaded by

    rosie
    10 views19 pages
    The document discusses various CSS properties including: - Color and background properties that control text color, background color, images, and positioning. - Font properties that control font family, style, size, weight, and variant. - Text properties that control alignment, decoration, transformation, indentation and spacing. - Border properties that control style, color, and width of borders. - Link properties that style different link states like normal, visited, hovered and active. - List properties that change marker type, position and allow images as markers. - Width and height properties that resize elements.

    Original Description:

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    The document discusses various CSS properties including: - Color and background properties that control text color, background color, images, and positioning. - Font properties that control font family, style, size, weight, and variant. - Text properties that control alignment, decoration, transformation, indentation and spacing. - Border properties that control style, color, and width of borders. - Link properties that style different link states like normal, visited, hovered and active. - List properties that change marker type, position and allow images as markers. - Width and height properties that resize elements.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    10 views19 pages

    Css

    Uploaded by

    rosie
    The document discusses various CSS properties including: - Color and background properties that control text color, background color, images, and positioning. - Font properties that control font family, style, size, weight, and variant. - Text properties that control alignment, decoration, transformation, indentation and spacing. - Border properties that control style, color, and width of borders. - Link properties that style different link states like normal, visited, hovered and active. - List properties that change marker type, position and allow images as markers. - Width and height properties that resize elements.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 19

    1

    ADAVANTAGES OF CSS

    • CSS is a formatting language used to provide more customized pages


    and make it easier to make multiple pages use the same style.

    • CSS separates the presentation style of document from the content of


    document makes the web site maintenance a lot easier.

    • CSS provides web designers with sophisticated layout opportunities


    supported by all web browsers.

    CSS can be applied to a Web Page in three ways

    • Inline or attribute style


    • Internal or tag or Embedded style
    • External or link style

    UNIT-1 CSS 2
    Inline or Attribute style

    • Inline styles are used to apply the unique style rules to an element by
    putting the CSS rules directly into the start tag. It can be attached to an
    element using the style attribute.

    • The style attribute includes a series of CSS property and value pairs.
    Each "property: value" pair

    <h1 style=“color:white;background-color:blue”>Hello</h1>

    tag

    property
    attribute value

    UNIT-1 CSS 3
    Internal or tag or Embedded style

    • Embedded or internal style sheets only affect the document they are
    embedded in.

    • Embedded style sheets are defined in the <head> section of an HTML


    document using the <style> element. You can define any number of
    <style> elements in an HTML document but they must appear between
    the <head> and </head> tags.
    tag
    <html>
    <head>
    <title>My HTML Document</title>
    <style>
    body { background-color: YellowGreen; }
    p { color: #fff; }
    </style>
    </head>
    <body>
    <h1>This is a heading</h1>
    <p>This is a paragraph of text.</p>
    </body>
    </html>
    UNIT-1 CSS 4
    External or Link style
    • An external style sheet is ideal when the style is applied to many pages of the
    website.
    • An external style sheet holds all the style rules in a separate document that you can
    link from any HTML file on your site.You can change the look of an entire website
    by changing just one file.
    • You can attach external style sheets in two ways — linking and importing.
    Linking External Style Sheets
    • Before linking, we need to create a style sheet first.
    • An external style sheet can be linked to an HTML document using the <link> tag.
    The <link> tag goes inside the <head> section
    style.css Test.html
    <html lang="en">
    body { <head>
    background: lightyellow; <title>My HTML Document</title>
    font: 18px Arial, sans- <link rel="stylesheet" href="css/style.css">
    serif; </head>
    } <body>
    h1 { <h1>This is a heading</h1>
    color: orange; <p>This is a paragraph of text.</p> </body>
    </html>
    }

    UNIT-1 CSS 5
    CSS PROPERTIES

    • Color and Background Properties


    • Font Properties
    • Text Properties
    • Border Properties
    • Link Properties
    • List Properties
    • Width and Height Properties

    UNIT-1 CSS 6
    Color and Background Properties
    • The color property defines the text color of an element.

    h1 { color: red; }
    p { color: purple; }

    The background properties are


    • background-color : to set the background color of an element
    • background-image: set an image as a background of an HTML element
    • background-repeat: allows you to control how a background image is repeated
    values : repeat-X, repeat-Y, no-repeat, repeat (default)
    • background-attachment : determines whether the background image is fixed
    with regard to the viewport or scrolls along with the containing block.
    values : fixed, scroll(default)
    • background-position : to control the position of the background image
    values : center center, left top, right top, left bottom, right bottom,
    center top, center bottom

    UNIT-1 CSS 7
    • background-color
    body { background-color: green; }

    • background-image
    body { background-image: url(“bg1.gif"); }

    • background-repeat
    body { background-image: url("images/gradient.png");
    background-repeat: repeat-x; }

    • background-attachment
    body {
    background-image: url("images/bell.png");
    background-repeat: no-repeat;
    background-attachment: fixed;
    }
    • background-position
    body {
    background-image: url("images/robot.png");
    background-repeat: no-repeat;
    background-position: right top;
    } UNIT-1 CSS 8
    • FONT Properties
    • CSS provide several properties for styling the font of the text, including
    changing their face, controlling their size and boldness, managing variant, and
    so on.
    The font properties are:
    font-family : to specify the font to be used to render the text
    body { font-family: Arial, Helvetica, sans-serif; }

    font-style : to set the font face style for the text content of an element
    values : normal, italic or oblique.
    p{ font-style: oblique; }

    font-weight : specifies the weight or boldness of the font


    values : normal, bold, bolder, lighter, 100
    p{ font-weight: larger;}

    font-size : to set the size of font for the text content of an element.
    p{ font-size: 20px;}

    font-variant : allows the text to be displayed in a special small-caps variation.


    values : small-caps
    p{ font-variant: small-caps;}
    UNIT-1 CSS 9
    • TEXT Properties
    • CSS provides several properties that allows you to define various text styles
    such as color, alignment, spacing, decoration, transformation, etc. very easily
    and effectively.
    • The text properties are:
    text-align : to set the horizontal alignment of the text.
    values : left, right, center
    h1 { text-align: center; }
    text-decoration : to set or remove decorations from text
    values : none, underline, overline, line-through
    a{ text-decoration: none; }
    text-transform : to set the cases for a text.
    values : uppercase, lowercase, capitalize
    p{ text-transform : uppercase; }
    text-indent : to set the indentation of the first line of text within a block of text
    p{ text-indent : 25px }
    line-height : to set the height of the text line.
    p { line-height: 1.2; }
    letter-spacing : to set extra spacing between the characters of text.
    h1{ letter-spacing: 10px; }
    word-spacing : to specify additional spacing between the words
    h1{ word-spacing: 20px; }
    UNIT-1 CSS 10
    • BORDER Properties
    • The CSS border properties allow you to define the border area of an element's
    box.

    The Border Properties are

    border-style : sets the style of a box's border


    values : solid, dashed, dotted, double, inset, outset, groove, and ridge.
    h1 { border-style : dashed; }

    border-color : specifies the color of the border area


    h1 { border-style : dashed; border-color: green;}

    border-width : specifies the width of the border area


    h1 { border-style : dashed; border-color: green;border-width:10px;}
    Border shorthand property

    p {
    border: 5px solid red;
    }
    UNIT-1 CSS 11
    • LINK Properties
    • A link has four different states — link, visited, active and hover. These four
    states of a link can be styled differently through using the following anchor
    pseudo-class selectors.
    a:link : define styles for normal or unvisited links.
    a:visited : define styles for links that the user has already visited.
    a:hover : define styles for a link when the user place the mouse pointer over it.
    a:active : define styles for links when they are being clicked.
    a:link { /* unvisited link */
    color: YELLOW;
    text-decoration: none;
    border-bottom: 1px solid;
    }
    a:visited { /* visited link */
    color: RED;
    }
    a:hover { /* mouse over link */
    color: GREEN;
    border-bottom: none;
    }
    a:active { /* active link */
    color: BLUE;
    } UNIT-1 CSS 12
    • LIST Properties
    • CSS provides the several properties for styling and formatting the most
    commonly used unordered and ordered lists.

    • Changing the Marker Type of Lists


    ul { list-style-type: square; }
    ol { list-style-type: upper-roman; }

    • Changing the Position of List Markers


    li { list-style-position: inside; }
    li { list-style-position: outside; }

    • Using Images as List Markers


    li { list-style-image: url("images/bullet.png"); }

    • WIDTH and HEIGHT Properties


    • These properties are used to resize the element.
    p { width:300px;height:200px;border-width:10px;border-color:blue }

    UNIT-1 CSS 13
    • CSS Selectors
    • A CSS selector is a pattern to match the elements on a web page. The style rules associated
    with that selector will be applied to the elements that match the selector pattern.
    CSS Element Selector : The Element selector selects the HTML element by name.
    p { color: blue; }
    CSS ID Selector : The id selector is used to define style rules for a single or unique element.
    The id selector is defined with a hash sign (#) immediately followed by the id value.

    <style> <body>
    #error { <p id="error">This is a
    color: #ff0000; warning!</p>
    }
    </style>
    </body>

    CSS Class Selector :The class selectors can be used to select any HTML
    element that has a class attribute. All the elements having that class will be
    formatted according to the defined rule. The class selector is defined with a period
    sign (.) immediately followed by the class value.
    <style>
    .blue { <h1 class="blue">This is a
    color: red; heading</h1>
    } <p class="blue">This is a
    </style> paragraph.</p>
    14
    UNIT-1 CSS
    • CSS Selectors
    Global or Universal Selector
    CSS universal selectors select any type of elements in an HTML page.
    An asterisk ( i.e. "*" ) is used to denote a CSS universal selector. An asterisk
    can also be followed by a selector. This is useful when you want to set a style
    for of all the elements of an HTML page or for all of the elements within an
    element of an HTML page.
    * { CSS-Property: value; ........................ }
    *{
    color: blue; /* color of all the elements should be blue */
    background: silver; /* silver background is set for all the
    elements */
    }
    Select all elements inside <div> elements and set their background color
    to yellow:
    div * {
    background-color: yellow;
    }
    15
    UNIT-1 CSS
    • CSS BOX MODEL
    • All HTML elements can be considered as boxes. In CSS, the term "box
    model" is used when talking about design and layout.
    • The CSS box model is essentially a box that wraps around every HTML
    element. It consists of:
    margins, borders, padding, and the actual content

    16
    UNIT-1 CSS
    • CSS BOX MODEL
    Margin - Clears an area outside the border. The margin is transparent
    Border - A border that goes around the padding and content
    Padding - Clears an area around the content. The padding is transparent
    Content - The content of the box, where text and images appear
    <!DOCTYPE html>
    <html>
    <head>
    <style>
    div {
    background-color: lightgrey; width: 300px; border: 15px solid green;
    padding: 50px; margin: 20px; }
    </style>
    </head>
    <body>
    <h2>Demonstrating the Box Model</h2>
    <p>The CSS box model is essentially a box that wraps around every HTML element. It
    consists of: borders, padding, margins, and the actual content.</p>
    <div>
    Content
    </div>
    </body>
    </html> 17
    UNIT-1 CSS
    • CSS POSITION PROPERTY
    The CSS position property defines the position of an element in a document.
    This property works with the left, right, top, bottom and z-index properties to
    determine the final position of an element on a page.
    position: value;
    Value Description
    Normal position for the element (where top, right,
    static bottom, and left have no effect)
    div { position: static; }

    Position the element relative to where its normal


    relative position would have been
    div { position: relative; top: 10px; left: 15px; }

    Position the element absolutely relative to its


    absolute container
    div { position: absolute; top: 10px; left: 15px; }

    Position the element relative to the screen's


    fixed viewport and stay fixed on screen when scrolling
    div { position: fixed; top: 10px; left: 15px; }

    18
    UNIT-1 CSS
    • CSS CURSOR PROPERTY
    The cursor property specifies the mouse cursor to be displayed when pointing
    over an element.
    cursor: value;

    • copy The cursor indicates something is to be copied


    • Cell The cursor indicates that a cell (or set of cells) may be
    selected
    • Crosshair The cursor render as a crosshair
    • Progress The cursor indicates that the program is busy (in progress)
    • Text The cursor indicates text that may be selected
    • Wait The cursor indicates that the program is busy
    • zoom-in The cursor indicates that something can be zoomed in
    • zoom-out The cursor indicates that something can be zoomed out
    • No-drop The cursor indicates that the dragged item cannot be
    dropped here
    <div style=“cursor:no-drop”>Hello!</div>
    19
    UNIT-1 CSS

    You might also like