Overview

  • Learn to style a button
  • Part I

Color Rules in CSS

                    
                        button {
                            background-color: red;
                            border: 2px solid black;
                            color: greenyellow;
                            text-align: center;    
                            font-size: 16px;
                        }
                    
                

Color Basics

  • Some colors can be picked by name: green
  • Or colors are made of shades of Red, Green and Blue
    • As Hex number from 0 to FF: #00FF00
    • On a scale from 0 to 255: rgb(0,255, 0)
  • Picked by Hue, Saturation and Lightness
    • hsl(25, 100%, 50%)
  • In some case we can add opacity to make them semi-transparent

Five Ways to Specify a Color

  • color: skyblue;
  • color: rgb(135, 206, 235)
  • color: #87CEEB
  • color: hsl(197, 71%, 73%)
  • color: rgba(0,125,255, 0.5)
  • color: hsla(40, 100%, 25%, 0.5)

Color Pickers

color

  • The color of the font
  • Used by other properties such as border-color
  • There are at least five ways to define the color
  • Example: color: green;

background-color

  • Like color, but for the background
  • Use hex, rgb, hsl, etc
  • MDN
  • W3Schools

border

  • border-width
    • thin
    • medium
    • thick
    • 2px
  • border-color: some color like rgb(255,0,0)
  • border-style: See it on MDN
  • Or put them all together in the border shorthand
    • border: thin single #00FF00

Border Style

border-style:

  • solid double dashed dotted
  • none
  • hidden
  • groove
  • ridge
  • inset outset
  • initial inherit

text-align

  • left, right, center
  • justify: space out letters to provide even margins
  • There are also some experimental properties

font-size

  • Sets the size of the font: MDN, W3Schools
  • Also affects em, ex and others.
  • small, medium, large
  • xx-small, x-small
  • x-large, xx-large
  • Can use px, em or percent
    • font-size: 12px
    • font-size: 2em
    • font-size: 120%