Scribd Logo
Cargar

¡Te damos la bienvenida a Scribd!

  • Css Walk Through

    Cargado por

    Will Kurlinkus
    668 vistas4 páginas
    Div elements are incredibly important elements that you can create and label your site with. Ids are generally used for elements that won't be repeated in a single page. Classes are used for things like images that will be repeated multiple times.

    Descripción original:

    Derechos de autor

    © © All Rights Reserved

    Formatos disponibles

    PDF, TXT o lea en línea desde Scribd

    ¿Le pareció útil este documento?

    ¿Este contenido es inapropiado?

    Denunciar este documento
    Div elements are incredibly important elements that you can create and label your site with. Ids are generally used for elements that won't be repeated in a single page. Classes are used for things like images that will be repeated multiple times.

    Copyright:

    © All Rights Reserved
    Descargue como PDF, TXT o lea en línea desde Scribd
    Marcar por contenido inapropiado
    668 vistas4 páginas

    Css Walk Through

    Cargado por

    Will Kurlinkus
    Div elements are incredibly important elements that you can create and label your site with. Ids are generally used for elements that won't be repeated in a single page. Classes are used for things like images that will be repeated multiple times.

    Copyright:

    © All Rights Reserved
    Descargue como PDF, TXT o lea en línea desde Scribd
    Marcar por contenido inapropiado
    de 4

    Dr.

    Will Kurlinkus

    [ E n g l i s h 3 1 5 3 ] h t t p : / / w w w . w 3 s c h o o l s . c o m / h t m l / d e f a u l t . a s p


    CSS Walkthrough
    CSS WALK
    page 2



    Labeling Chunks of Content With Divs
    Last time we skipped over the concept of Divs, so lets begin with those. Div
    elements are incredibly important elements that you can create and label your site
    with for easier CSS styling later. They generally divide up sections (divisions=divs) of
    a website. For instance, you might have div elements called Header, Navigation,
    Content, and Footer. Such divisions make the site easier to read in the markup
    version but also easier to style because by creating sections you can tell the browser
    to style all the paragraphs in one div one way and in another section another way
    (see descendent selectors in the CSS Intro document).
    Two key types of divs that well use are ids and classes. Ids are generally used for
    elements that wont be repeated in a single pagereally big sections, etc.,
    whereas classes are used for things like images that will be repeated multiple times.
    o Example Div: <div id=whatever division label you want to makeup>All the
    information of this section goes inside this div tag</div>
    Add the following 5 div ids to your HTML: a div for your entire site wholesite that
    all your other html goes in; a div for your title that your h1 goes in; a div for a
    navigation bar (nothing in this yet); a div for your content that all your text besides
    the title and navbar goes in; and a div surrounding your videos.

    Creating and Linking Up a CSS File
    Open your html document in both TextEdit and in browser view mode.
    Create a CSS File: File>>New>>File>>SaveAs>>[Name your css document without
    spaces or characters and end it in .css]>>Make sure you save it in your website
    folder.
    In the <head></head> section of your html document write:
    <link rel="stylesheet" href="the name of your css file.css" type="text/css">
    Set all your margins, etc. in your CSS file to default by writing this at the top of your
    CSS doc: body, h1, h2, h3, h4, p, div, ul, li {margin: 0; padding: 0;}

    CSS WALK
    page 3





    Create a background color for the entire page:
    In your css file type:

    body {background-color: blue;}
    o If you want to choose a different background color, go to:
    <http://www.w3schools.com/cssref/css_colornames.asp>.

    Creating CSS for Our Divs

    Add these CSS rules to your css sheet. In these text boxes Ill describe what they do.
    Refer to the CSS Intro for basic description of their parts.

    #wholesite {
    background-color: grey;
    width: 95%;
    height: 100%;
    max-width: 930px;
    margin: 0 auto;
    }

    #title {
    width: 100%;
    font-family: Verdana, sans-serif;
    font-size: 30px;
    color: black;
    padding-top: 2%;
    padding-bottom: 1%;
    padding-left: 2%
    }

    figureright{
    float: right;
    margin: 10px 10px 5px 5px;
    padding-right: 2%;
    }

    figureright img{
    The selector for Div ids is a poundsign# and then the name of your id.
    This specific div is creating a big centered box for the entire site. I set
    the width and height in percentages so that is will be a fluid layout and
    shrink and expand depending on monitor size. I set a max size in pixels,
    however, because if a monitor gets to big, the elements of the site will
    appear oddly spaced. The margin setting is what centers the box on the
    page.
    These two figure selectors are formatting my images. The
    float property sends whatever is labeled with it to the right or
    left side of the div it is inside of. So, for instance, if you label
    your photo with this figure right html tag, it should send the
    photo to the right side of the content div.
    The percentage of width in your CSS refers to the percentage
    Of whatever div that other div is inside of. So, for instance, while
    While the whole site div above is referring to the percentage of
    The entire browser window. The title div here is referring to
    The percentage of the wholesite div, not the entire screen.
    CSS WALK
    page 4



    border: 1px solid #666;
    background-color: #CCC;
    padding: 10px;
    box-shadow: 2px 2px 2px #888888;
    }

    #content {
    background-color: white;
    width: 95%;
    height: 100%;
    max-width: 930px;
    margin: 0 auto;
    }

    #videos
    {
    float: right;
    margin-right: 3%
    }

    ul.biocontent
    {
    float: right;
    width: 50%;
    background: white;
    padding: 4%;
    margin-top: 11px;
    }

    Adding a Navigation Bar
    http://css.maxdesign.com.au/listutorial/horizontal_introduction.htm


    This is a descendent selector; it is telling the browser to style
    All images inside of a figureright tag in a certain way. Note the
    Box-shadow selector, a fancy CSS3 selector that adds a
    Shadow around things.
    Like the figureright img compound selector above, this
    selector is telling the browser to style every unordered list
    with the class of biocontent in a certain way. To move
    around this content well be using floats, width
    adjustments, and margin and padding.

    También podría gustarte