Scribd Logo
Upload

Welcome to Scribd!

  • 17 views

    Css Basics

    Uploaded by

    rookhum
    This document provides an overview of CSS basics, including selectors, pseudo-classes, the box model, colors, fonts, and units. It discusses simple selectors like element, class, and ID selectors. It also covers pseudo-class selectors, multiple selectors, and how to add styling through inline, internal and external CSS. The document explains the box model concept, how to specify colors in CSS using hexadecimal, RGB, color names and other methods. It also briefly introduces fonts, units and homework involving styling a tribute page with external CSS and creating a card.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd

    Css Basics

    Uploaded by

    rookhum
    17 views25 pages
    This document provides an overview of CSS basics, including selectors, pseudo-classes, the box model, colors, fonts, and units. It discusses simple selectors like element, class, and ID selectors. It also covers pseudo-class selectors, multiple selectors, and how to add styling through inline, internal and external CSS. The document explains the box model concept, how to specify colors in CSS using hexadecimal, RGB, color names and other methods. It also briefly introduces fonts, units and homework involving styling a tribute page with external CSS and creating a card.

    Original Title

    css basics

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    This document provides an overview of CSS basics, including selectors, pseudo-classes, the box model, colors, fonts, and units. It discusses simple selectors like element, class, and ID selectors. It also covers pseudo-class selectors, multiple selectors, and how to add styling through inline, internal and external CSS. The document explains the box model concept, how to specify colors in CSS using hexadecimal, RGB, color names and other methods. It also briefly introduces fonts, units and homework involving styling a tribute page with external CSS and creating a card.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Download as pdf or txt
    17 views25 pages

    Css Basics

    Uploaded by

    rookhum
    This document provides an overview of CSS basics, including selectors, pseudo-classes, the box model, colors, fonts, and units. It discusses simple selectors like element, class, and ID selectors. It also covers pseudo-class selectors, multiple selectors, and how to add styling through inline, internal and external CSS. The document explains the box model concept, how to specify colors in CSS using hexadecimal, RGB, color names and other methods. It also briefly introduces fonts, units and homework involving styling a tribute page with external CSS and creating a card.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Download as pdf or txt
    of 25

    CSS Basics

    Why learn CSS ?


    Selectors in CSS

    1. Simple Selector

    1. Element Selector

    2. Class Selector

    3. ID Selector

    2. Pseudo-class Selector

    3. Multiple Selector
    Element Selector

    • CSS can select HTML elements by using an element’s tag name. A tag name is the word (or character)
    between HTML angle brackets.
    Class Selector

    • CSS is not limited to selecting elements by tag name. HTML elements can have more than just a tag name;
    they can also have attributes. One common attribute is the class attribute. It’s also possible to select an
    element by its class attribute.

    • To select an HTML element by its class using CSS, a period (.) must be prepended to the class’s name.
    ID Selector

    • For situations where you need more speci city in styling, you may also select elements for CSS using an id
    attribute. You can have di erent ids associated with a class (although a class is not required).

    • The id attribute can be added to an element, along with a class attribute. On the CSS side, the delineation
    is made by using # to represent an id, the same way . is used for class.
    ff
    fi
    Pseudo-classes Selector

    • A CSS pseudo-class is a keyword added to a selector that speci es a special state of the selected
    element(s). For example, :hover can be used to change a button's color when the user's pointer hovers
    over it.

    fi
    Multiple Selector

    • What if we want to add some styles to all our headings? We don’t want to have redundant rules, since that
    would eventually become a nightmare to maintain and is not scalable at all.

    • Instead, we can select multiple HTML elements in the same CSS rule by separating them with commas.
    • Copying and pasting code is usually a bad idea for web developers, and multiple selectors can help reduce
    that kind of behavior quite a bit.
    Explore time:

    • Universal Selector
    • Nested Selector
    • Attribute Selector
    How to add Styling to HTML?

    • Inline
    • Internal
    • External
    Inline CSS

    • To style an HTML element, you can add the style attribute directly to the opening tag. After you add the
    attribute, you can set it equal to the CSS style(s) you’d like applied to that element.

    • Inline styles should be avoided at all costs because they make it impossible to alter styles from an external
    stylesheet.

    • That said, there will be many times when you need to apply styles to only a speci c HTML element. For
    this, you should always use CSS classes instead of inline styles.

    fi
    Internal CSS / Style Tag

    • Inline styles are a fast way of styling HTML, but they also have limitations. If you wanted to style, for
    example, multiple <h1> elements, you would have to add inline styling to each element manually. In
    addition, you would also have to maintain the HTML code when additional <h1> elements are added.

    • Fortunately, HTML allows you to write CSS code in its own dedicated section with the <style> element.
    CSS can be written between opening and closing <style> tags. To use the <style> element, it must be
    placed inside of the <head> element.
    External CSS

    • When HTML and CSS code are in separate les, the


    les must be linked. Otherwise, the HTML le won’t
    be able to locate the CSS code, and the styling will
    not be applied.

    • You can use the <link> element to link HTML and


    CSS les together. The <link> element must be
    placed within the head of the HTML le.
    fi
    fi
    fi
    fi
    fi
    Specificity

    • Because elements can have multiple CSS selectors, there is a hierarchy for the weight given
    to each type of selector. Here is the logical order of selectors from least to most weight
    assigned:

    • Type selectors (e.g., h1) and pseudo-elements (e.g., ::before).


    • Class selectors (e.g., .example), attributes selectors (e.g., [type="radio"]) and pseudo-
    classes (e.g., :hover).

    • ID selectors (e.g., #example).


    Box Model in CSS

    • The box model is the basic building block of


    CSS.

    • According to the box model concept, every


    element on a page is a rectangular box and may
    have width, height, padding, borders, and
    margins.
    Colors in CSS

    • Colors in CSS can be speci ed by the following methods:


    • Hexadecimal colors
    • RGB colors
    • Prede ned/Cross-browser color names
    • RGBA colors
    • HSL colors
    • HSLA colors
    fi
    fi
    Hexadecimal Colors

    • A hexadecimal color is speci ed with: #RRGGBB, where the RR (red), GG (green) and BB (blue)
    hexadecimal integers specify the components of the color. All values must be between 00 and FF.

    • For example, the #0000 value is rendered as blue, because the blue component is set to its highest value
    ( ) and the others are set to 00.
    ff
    ff
    fi
    RGB Colors

    • An RGB color value is speci ed with the rgb() function, which has the following syntax: rgb(red, green, blue)
    • Each parameter (red, green, and blue) de nes the intensity of the color and can be an integer between 0
    and 255 or a percentage value (from 0% to 100%).

    • For example, the rgb(0,0,255) value is rendered as blue, because the blue parameter is set to its highest
    value (255) and the others are set to 0.
    fi
    fi
    Predefined/Cross-browser Color Names

    • 140 color names are prede ned in the HTML and CSS color speci cation.
    fi
    fi
    Explore Time:

    • Font:
    • Font-family
    • Font-weight
    • Font-style
    • Emphasis & Importance
    • How to add External Fonts ?
    Units in CSS

    1. Absolute unit

    2. Percentage unit

    3. Relative unit

    1. Relative to font size

    2. Related to Document
    Absolute Unit

    • mm
    • cm
    • in
    • px
    Percentage Unit

    • div { width:10%; }
    Relative Unit to Font size

    • em
    • rem
    Relative Unit to ViewPort

    • vw
    • vh
    Homework

    • Style Tribute page using External CSS.


    • Can you create a card like this?

    You might also like