Scribd Logo
Fazer o upload

Bem-vindo(a) ao Scribd!

  • Css

    Enviado por

    Emad Elsaid
    107 visualizações16 páginas
    The web beauty Agenda What is CSS? Cascade style sheet language Define your page appearance Organize your website structure Write Process Write Save Refresh in any text editor After every modification your browser Linking with HTML You have to add a tag for each linked file This will apply the appearance to that page our test page We'll use a prewritten test.html page in our session that represent 1 image 3 paragraphs Nested formatting elements Syntax Colors r,g,b: the value of components in Hexadecimal

    Descrição original:

    Direitos autorais

    © Attribution Non-Commercial (BY-NC)

    Formatos disponíveis

    PDF, TXT ou leia online no Scribd

    Você considera este documento útil?

    Este conteúdo é inapropriado?

    Denunciar este documento
    The web beauty Agenda What is CSS? Cascade style sheet language Define your page appearance Organize your website structure Write Process Write Save Refresh in any text editor After every modification your browser Linking with HTML You have to add a tag for each linked file This will apply the appearance to that page our test page We'll use a prewritten test.html page in our session that represent 1 image 3 paragraphs Nested formatting elements Syntax Colors r,g,b: the value of components in Hexadecimal

    Direitos autorais:

    Attribution Non-Commercial (BY-NC)
    Baixe no formato PDF, TXT ou leia online no Scribd
    Sinalizar o conteúdo como inadequado
    107 visualizações16 páginas

    Css

    Enviado por

    Emad Elsaid
    The web beauty Agenda What is CSS? Cascade style sheet language Define your page appearance Organize your website structure Write Process Write Save Refresh in any text editor After every modification your browser Linking with HTML You have to add a tag for each linked file This will apply the appearance to that page our test page We'll use a prewritten test.html page in our session that represent 1 image 3 paragraphs Nested formatting elements Syntax Colors r,g,b: the value of components in Hexadecimal

    Direitos autorais:

    Attribution Non-Commercial (BY-NC)
    Baixe no formato PDF, TXT ou leia online no Scribd
    Sinalizar o conteúdo como inadequado
    de 16

    CSS

    CSS
    The web beauty

    Instructor: Emad Elsaid


    blazeeboy@gmail.com
    http://www.blazeboy.com
    Agenda


    What is CSS? 
    Box model

    Write Process 
    Selectors

    Linking with HTML 
    Rules

    Our test page 
    Font rules

    Syntax 
    Background rules

    Colors 
    Box Rules

    Sizes
    What is CSS?

     Cascade style sheet language


     Define your page appearance
     Organize your website structure
    Write Process

    Write In any text editor

    Save After every modification

    Refresh Your browser


    Linking with HTML

     You have to add a tag for each linked file

    <head>
    <link rel="stylesheet" type="text/css" href="style.css" />

    </head>

     This will apply the appearance to that page


    Our test page

     We'll use a prewritten test.html page in our


    session that represent
     1 image
     3 paragraphs
     Nested formatting elements
    Syntax

     Selector2 {
     Rule1: value;
     Rule2: value;
     }
     Selector2 {
     Rule1: value;
     Rule2: value;
     }
    Colors

     RGB( r , g , b )
     r,g,b: the value of Red,Green,Blue components
     It takes 1 byte each so the value range is 0:255
     Ex: rgb(255,0,0) rgb(0,255,0) rgb(0,255,255)
     #rgb
     r,g,b: the value of components in Hexadecimal
     The values range from 00:FF
     Ex: #FF0000 #00FF00 #00FFFF
    Sizes

     We can use the following units for distance


    measuring
     Absolute: px, cm, mm, in, pt, pc
     Relative: em, ex, %
    Box model
    Selectors

     * : selects all elements


     tag : select all paragraphs
     Ex: p , table, td
     tag1 tag2: select tag2 within tag1
     Ex: table img
     tag1,tag2: select tag1 and tag2
     Ex:
     .class: select any element with class names
    class
     Ex: .para, .even, .odd
    Rules

     Rules are the styling commands of CSS


     Syntax:
     Rule1 : value;
     Rule2: value;
     Types: box, background,border,font,list...etc.
    Font rules

     Font-family: specify the font name


     Font-size: specify font size
     Font-weight: font bold
     Color: specify font color
     Text-align: specify the text alignment
    Background rules

     Background-color: specify the background color


     Background-image: specify background image
     Background-position: the image position
     Background-repeat: the image repeat
    Box rules

     Margin: top,bottom,left,right
     Padding: top,bottom,left,right
     Border: top,bottom,left,right
    Thank You

    Você também pode gostar