Skip to content

01_CSS101.md

Latest commit

 

History

History
328 lines (213 loc) · 5.93 KB

01_CSS101.md

File metadata and controls

328 lines (213 loc) · 5.93 KB

CSS Basics



Table of Contents

  • CSS definition methods / selectors / property declaration
  • Pseudo class
  • Media queries
  • Inheritance and priority -> Beware of e-learning errors!

Why CSS (Cascading Style Sheets) ?

  • HTML is for document structuring (Markup)

  • CSS defines styles


CSS Basic Usage

h2 {
 color: blue;
 font-size: 20px;
}
  • h2 => Selector
  • color => Property
  • blue => Value

CSS Definition Methods


  1. In-line Styling

    <div style="color: blue; font-size: 100px;">
   Inline CSS example!
</div>
    • Apply the style attribute directly to the tag

  2. Internal Reference (embedding)

    <head>
    <title> CSS Tutorial </title>
    <style>
        h1 {
          color: blue;
            font-size: 100px;
        }
    </style>
</head>
    • Specified within the <style> tag inside the HTML file

  3. External Reference (link file)

    float.html

    <head>
    <style>
        <link rel="stylesheet" href="float.css">
    </style>
</head>
<body>
    <div id="link_it">CSS sample </div>
</body>

    float.css

    #link_it {
    background-color: black;
    color: white;
}


Which CSS Definition Method is Correct?

image-20200311224751036

  • Using external references can reduce repeated code!


CSS Selector

To style specific elements in an HTML document, the concept of a selector is essential

  • Basic selectors

  • Advanced selectors

    • Descendant selector / Direct child selector
    • Sibling / Adjacent sibling selector, Universal selector

  • Pseudo class

    • link, dynamic pseudo classes

    • Structural pseudo classes

    • Other pseudo classes, pseudo elements


CSS Tip

: Distinguish well between what works vs. what should not be done



CSS Inheritance

  • Among properties, some are inherited and some are not

  • Properties that are Inherited

    • Text-related elements (font, color, text-align, opacity, visibility)

  • Properties that are Not Inherited

    • `Box model related elements (width, height, padding, border, box-sizing, display)
    • position related elements (position, top/right/bottom/left, z-index)

+ CSS Inheritance from MDN

  • In CSS, inheritance controls what happens when no value is specified for a property on an element. Refer to any CSS property definition to see whether a specific property inherits by default ("Inherited: yes") or not ("Inherited: no").

CSS Cascading Order (Priority)

  1. Importance - Use with caution (because it's the most powerful!!)
    • important
      • Used for overriding priority when using externally sourced CSS or JavaScript-based libraries such as vendor, bootstrap, etc. that you did not write
      • Otherwise, it is rarely used (too powerful!)
h3 {
 color: violet !important
}

  1. Specificity

    • in-line / id selector / class selector / attribute selector, Pseudo-class / element selector

  2. Source code order

    • The one defined later has higher priority!!!


Size Units (Relative)

  • px
  • %
  • em
    • Multiplier unit
    • Has a size relative to the size specified on the element
  • rem
    • Has a multiplier unit based on the size of the root element (HTML)
  • viewport-based units
    • vw, vh, vmin, vmax

em vs rem

  • em

    • A multiplier of the size it can have
    • Inherits and applies em to that number
    • When 24px, 1.5em == 36px

  • rem

    • root em

      • Based on the root (browser standard!)

    • The default browser pixel size == 16px

    • 1.5 rem == 24px



Color Units

  • HEX (00~ff)
    • #ffffff
  • RGB (0, 255)
    • rgb(0,0,0)
  • RGBA
    • rgba(0, 0, 0, 0.5)


Box model

Every HTML element has a box model


image-20200312005032601

  • top, bottom, left, right
  • top-bottom / left-right
  • top / left-right / bottom
  • top / right / bottom / left


box-sizing

  • The default box-sizing for all elements is content-box (browser default value)
    • Only the pure content area excluding padding is designated as the box
  • However, when we normally look at an area, we want the width including padding up to the border to be 100px
    • In that case, set box-sizing to border-box!

Tip!

box-sizing: border-box;


Margin Collapsing

: Margins between adjacent sibling elements overlap and appear as one



display inline vs block

  • Distinction between block level elements and inline level elements (only up to HTML 4.1)
  • Representative block level elements
    • div
    • ul / ol / li
    • p
    • hr
    • form
  • Representative inline level elements
    • span
    • a
    • img
    • input, label
    • b, em i, strong

1. display: block

  • Elements that cause line breaks
  • Takes up the full width of the screen
    • By default, takes 100% of the screen width
    • If it cannot have a width, margin is automatically added
    • That's why line breaks occur!
  • Block level elements can contain inline level elements

2. display: inline

  • Part-of-line elements that do not cause line breaks
  • Takes up only as much width as the content
  • Cannot specify width, height, margin-top, margin-bottom
  • Vertical spacing is specified with line-height

3. inline-block

  • Has characteristics of both block and inline level elements
  • Displays on one line like inline
  • Can specify all width, height, margin properties like block

Horizontal Alignment by Property

image-20200312021324363

  • Inline elements can use the text-align property
  • Block elements must be aligned based on margin