Scribd Logo
Încărcați

Bine ați venit la Scribd!

  • CSS Introduction

    Încărcat de

    martindinglasan
    18 vizualizări6 pagini
    CSS Introduction

    Drepturi de autor

    © © All Rights Reserved

    Formate disponibile

    DOC, PDF, TXT sau citiți online pe Scribd

    Vi se pare util acest document?

    Este necorespunzător acest conținut?

    Raportați acest document
    CSS Introduction

    Drepturi de autor:

    © All Rights Reserved
    Descărcați ca DOC, PDF, TXT sau citiți online pe Scribd
    Indicator pentru conținut neadecvat
    18 vizualizări6 pagini

    CSS Introduction

    Încărcat de

    martindinglasan
    CSS Introduction

    Drepturi de autor:

    © All Rights Reserved
    Descărcați ca DOC, PDF, TXT sau citiți online pe Scribd
    Indicator pentru conținut neadecvat
    din 6

    Don Bosco Technical College

    Information Technology II - #2.1

    Gen. Kalentong Street, Mandaluyong City

    HIGH SCHOOL DEPARTMENT

    Information Technology II
    Style Sheets:

    Cascading Style Sheets


    CSS define how to display HTML elements
    CSS can save you a lot of work
    CSS are files, containing element positioning, text formatting and other
    presentation data for a web site

    Disadvantages
    Larger Initial Time
    Commitment

    Advantages
    More Precise Formatting
    Separation of HTML
    Content from Appearance
    Saves Time
    Easier Site Maintenance
    Web Accessibility

    CSS solved a great problem for HTML

    The original HTML was never intended to contain tags for formatting a
    document. HTML tags were intended to define the content of a document.
    <font> & color attributes were just added to HTML 3.2 specification
    W3C created CSS in addition to HTML 4.0
    All browsers support CSS today.

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

    Information Technology II - #2.1

    <body>
    <h1>Hello World!</h1>
    </body>
    </html>
    CSS Internal style
    An internal style sheet should be used when a single document has a
    unique style. It is seen inside the head tag.
    <html>
    <head>
    <style type="text/css">
    body {background-color: yellow}
    </style>
    </head>
    <body>
    <h1>Hello World!</h1>
    </body>
    </html>
    CSS Inline style
    An inline style loses many of the advantages of style sheets by mixing
    content with presentation. Use this method sparingly, such as when a style is to
    be applied to a single occurrence of an element.
    <html>
    <head>
    </head>
    <body>
    <h1 style="color:#FF0000>Hello World!</h1>
    </body>
    </html>

    Information Technology II - #2.1

    CSS Multiple style


    If some properties have been set for the same selector in different style
    sheets, the values will be inherited from the more specific style sheet.
    <html>
    <head>
    .changecolor { color: red;
    text-align: left;
    font-size: 8pt }
    </head>
    <body>
    <h1 class=changecolor>Hello World!</h1>
    <h5 class=changecolor>Testing</h5>
    </body>
    </html>

    What style will be used to your webpage?


    Generally speaking we can say that all the styles will "cascade" into a new
    "virtual" style sheet by the following rules, where number four has the highest
    priority:
    1)
    2)
    3)
    4)

    Browser default
    External style sheet
    Internal style sheet (in the head section)
    Inline style (inside an HTML element)

    PARTS OF A CSS:
    CSS is made up of 3 parts

    Selector

    <html>
    <head>

    Property

    <style type="text/css">

    Value

    body {background-color:
    yellow}
    </style>
    </head>

    Information Technology II - #2.1

    Information Technology II - #2.1

    Grouping of Selectors
    You can group selectors. Separate each with a comma.
    h1, h2, h3, h4, h5{
    color: green
    }
    With Class or ID selectors you can define different styles to the same type of
    html element.

    p.dog {text-align:right}
    p.cat {text-align:center}
    Head of HTML

    <p class=dog">This paragraph will be right-aligned.</p>


    <p class="cat">This paragraph will be center-aligned.</p>

    Body of HTML
    Writing comments
    Comments are used to explain your code, and may help you when you edit the
    source code at a later date. A comment will be ignored by browsers. A CSS comment
    begins with "/*", and ends with "*/", like this:
    /*This is a comment*/

    CSS Examples:
    EX 1. Using Internal stylesyntax
    <html>
    <head>
    <style type="text/css">
    body {background-color: yellow}
    </style>

    Information Technology II - #2.1

    </head>
    <body>
    <h1>Hello World!</h1>
    </body>
    </html>

    EX 2. Using multiple style syntax


    <html>
    <head>
    .c { color: red;
    font-size: 8pt }
    </head>
    <body>
    <h1 class=c style=text-align:left>HelloWorld!</h1>
    <h5 class=c>Testing</h5>
    </body>
    </html>

    S-ar putea să vă placă și