CSS Basics

Meet the C&C #LadyDevs

Amy Norris

Amy Norris


Alex Herron

Alex Herron


Lulu Coa

Lulu Coa

Curriculum Director

Gabi Dombrowski

Gabi Dombrowski

Mentor Director

Kim Watt

Kim Watt

Marketing Director

Vanessa Shultz

Vanessa Shultz

Presentation Director



Technical Materials Director

Our Host this Evening

Dimensional Innovations



Behind the wooden wall in the kitchen


Drink Served

Laura Kozak

Laura Kozak

Join us on...


Carolyn Westhoff





Our mentors


are super heroes!

Before We Get Started...

This stuff is a challenge!

Don’t be discouraged if you don’t finish each worksheet section before the next presentation section begins.

We cover a lot of difficult material that will take time to understand. We are here (and on Slack after the session) to help!

Tonight's Agenda:

  • Getting Started

  • Selectors

  • Property/Value Pairs

  • Box Model & Layout

  • Extending Beyond Basic CSS

First, we drink!

girls drinking

Getting Started

CSS Basics

What Is CSS?

  • Cascading Style Sheets

  • Controls how elements:

    • Look

    • Are positioned

CSS Controls How Elements Look

  • Font, color, size of HTML elements

CSS Controls Layout

  • Text alignment

  • Placement of elements

Why Do We Care About CSS?

  • Makes your webpages look pretty!

  • Default styling vs. styled page

bbc no css vs css

Awesome Stuff Done Through CSS

Wolf animation
Circus Animation

How To Include CSS in Your Project

  • Inline on element

  • Internal to HTML files by adding style tag in head

  • External CSS file

External CSS File

  • .css file extension

  • Follow front-end architecture best practices:

    • CSS files in folder for styles

Linking HTML & CSS File

  • Link to CSS file in HTML head section

  • <link rel="stylesheet" href="../styles/styles.css" />
  • <link> tag links external file (our stylesheet)

  • rel attribute describes the relationship between the current and linked file to the browser (in this case, styles)

  • href attribute tells browser the location of the file

Note about CSS files:

  • Possible to have multiple style files for your project

  • Possible to link multiple style files to one HTML file

  • We will only use one style file in this session

How to Write CSS

  • Define a style for a selector

  • Looks like this:

  • selector {
        property: value;

  • Property: color property
  • Value: red value


  • How you target the HTML to style

  • Element selector

  • Class selector

Element Selector

  • Selects all elements of a given type

  • Example: h1 selector

  • Selects and styles all h1 elements

  • Good for base styles

Element Selector Example


<h1>Hello World</h1>


h1 {
    color: rebeccapurple;

Hello World

Class Selector

  • Styles HTML elements with matching attribute name

  • Classname can be used multiple times on one page (and multiple pages)

  • Good for styling specific elements

Class Selector Example


<h1 class="cocktail">Cosmopolitan</h1>


.cocktail {
    color: rebeccapurple;


Semantic Class Names

  • Choose a name that describes what the HTML element is, not how it looks or behaves

Why are Semantic Class Names Important?

  • Provide clearer meaning

  • Responsive websites may change how element looks

  • .white-nav makes sense in desktop but not when blue in mobile
Awkward look


  • NOT displayed in the browser

  • Can be used to explain code

  • Can be used to prevent execution of code


/* This is a comment in CSS */

Last Note about Comments

  • Place your cursor on the line(s) you wish to comment out

  • Mac: CMD + /

  • PC: CTRL + SHIFT + /

Work Time

Presentation: https://bit.ly/kcwit-cc-css

Worksheet: https://bit.ly/kcwit-cc-worksheet

cat typing


battle selectors

Selector Simple Recap

    selector {
        property: value;

  • Property: color property
  • Value: red value

Grouping Selectors

  • Way to apply the same style to multiple elements

  • Separate each selector with a comma

Two Ways to Group Selectors

  • Multiple Selectors for more generalized styles

  • Combining Selectors for more specific styles

Multiple Selectors

  • Used to apply the same style to multiple elements for broader styling

  • Separate each selector with a comma

Multiple Selectors Example

Goal: Make all headers "wild strawberry"

h1, h2, h3, h4, h5, h6 {
    color: #ff43a4;






Combining Selectors

  • Allows you to apply styles more specifically

  • Notice no space between HTML element and class

Combining Selectors Example

Goal: Make paragraph text with class of learning "seagreen"

p {
    color: #fff;

p.learning {
    color: #20b2aa;

Recap of Types of Selectors Thus Far

  • Element Selector

  • Class Selector

  • Multiple Selector

  • Combining Selector

Attribute Selectors

  • Special HTML element attribute for styling

  • Allows for even more specifically in styling

  • Have different syntax of [ ]

Attribute Selectors Example


<a href="https://www.kcwit.org">KCWIT</a>


a[href="https://www.kcwit.org"] {
    color: #20b2aa;

Location-based Selectors

  • Selects elements based on their location in the HTML document

  • Examples: :first-child, :last-child, :nth-child()

Location-based Selectors

What Do We Mean By Location?

  • Browser turns HTML into the DOM

  • Specify a selector based on where the HTML is

  • Examples: House address

Location-based Selectors: Relationship

  • Directions: Instead of north & south, use relationships (like a family tree)

  • Relationships: child, parent, sibling, descendant, ancestor

Location-based Selectors: Relationship

  • Child: Direct descendant

  • Parent: Direct ancestor

  • Sibling: Same parent

  • Descendant: Any descendant

  • Ancestor: Any ancestor

Location-based Selectors

    <em>Most important item</em>
    Second most important item
li em {
    color: lime;

  • Most important item
  • Second most important item

A Closer Look at the CSS

li em {
    color: lime;

  • Space means: "select all em elements that has li as an ancestor"


  • Fancy word meaning to combine selectors

  • Combining selectors allow us to apply styles as broadly or as specifically as we need

  • There are three combinators:
    • Descendant
    • Child
    • Adjacent sibling

Descendant combinator

  • Has space between two selectors

  • Our example before had a path ul li em

  • With the descendant combinator, we can say:
ul em {
    color: lime;

Child combinator

  • Must be an exact child path

  • Has > between two selectors

  • With the child combinator, we can say:
li > em {
    color: lime;
<!-- This path does not exist -->
ul > em {
    color: lime;

Adjacent sibling combinator

  • Must be an exact sibling path
  • Can be dissimilar elements (such as h1 + p)
  • Has + between two selectors
  • Applies color of lime to the second item on the list
  • li following a sibling li
li + li {
    color: lime;

State-based Selectors

  • Allows us to style elements based on their state

  • Also called pseudo-class selectors

  • Syntax is a single colon: selector:state

State-based Selectors

  • :hover

  • :active

  • :focus

  • :visited

State-based Selectors Example

button:hover {
    color: lime;

a:visited {
    color: red;

Work Time

Presentation: https://bit.ly/kcwit-cc-css

Worksheet: https://bit.ly/kcwit-cc-worksheet

cat typing

Property-Value Pair

CSS Basics

Basic Properties & Their Values

  • Units of Measurement

  • Color

  • Properties

Units of Measurement

  • Absolute

  • Relative


  • pixels [px]

  • There are other absolute units, but they aren't common


  • Percent [%]

  • rem / em

  • vh / vw

Percent [%]

  • Relative to parent element

  • Can be used for width, height, margin, padding, font-size

Percent Example

ul {
    margin: 18px;

li {
    margin: 100%;  // 100% of 18px = 18px

rem / em

  • EM: Relative to PARENT element

  • REM: Relative to ROOT element

  • If root element is 16px, 1rem for an element = 16px

  • Can be used for width, height, margin, padding, font-size

vh / vw

  • Relative to viewport height / width

  • Can be used for width, height, margin, padding, font-size


  • Keep accessibility in mind when selecting colors (provide enough contrast)

  • Lighthouse is built into Chrome DevTools to see where accessibility can be improved


  • RGB

  • Hexadecimal


  • 3-digit RGB code

  • Each digit represents 256 values (0-255)

  • Each set of digits represents the intensity of a color (red, green, blue)


  • rgb(102, 51, 153)

Hexidecimal Numbers

  • Hexadecimal is a base 16 number system

  • Each digit represents 16 values (0-9, A-F)

  • Each pair of digits represents a color (red, green, blue)


  • #ff0000


  • hex: #663399

  • rgba(102, 51, 153)

Quick Note About Hex

  • You can use shorthand hex

  • #ffffff = #fff

  • #663399 = #639


  • color

  • background-color

  • border-color

  • outline-color

  • box-shadow

  • >300 different properties in CSS with ~ infinite values



The Cascade

  • Process of combining multiple stylesheets and resolving conflicts between different CSS rules and declarations

  • Order of CSS rules matter - there's a hierarchy to the cascade

Source Order

  • Later rules win over earlier rules (of the same specificity)


  • More specific rules win over less specific rules

Order of Specificity (lowest to highest)

  1. Universal selector (*)

  2. Element selectors (p, h1)

  3. Classes (.myClass)

  4. IDs (#myId)

  5. Combining selectors to make rules more specific

  6. !important (WARNING: Bad practice)

Specificity Example

<h1 class="gif" id="ryan-gosling">Hey Girl!</h1> h1 {
    color: red;
.gif {
    color: blue;
#ryan-gosling {
    color: green;

What color will 'Hey Girl!' be?

Hey Girl!

Hey Girl


  • Children inherit traits from their parents: tall parent will likely have a tall child

  • Parent's properties may be inherited by child element

  • If you don't specify a property for an element, it will inherit the value from its parent

Inheritance Example

<div class="parentDiv">

    Parent div

    <div class="childDiv">
        Child div

.parentDiv {
    color: yellow;

Parent div

Child div

Inheritance Example

<div class="parentDiv">

    Parent div

    <div class="childDiv">
        Child div

.parentDiv {
    color: yellow;
.childDiv {
    color: black;

Parent div

Child div

Note About Inheritance

  • Don't build your champagne fountain on a waterbed

  • Start styling by elements (such as <body> or <h1>)

  • Then override by adding more specificity

tallest champagne pyramid

Work Time

Presentation: https://bit.ly/kcwit-cc-css

Worksheet: https://bit.ly/kcwit-cc-worksheet

cat typing

Box Model & Layout

octocat build

Box Model

  • Every element on a page is a rectangular box

  • Spacing inside the box, outside the box, and the cardboard itself takes up space

  • Box has 4 parts: content, padding, border, margin

  • Can be styled with CSS

The Box Model in Terms of Pizza

  • Content: the pizza

  • Padding: the space between the pizza & the box

  • Border: the cardboard box

  • Margin: the space outside the pizza box (and the space between the pizza box and another box)
pizza box model

box model
box model
box model

Box Model Properties

  • Each spacing property can be broken up for each side of the box

1-value Syntax

All edges

margin: 1px;
box model

2-value Syntax

Vertical horizontal

margin: 1px 2px;
box model

3-value Syntax

Top Horizontal Bottom

margin: 1px 2px 3px;
box model

4-value Syntax

Top Right Bottom Left (Clockwise)

margin: 1px 2px 3px 4px;
box model



Basics of Layout in CSS

  • Layout is the arrangement of elements on a page

  • Display / Inline

    • Inline vs. Block

    • None vs. Visibility

Layout Systems

  • Most sites use layout systems

  • Why? More powerful than basic CSS layout and allows for responsive design

  • Olden days of the internet, developers used HTML tables for layout

Layout Systems

  • Flexbox

  • Grid

Advantages of Flexbox and CSS Grid

  • Handles complex layout needs

  • Handles wrapping and flexibility for different display sizes (phones, smart displays, tablets, big tv's)

  • Now the standard way of adding layout

1-dimensional Layout

  • Use CSS Flexbox

  • Elements lay out next to each other in either row or column (but not both)

  • Elements can wrap to multiple rows or columns

  • Example

2-dimensional Layout

  • Use CSS Grid

  • Elements lay out horizontally and vertically from each other in both rows and columns

  • Used more often

  • Example

Flexbox & Grid

  • Flexbox is 1-dimensional

  • Grid is 2-dimensional

  • They are not an either/or layout system

  • You can use BOTH when styling

CSS Grid Nom Nom Gallery

  • Shows grid with defined height (1st row) and dynamic heights (3rd row and on) in masonry pattern

  • Responsive

  • Type of layout is very painful without grid

  • Flexbox handles the responsiveness

How to Use a Layout System

  • HTML: create a parent container with a class to style

  • CSS: Define the styling to add grid and/or flexbox


  • Common parent containers: main, header, footer, form, section, article, div
<section class="container">
  <!-- Child elements here -->


  • In the styles for the container, add the following:
display: grid;
display: flex;
.container {
  display: grid;

Work Time

Presentation: https://bit.ly/kcwit-cc-css

Worksheet: https://bit.ly/kcwit-cc-worksheet

cat typing

Wrap Up


Text & Icons


Common CSS Properties for Text

  • color

  • text-align

  • font-size

  • font-family


  • Find fonts online (such as Google fonts, which is free)

  • Link in HEAD or use @import

  • List preferred web safe font and a backup:
  • font-family: Roboto, sans-serif;
  • Use quotes for fonts with two words:
  • font-family: "Gochi Hand", cursive;


  • Find icons online (such as Font-Awesome, Google icons, or Heroicons)

  • Link in HEAD or use @import


  • Once included in your project, use class name `fas fa-code` for the code icon in your html

  • Use `::before` pseudo element to add the icon

CSS Frameworks

  • Many development teams use CSS frameworks instead of writing their own CSS

  • Collection of pre-written CSS code that you can use to style your website with pre-defined styles

  • Some CSS frameworks allow you to customize the styles, too

  • Useful for quickly styling a website

Why Use CSS Framework?

  • Allows developers to focus on application features rather than styles

  • Styling sites becomes much faster

  • CSS frameworks are designed to be responsive

  • Downside: Learning curve of learning the styles of the framework

How Does This Work?

  • Import the framework into your site:

  • <!doctype html>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.tailwindcss.com"></script>

How Does This Work?

  • Use the styles provided by the framework:

  • <h1>Hello world!</h1>

    <h1 class="text-3xl font-bold underline text-pink-500 background-pink-50">
        Hello world!

Hello world!

Hello world!

Popular CSS Frameworks

  • CSS Bootstrap

  • Tailwind

  • Material UI

  • Bulma

Awesome CSS

Resources & Homework Ideas

Play Games to Learn More About CSS

Take a Free Course

What's Next

Coding & Cocktails

Keep up with us


#LadyDevs       #KCWiT