JimYuan's Blog

Sharing the things I learned

0%

CSS: The Very Basic

Posted on Edited on

CSS - casading style sheet

What is it?

CSS is a language for describing how documents are presented visually - how they are arranged and styled

What does it stand for?

CSS stands for Cascading Style Sheets.

CSS RULES

  • (almost) everything you do in CSS follows this basic pattern
    1
    2
    3
    selector{
        property: value;
    }

Including Style Correctly

  • Inline Style: You can write your styles directly inline on each element, but this is NOT A GOOD IDEA most of the time.
  • The STYLE element: You can write your style inside of a <style> element. This is easy, but it makes it impossible to share styles between documents. Not recommended either
  • External stylesheet: Write your styles in a .css file, and then include the using a <link> in the head of your html document. Recommended!

Focusing on the third method,

my_styles.css

1
2
3
h2{
    color: indianred;
}

Demo.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <title>Forms Demo</title>
    <link rel="stylesheet" href="my_styles.css">

</head>
<body>
    
    <h2>I am Jim</h2>
    <h2>I am Cool</h2>
    
</body>
</html>

Demo

I am Jim

I am Cool

https://developer.mozilla.org/en-US/docs/Web/CSS/color_value

Color Systems: RGB and Named Colors

https://htmlcolorcodes.com/color-names/
https://htmlcolorcodes.com/color-picker/

A typical computer can display ~16000000 different colors

RGB

  • Red, Green, Blue Channel
  • Each channel ranges from 0-255
1
2
3
4
h2{
    color: teal;
    background-color: rgb(89, 151, 0);
}

Color Systems: Hexadecimal

Hex

  • Still red, green and blue channels
  • Each ranges from 0-255 BUT represented with hexadecimal

Hexadecimal

0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F

1
16*16 = 256

so, the rgb becomes -> #0f5679

Common Text Properties

https://developer.mozilla.org/en-US/docs/Web/CSS/text-align
https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight
https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration
https://developer.mozilla.org/en-US/docs/Web/CSS/line-height

Font Size Basics With Pixels

Relative

  • EM
  • REM
  • VH
  • VW
  • %
  • AND MORE!

Absolute

  • PX
  • PT
  • CM
  • IN
  • MM

PX - BY FAR THE MOST COMMONLY USED ABSOLUTE UNIT

1px does not necessarily equal the width of exactly one pixel!
Not recommended for responsive website

The Font Family Property

https://www.cssfontstack.com/
https://developer.mozilla.org/en-US/docs/Web/CSS/font-family