Scribd Logo
Upload

Welcome to Scribd!

  • Cascading Stylesheet

    Uploaded by

    Agastya Abhishek
    13 views4 pages

    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

    Copyright:

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

    Cascading Stylesheet

    Uploaded by

    Agastya Abhishek

    Copyright:

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

    Cascading Stylesheet/Stylesheet/CSS

    Cascading Style Sheets, fondly referred to as CSS, is a simply designed language intended to simplify
    the process of making web pages presentable. CSS allows to apply styles to web pages. It enables to
    do this independent of the HTML that makes up each web page. It describes how a webpage should
    look: it prescribes colors, fonts, spacing, and much more. In short, we can make our website look the
    way we want. While html uses tags, css uses rulesets. CSS is easy to learn and understand, but it
    provides powerful control over the presentation of an HTML document.

    Advantages of CSS:
    1. Size of HTML document decreases. So pages download faster.
    2. HTML documents become neat. So, editing becomes easier.
    3. Giving similar formatting parameter to similar contents becomes easier (As shown in
    previous example, one set of property is effective on all <P> contents
    4. Repetition of formatting property can be avoided. So, chances of mistakes are minimized.
    5. Editing of formatting properties are easier and done at one place.
    Few points about Style sheet:
    1. In programming specification, it is a markup language.
    2. Factually, it is document made up of plain text as HTML Document.
    3. It is also created using a Text-Editing Application(e.g. Notepad)
    4. It must be created with .CSS extension.(Hope you all remember how to give .CSS in filename)
    CSS Syntax:
    CSS comprises style rules that are interpreted by the browser and then applied to the corresponding
    elements in your document. A style rule set consists of a selector and declaration block.

    Syntax : Selector {declaration}

    Selector is name of elements to format. Declaration is property and its value within curly bracket
    separated by :. Multiple properties are separated by semicolon.
    Ex- h1,p {color:blue; text-decoration:underline}

    CSS can be used in three ways:

    1. Inline Stylesheet(Used as attribute of tag): Applicable only on tag where style attribute is used.

    Ex : <P style= “color:blue; font-style:italics”>My text</P>

    2. Internal or Embedded Stylesheet (Used as Tag inside Head Tag) : Applicable to one or more
    elements.

    <Head>
    <Style type=”text/css”>
    P {color:green; text-decoration:underline} – Applicable to all P elements in document.
    h1 {color:blue; text-decoration:underline} – Applicable to all H1 elements in document.
    <Style>
    </Head>

    3. External Stylesheet.
    Here, HTML document and stylesheet document are stored separately. Stylesheet document is also
    a text file, created using text editor (notepad) and saved with .CSS extension. Using a LINK tag, the
    stylesheet is linked to the HTML document.
    **** HTML Document saved as CSSTEST.HTML
    <HTML>
    <Head>
    <Title>My Page</Title>
    <link rel="Stylesheet" href="mystyle.css" type="text/css">
    </Head>
    <Body>
    <h1 >St. Michael’s High School, Digha Ghat, Patna - 1</h1>
    <P >St. Michael’s High School, Digha Ghat, Patna - 1</P>
    </body>
    </HTML>
    **** CSS Document saved as mystyle.css
    P {color:green; text-decoration:underline}
    h1 {color:blue; text-decoration:underline}

    LINK – It is a HTML tag to link HTML document to other documents. Its attributes are
    Rel – indicates type of relation between HTML and CSS document.
    Type – Type of file to be related. For you, it is always text/css.
    Properties and their values

    1 Font Properties: Decides font display in a web page


    a. Font-family- One or more Font-family name may be used. One generic Ex : Font-family:Arial,
    font-family name is advisable to be on safe side: Verdana, Sans-Serif
    Font-family: name of font-family
    b. Font-Style:normal/italic/oblique If italic is not
    available, oblique is
    used.
    c. Font-weight: Boldness of the font on the scale of 100-900. 400 is
    normal. Above 400 is bolder and below 400 is lighter.
    d. Font-size: Size of font. Use only one font
    Font-size: Absolute size/Relative-Size/Length/Percentage size at a time.
    Absolute size is fixed. Values are – xx-small, x-small, small, medium,
    large, x-large, xx-large
    Relative size: smaller, larger, percentage, em. Where percentage is of
    parent element and em is times current size.
    Length: in px (Pixel), pt(Point-size)
    e. Font-variant: normal/small-caps.
    Font-family:Comic Sans,Arial; font-size:50px; font-weight:bold; font-
    style:italic;font-variant: small-caps
    Properties and values can also be used in a shortcut way. To do this, order
    of properties must be maintained.
    Font: font-style font-variant font-weight font-size Font-family Shortcut of Font
    Ex: Font:italic small-caps bold 50px Comic Sans
    2 Text Properties: Decides text arrangement in a web page
    a. Text-align: left/right/center/justify
    b. Text-Indent: Indents first line of block
    Text-Indent:Length in px, pt, cm, em/percentage of block width.
    Default value is 0. +ve value indents right/ -ve value indents left side.
    3. Color Properties : Colours text.
    Color: Colour name/ Hex code of colour
    4. Text-decoration: Decorates text
    Text-decoration:underline/overline/line-through/blink/none
    5. Text-Transform: Transform text to uppercase/lowercase
    Text-Transform:capitalize/uppercase/lowercase/none
    Capitalize- Capital letter for first character of each word.
    Uppercase - Capital letter for all characters of each word.
    Lowercase- Small letter for all characters of each word.
    6. Line-Height: Specifies height of line including font height
    Line-Height: number/length/percentage/normal
    Number- line height is number*font-size
    Length – in px, pt, cm, em
    Percentage- percentage * font-size.
    7. Word-spacing: Space between words of block.
    Word-spacing: length in pixels
    8. Letter-spacing: Space between letters of word.
    Letter-spacing: length in pixels
    9. Background Properties: Controls background of element
    a. Background-color:Colour name/Hex Code of colour
    b. Background-image:url(url of image)
    Ex: <P Style=” Background-image:url(abcd.jpg)”
    c. Background-repeat: no-repeat/repeat-x/repeat-y/repeat Image repeated as
    No-repeat – does not repeat image. Displays only once. tiles
    Repeat-x: repeats image horizontally
    Repeat-y: repeats image vertically
    Repeat – repeats image both horizontally and vertically.
    d. Background-attachment: fixed/scroll
    Fixed: fixes position of background imgae;
    Scroll: Background image scrolls with page.
    e Background-position: top/bottom/center left/right/center
    Background:color url repeat Shortcut of
    Background
    10. Margin properties: decides margin for a block
    Padding properties: decides space between content and border of content
    Both are used as given below
    Margin-top: length in px, pt, cm, em/ % of block
    Margin-bottom: length in px, pt, cm, em/ % of block
    Margin-left: length in px, pt, cm, em/ % of block
    Margin-right: length in px, pt, cm, em/ % of block
    Margin : top right bottom left Shortcut of Margin
    Padding may also be used at the place of margin
    11. Border properties: borders the block
    a. Border-width: thick/thin/medium/in pixel
    b. Border-style:
    none/hidden/dotted/dashed/solid/double/groove/ridge/inset/outset
    c. Border-color: Colour name/hex code of colour
    Border: Border-width border-style border-colour Shortcut of Border
    12. Height and width properties: Decides height and width of element. Adds
    extra space for smaller elements:
    a. Height: in pixel
    b. Width: in pixel
    13. Float properties: Pushes element to a position in relation to other element
    Float:left/right/inherit/none
    Inherit means carries position from parent element
    14. Outline Properties: It adds an extra border around an element
    a. Outline-width: thick/thin/medium/in pixel
    b. Outline-style:
    none/hidden/dotted/dashed/solid/double/groove/ridge/inset/outset
    c. Outline-color: Colour name/hex code of colour

    Border Vs Outline
    a. Outlines do not take up space, because they always placed on
    top of the box of the element which may cause them to
    overlap other elements on the page.
    b. Unlike borders, outlines won't allow us to set each edge to a
    different width, or set different colors and styles for each
    edge. An outline is the same on all sides.
    c. Outlines do not have any impact on surrounding elements
    apart from overlapping.
    d. Unlike borders, outlines do not change the size or position of
    the element.
    e. Outlines may be non-rectangular, but you cannot create
    circular outlines.

    You might also like