Scribd Logo
Carica

Benvenuto in Scribd!

  • CSS Introduction

    Caricato da

    Joel Memita
    40 visualizzazioni17 pagine
    test

    Copyright

    © © All Rights Reserved

    Formati disponibili

    PPT, PDF, TXT o leggi online da Scribd

    Hai trovato utile questo documento?

    Questo contenuto è inappropriato?

    Segnala questo documento
    test

    Copyright:

    © All Rights Reserved
    Scarica in formato PPT, PDF, TXT o leggi online su Scribd
    Segnala contenuti inappropriati
    40 visualizzazioni17 pagine

    CSS Introduction

    Caricato da

    Joel Memita
    test

    Copyright:

    © All Rights Reserved
    Scarica in formato PPT, PDF, TXT o leggi online su Scribd
    Segnala contenuti inappropriati
    di 17

    1. What is the function or purpose of CSS?

    2. Explain the parts of a CSS rule?


    3. Cite and discuss the three ways on which you
    can write the CSS.
    4. As a future programmer/web developer, which
    among the three types is the best when creating a
    web site. Explain why.
    5. Write one example of CSS rule for each type.
    (You don’t need to write the entire HTML document.)
    HTML contents

    MEANING

    CSS presentation

    FORMATTING
    CSS (Cascading Style
    Sheet)
    It is used for styling
    HTML elements so
    that the web page is
    given a creative
    visual look.
    CSS allows you to
    create rules that
    control the way that
    each individual (and
    the contents of that
    box) is presented.
    HOW CSS WORKS:
    It is called cascading because
    whatever characteristics an upper
    level element has is cascaded or
    passed on to the lower level
    elements.
    For example, if the <body>
    element was defined as having
    an Arial font, then all elements
    inside the <body> elements
    display text in Arial.
    In this example,
    All About Public Speaking block level elements
    are shown with red
    borders, and inline
    Public speaking is the process of elements have blue
    borders.
    communicating information to an The <body>
    element creates
    audience. It is usually done before a the first box, then
    the <h1>, <p> and
    large audience, like in school, the <i> elements each
    create their own
    workplace and even in our personal boxes within it.

    lives. The benefits of knowing how to Using CSS, you could


    add a border around
    any of the boxes ,
    communicate to an audience include specify its width and
    height or add a
    sharpening critical thinking and background color.
    You could also
    verbal/non-verbal communication control text inside a
    box-ex. its color, size
    skills. and the typeface
    used.
    EXAMPLE STYLES
    BOXES
    width and height
    borders (colors, width, and style)
    background, color and images
    Position in the browser window
    TEXT
    typeface
    size
    color
    Italics, bold, uppercase,
    SPECIFIC lowercase, small-caps
    There are specific ways
    in which you can style
    certain elements such
    as lists, tables and
    forms.
    CSS associates style rules
    with HTML Elements
    CSS works by associating rules with
    HTML elements. These rules govern
    how the content of specified
    elements should be displayed. A
    CSS rule contains two parts:

    a selector and a declaration


    This rule indicates that all
    <p> should be shown in
    selector the Arial typeface.
    Selectors indicate which
    P{ element the rule applies to. The
    same rule can apply to more
    than one element if your
    font-family: Arial;} separate the element names
    with commas.

    declaration Declaration how the


    elements referred to in the
    selector should be styled.
    Declarations are split into two
    parts (a property and a
    value), and are separated by a
    colon.
    CSS properties affect how
    elements are displayed
    CSS declarations sit inside curly
    brackets and each is made up of two
    parts:
    a property and a value, separated by
    a colon.
    You can specify several properties in
    one declaration, each separated by a
    semi-colon.
    H1, h2, h3 {
    font-family: Arial;
    color: yellow;}

    property values
    This rule indicates that all <h1>, <h2>, and <h3>
    should be shown in the Arial typeface, in a yellow
    color.
    Properties indicate the aspects of the element you
    want to change. For example color, font, width,
    height and border.
    Values specify the settings you want to use for the
    chosen properties. For example, if you want to
    specify a color property then the value is the color
    you want for the text in these elements.
    WHERE TO WRITE CSS
    In-line Style Sheet contains CSS
    commends embedded or placed
    inside HTML tags.
    Internal CSS is written in the
    <head> section as a <style> element.

    External CSS is written in a


    separate file saved with a .css
    extension.
    In-line Style Sheet

    < tag style=“property:value;”>

    < p style=“color: blue;”> Paragraphs


    here.</p>
    Internal Style Sheet
    <!DOCTYPE HTML> Any style or
    <html>
    <head> formatting
    <title>Using Internal CSS</title> define within
    <style type="text/css"> the <head>
    body {font-family: Arial;
    background-color:yellow;} section applies
    h1{color: blue;} only to the
    </style> document where
    </head>
    <body> it is defined.
    <h1>Potatoes</h1>
    <p>There are dozens of different
    potato varieties. They are usually
    NO EFFECT ON
    described as early, second early and OTHER HTML
    maincrop.</p> DOCUMENTS
    </body>
    </html>
    External Style Sheet
    <!DOCTYPE HTML> The <link> element tells
    <html> the browser where to
    <head>
    find the CSS file used to
    <title>Using External CSS</title>
    <link href="style.css" type="text/css" style the page. It has 3
    rel="stylesheet" /> attributes.
    </head>
    <body>
    href specifies the path to
    <h1>Potatoes</h1> the CSS file (usually
    <p>There are dozens of different potato saved in a folder called
    varieties. They are usually described as
    css/style.
    early, second early and maincrop.</p>
    </body>
    type specifies the type of
    </html>
    document being linked
    to. The value should be
    Style.css
    body{
    text/css.
    font-family: arial; rel specifies the
    background-color: yellow;}
    relationship between the
    h1 { html file & the file it is
    color: blue;} linked to.
    1. What does CSS stand for?
    2. What are the two sections of a declaration?
    3. Write an example showing a correct syntax for
    a CSS declaration
    4. Enumerate and define the three ways on
    which you can write the CSS.
    5. Which among the three is the most highly
    recommended. Explain why.

    Potrebbero piacerti anche