search
Machine LearningBook ReviewsGithub

CSS Basics

hashtag
Table of Contents

  • CSS definition methods / selectors / property declaration

  • Pseudo class

  • Media queries

  • Inheritance and priority -> Beware of e-learning errors!

hashtag
Why CSS (Cascading Style Sheets) ?

  • HTML is for document structuring (Markup)

  • CSS defines styles

hashtag
CSS Basic Usage

h2 {
 color: blue;
 font-size: 20px;
}

  • h2 => Selector

  • color => Property

  • blue => Value

hashtag
CSS Definition Methods

  1. In-line Styling

    • Apply the style attribute directly to the tag

  2. Internal Reference (embedding)

    • Specified within the <style> tag inside the HTML file

  3. External Reference (link file)

    float.html

    float.css

hashtag
Which CSS Definition Method is Correct?

  • Using external references can reduce repeated code!

hashtag
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

hashtag
CSS Tip

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

hashtag
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)

hashtag
+ 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").

hashtag
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!)

  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!!!

hashtag
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

hashtag
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

hashtag
Color Units

  • HEX (00~ff)

    • #ffffff

  • RGB (0, 255)

    • rgb(0,0,0)

  • RGBA

    • rgba(0, 0, 0, 0.5)

hashtag
Box model

Every HTML element has a box model

  • top, bottom, left, right

  • top-bottom / left-right

  • top / left-right / bottom

  • top / right / bottom / left

hashtag
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!

hashtag
Margin Collapsing

: Margins between adjacent sibling elements overlap and appear as one

hashtag
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

hashtag
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

hashtag
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

hashtag
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

hashtag
Horizontal Alignment by Property

  • Inline elements can use the text-align property

  • Block elements must be aligned based on margin

PreviousCSSNextCSS Layout

Last updated