Scribd Logo
Upload

Welcome to Scribd!

  • I - Referencing CSS: A - External CSS 1 - Link Tag

    Uploaded by

    ktertoom
    20 views33 pages

    Original Title

    Untitled

    Copyright

    © © All Rights Reserved

    Available Formats

    ODT, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document

    Copyright:

    © All Rights Reserved
    Download as ODT, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    20 views33 pages

    I - Referencing CSS: A - External CSS 1 - Link Tag

    Uploaded by

    ktertoom

    Copyright:

    © All Rights Reserved
    Download as ODT, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 33

    I – Referencing CSS

    A - External CSS

    1 – Link tag

    <head>
    <link rel=’’stylesheet’’ href=’’css/styles.css’’>
    </head>

    2 – Import
    In ccs file
    @import url(‘/styles/layout.css’) ;
    @import url(‘/styles/typography.css’) ;
    @import url(‘/styles/buttons.css’) ;

    Index.html
    <head>
    <style>
    @import url(‘’css/styles.css’’) ;
    </style>
    </head>
    Downside of using umport : Slowing down your page speed.
    Import does not allow for parallel downloads meaning the page need to load the entire
    stylesheed before it load the res of the page.

    Import is style commonly used in CSS Preprocessors such as SASS or LESS or


    when CSS files are compiled into one file before loading it into the page.

    3 – Inline CSS

    <p style=’’color:red ;’’> Red paragraph.</p> 

    Downside : Hard to read and potential duplicated code

    4 – Internal CSS

    <head>
    <style>
    H1{
    color:green;
    }
    H2{
    color:blue;
    }
    </style>
    </head>
    Downside : multiple html document will need to copy the css into each file.
    II – Approach

    Before adding css. put your content , is better to have as much content as possible because it gives
    you context.

    III – Images

    https://www.shopify.com/blog/7412852-10-must-know-image-optimization-tips

    Retina Display

    - Trademarked term by apple


    - Retina = high pixel density
    - over 300 pixel humain can’t make difference
    - retina display = 326 pixels per inch

    High pixel density screen

    - Refers to the number of pixels within a space


    - Measured in pixels per inch (PPI) or dots per inch (DPI)

    IV – Values and units

    Absolute

    - Fixed unit, always the same size


    - Not affected by values in related elements
    - Example : px, cm , mm, pt

    Relative

    - Relational sizing, not fixed


    - Dependent upon values declared in parent and ancestor elements
    - Example : em,rem,vm,vh

    Unitless Values

    - Some numeric values do not require a unit


    line-height: 1.25;
    margin: 0px 2px;
    * same as *
    margin: 0 2px;
    Selectors
    Type selectors

    - The most basic kind of selector, sumple matching pattern


    Matches to ALL <h1> elements
    H1 {...}
    Universal Selector

    Apllies a border to all elements


    *{
    Border: 1px solid black;
    }

    Class selector

    ID selector

    Nested Elements and the DOM

    Grouping Selectors
    Inheritance
    All property are not inherited. Check W3C property list to check out which one does.

    Specificity and Precedent

    1. Universal (*)
    2. type (p)
    3. class (.example)
    4. id (#example)

    Pseudo-class selectors and links

    a:visited {
    /* color: gray; */
    }
    a:focus {
    outline: 1px solid black;
    }
    a:hover {
    background: gray;
    }
    a:active {
    /* color: white; */
    }

    HTML Elements
    2 types of HTML elements: inline and block-level

    Inline

    - Takes up the same space as their content

    - Elements are displayed in a line, from the left

    - Elements will only wrap when items cannot fit

    Block

    - Same height as content, same width as container


    - Always starts on a new line

    The Box Model


    Padding

    Border

    Margin
    Line return
    Content Wrapper

    Typography

    Times New Roman : Legal document

    Comic Sans: Casual Font childlike

    5 categories of typefaces

    Script, Decorative, Monospace, Serif, Sans-serif

    Scripts
    Hand lettered look, greeting cards, in web headlines or small decorative text details

    Decorative

    Ornamental, headings and decorative details

    Monospace

    Each character uses the same amount of horizontal space, often used for displaying code

    Serif

    Distinguished by small decorative lines, tend to be viewed as traditional and formal

    Sans-serif

    Do no have decorative lines, contemporary and modern

    font-family
    font-weight
    - normal is equal to 44 and is also the default for body text*
    - bold is equal to 700 and is the default for headings

    @font-face
    font-size
    text-decoration
    Flexbox and Grid
    flex-
    direction
    flex-direction

    flex-wrap
    flex-grow

    flex-shrink
    flex-alignment
    css grid

    - When using the value of grid the items will span the width of its container.
    - When using the value of inline-grid the items will span the width of its content.

    Grid Lines
    Grid Cell

    Gid tracks and gutters


    The fraction Unit : fr
    Adding Gutters with gap
    Explicit vs Implicit grid

    Defining the grid structure

    Positioning grid-items
    Advanced selectors

    Descendant Selectors

    Child combinator

    Sibling Combinators
    Adjacent Sibling combinators

    General sibling combinator

    first-child and last-child


    first-of-type and last-of-type

    Responsive

    Images

    You might also like