Scribd Logo
Carica

Benvenuto in Scribd!

  • Codecademy Course - HTML & CSS

    Caricato da

    Claudiu Nadrag
    71 visualizzazioni4 pagine
    codecademy html & css course

    Copyright

    © © All Rights Reserved

    Formati disponibili

    TXT, PDF, TXT o leggi online da Scribd

    Hai trovato utile questo documento?

    Questo contenuto è inappropriato?

    Segnala questo documento
    codecademy html & css course

    Copyright:

    © All Rights Reserved
    Scarica in formato TXT, PDF, TXT o leggi online su Scribd
    Segnala contenuti inappropriati
    71 visualizzazioni4 pagine

    Codecademy Course - HTML & CSS

    Caricato da

    Claudiu Nadrag
    codecademy html & css course

    Copyright:

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

    HTML

    Rules
    * Always put <!DOCTYPE html> on the first line.
    * Always put <html> on the next line.
    * Always put </html> on the last line.
    * The tag <!--text--> adds a comment.
    Text
    * The tag <strong> </strong> or <b> </b> makes text bold.
    * The tag <em> </em> or <i> </i> makes text italic.
    Head
    * The tag <title> </title> adds the webpage title.
    Body
    * The tag <p> </p> makes a new paragraph.
    * The tag <h#> </h> makes a new heading. # is a number between 1 and 6.
    * style= All styles are differentiated with a semicolon.
    This tag can also be applied to tables.
    "font-size: #px/em" is how you change the font size. # can be any nu
    mber. px is for pixels, em is for default font size.
    "color: x" is how you change the text color. x is a X11 col
    or or a hexadecimal code. https://www.w3.org/TR/css3-color/#svg-color
    "font-family: x" is how you change the font. x is a font. https:/
    /www.w3.org/TR/CSS21/fonts.html#generic-font-families
    If the user's computer does not have that font,
    it will try the next one you write, like so:
    "font-family: x, y, z"
    "background-color: x" is how you change the background color. x is a X
    11 color or a hexadecimal code.
    "text-align: x" is how you align the text. x can be left/right/c
    enter. This code is not for HTML objects, only for text.
    * The tag <img src="link"/> is how you show a picture.
    * The tag <a href="link">description</a> is how you make a hyperlink. The de
    scription can be a picture.
    * The tag <ol> </ol> makes an ordered list.
    * The tag <ul> </ul> makes an unordered list.
    * The tag <li> </li> adds items to the list.
    * The tag <table> </table> is how you create a table.
    * The tag <tr> </tr> adds a table row.
    * The tag <table border="#px/em"> creates a border around the table. # can be an
    y number. px is pixels, em is default font size.
    * Tables also have heads and bodies, just like the HTML page.
    The tags are <thead> </thead> and <tbody> </tbody>.
    * The tag <th> </th> adds table data to the head.
    * The tag <td> </td> adds table data to the body.
    * The tag <th colspan=#>description</th> makes the table cell take up multiple c
    olumns. # can be any number.
    * The tag <div> </div> allows you to divide your page into different pieces, in
    order to style different parts of the website individually.
    * The tag <span> </span> allows you to control styling for smaller parts of your
    page, such as text.

    CSS
    /*text*/ is the comment tag.
    x { x = selector y = property z = value
    y: z; This code makes all x from HTML have a style tag
    (y: z) without needing to rewrite it over and over again.
    } You can also write this code in the head of the
    HTML file, using the <style> </style> tags.
    In order to make sure your HTML file can see CSS information, you need to add a
    link to it in the head tag:
    <link type="text/css" rel="stylesheet" href="x"/> where x is the web addre
    ss of your CSS file.
    Always end each property-value with a semi-colon. That's how CSS knows you're do
    ne with one pair and ready for the next.
    selector {
    border: x y z; Many HTML elements support the border property.
    It also supports multiple values.
    } Any HTML element can be a CSS selector.
    border-style: x x can be dashed, solid, dotted, etc.
    border-width/height: x sets how thick the border is.
    border-radius: x% this property modifies the corners of HTML objec
    ts; it's how you get rounded buttons.
    border-color: x sets the border color. X11 color or hexadecimal
    code.
    margin: auto This tells CSS to use equal margins on each side
    of the HTML element. When the margins are equal, the object is centered.
    text-align: x This is mentioned earlier in HTML styling; margi
    n is for elements, text-align is for text.
    font-size: #
    font-weight: bold
    text-decoration: underline
    Links have a property called text-decoration
    The "a" selector can be changed in CSS to modify how links look.
    It's possible to nest multiple HTML elements inside one another, like so:
    <x>
    <y>
    <z>whatever</z>
    If you want to grab all Zs that are inside X Y, you select those in CSS like thi
    s:
    x y z {
    CSS code
    }
    If you want to grab elements directly nested inside another element, with nothin
    g in between:
    x > y {
    CSS code
    }

    * is an universal selector. It's used to apply CSS styling to EVERY element on t


    he page.
    Classes are applied in HTML with the tag: Classes are identified i
    n CSS with a dot as a selector: <-- used for styling certain ele
    ments.
    class="x" .x
    IDs are applied in HTML with the tag: IDs are identified in CS
    S with a pound sign as a selector: <-- used for styling ONE element
    .
    id="x" #x
    Pseudo-class selectors let us control the appearance of a link that is being hov
    ered on, or if it has been clicked or not:
    selector:pseudo-class_selector {
    property: value; It's just that little extra colo
    n.
    }
    Pseudo-class selectors for links: a:link a:visited
    a:hover
    unvisited visited
    hovering mouse over
    x:first-child This pseudo-class selector appli
    es styling only to the first children of the selector.
    x:nth-child(#) This pseudo-class selector works
    like the one above except you're able to select the child's number in parenthes
    es. # can also be even or odd.
    display:x x can be: block makes the elemen
    t a block box. It won't let anything sit next to it on the page, as it takes up
    the full width.
    inline-block makes the elemen
    t a block box, but will allow other elements to sit on the same line.
    inline makes the elemen
    t sit on the same line as another element, but without formatting it like a bloc
    k.
    that means it on
    ly takes up as much width as it needs (not the whole line)
    none this makes the e
    lement and its content disappear from the page entirely
    margin = space around the element; adjustable in order to move HTML elements clo
    ser to or farther from each other
    border = edge of the element; it's what you make visible using the border proper
    ty
    padding = spacing between content and border; adjustable with CSS
    content = the actual stuff; if we're talking about a <p> element, the stuff is t
    he text of the paragraph
    x-y: value x can be margin, border, padding or content
    y can be top, bottom, left or right to center l-r, set the value to
    auto
    values can also be negative, in order to move th
    em in that direction
    You can also set them all at once with x: a b c
    d; abcd goes clockwise (top right bottom left)
    If you want them to be equal on all sides, you c
    an just use x: value
    float: x x can be top, bottom, left or right
    moves an element in a direction on the page where it won't put it on top of some
    thing else.
    element {
    clear: right/left/both This moves below any floating elements o
    n that side of the page; it gets out of the way of floating elements.
    }
    position: static This just plonks down the element where it would
    normally go.
    position: absolute This positions it in relation to the first paren
    t element it has that doesn't have position:static
    If no such element, it positions it relative to
    <html>
    position: relative This positions the element relative to where it
    would have landed if it were static
    aka it doesn't move from any particular thing, i
    t moves from where it otherwise would have been
    position: fixed Think of this as gluing the element to the scree
    n. It will stay fixed even as you scroll the page around.
    z-index: value The higher the number, the higher the priority o
    ver other elements. This makes it stay on top of others.

    Potrebbero piacerti anche