Scribd Logo
Carica

Benvenuto in Scribd!

  • Parameters) " : Style Red

    Caricato da

    Sheriti
    13 visualizzazioni2 pagine
    Notes on CSS part 1

    Titolo originale

    CSS 1

    Copyright

    © © All Rights Reserved

    Formati disponibili

    ODT, PDF, TXT o leggi online da Scribd

    Hai trovato utile questo documento?

    Questo contenuto è inappropriato?

    Segnala questo documento
    Notes on CSS part 1

    Copyright:

    © All Rights Reserved
    Scarica in formato ODT, PDF, TXT o leggi online su Scribd
    Segnala contenuti inappropriati
    13 visualizzazioni2 pagine

    Parameters) " : Style Red

    Caricato da

    Sheriti
    Notes on CSS part 1

    Copyright:

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

    I’ll teach you basic CSS in this comment.

    Basic inline syntax (in your HTML document):


    <div style=”[style-function]: [style-parameters]; [style-function]: [style-
    parameters];” > </div>
    The bold text is CSS. All the possible CSS [style-fuctions] and what [style-
    parameters] they can have, can be found here. This is called inline CSS. Inline CSS
    takes priority over any other CSS definitions. This is the type of CSS you want to
    use in emails, in emergency cases… or when you are paid shit money to make lots
    of fixes. For example:
    <div style=”background: red;”></div>

    Will make the background colour of the <div> box red. CSS also
    takes HEX and rgb , rgba, hsl & hwb(rarley used) color values as well
    as cmyk for all you printers.
    <div style=”background: #FF0000;”></div>

    #FF0000 = red = rgb(255,00,000) = rgba(255,000,000,1) = hsl(0, 100%, 50%) =


    cmyk(0%, 100%, 100%, 0%)
    More colors here.
    However, most CSS you will find in a separate file called usually style.css, that is
    linked to your main .html file via <link>. These style.css files are links via the
    following HTML tag located always inbetween your <head></head> sections of
    your .html file(s), like so:
    <link rel="stylesheet" type="text/css" href = "style.css" />

    These looks similar and like so:


    .style1 {[style-function]: [style-parameters]; }

    The dot before the word style1 indicates that this is a style class that can be
    applied to any html element like so:
    <div class=”style1″></div>

    The things between the { } brackets, indicate what should be done with that
    given style class. It’s in essence identical to what you can put in the inline CSS
    style.
    If there is no dot ( . ) then the parameters will be applied to any html element with
    that name. Example:
    div {background: rgb(000,255,000); }

    The above will make all <div> elements have a green background.
    Bravo! You have learned Style Sheets so far (CSS without the Cascading). Now
    lets learn what the Cascading bit stands for.
    The following CSS code:
    .style1 span {background: rgb(000,000,255); }
    Will apply to all <div> elements inside a .style1 HTML element within your HTML
    document. So in your HTML structure the following <span> will have a blue
    background:
    <h1 class=”style1″><span></span></h1>

    And so will this one:


    <div class=”style1″><h1><span></span></h1></div>

    That’s because the <span> HTML element is still nested within the <div
    class=”style1″> element.
    You’re catching on? Good… very goooooood. Now its time for some Pseudo
    classes and pseudo elements.
    A pseudo class in your .css file is applied after a double dot (:) (and it can’t be
    applied in inline CSS). It looks like so:
    .style1:hover {font-size: 25px; }

    Pseudo classes allow to target various states that HTML elements can have. The
    above CSS code will kick in when a cursor moves over a HTML element that
    has .style1 applied to it, and change the font size to 25 pixels (px).
    More on other pseudo classes here.
    A Pseudo element is applied after 2x double dots ( :: ). These allow to target
    specific elements within HTML. For example:
    .style1::first-letter {font-family: arial; }

    The above CSS code will apply just to the first letter only in the .style1 HTML
    element, an Arial font type.
    More Pseudo class elements can be found here.
    If you got this far, you should pass tomorrows exam with a D- now. The last bit to
    learn are media specific classes. These kick in whenever a specific media type is
    displayed or whenever a specific browser resolution is present. This is the core of
    mobile responsive sites. An example of a CSS media queries looks like so:
    @media screen and (min-width: 995px) { .style1 { background: red; }}

    You can see that there is some strange @media shit before the regular css class.
    the @media bit specifies what classes should be applied when the screen size is
    minimum 995px in width. This is extremely useful when designing mobile
    responsive site as it allows to remake the whole HTML display if needed to suite a
    particular resolution. More on that jazz here.
    That’s the basics. I hope i got the point across. Now I’m going back to suck on my
    beer.

    Potrebbero piacerti anche