CSS Basics

Meet the C&C #LadyDevs

Amy Norris

Amy Norris

Director

Alex Herron

Alex Herron

Co-Director

Lulu Coa

Lulu Coa

Curriculum Director

Gabi Dombrowski

Gabi Dombrowski

Mentor Director

Kim Watt

Kim Watt

Marketing Director

Vanessa Shultz

Vanessa Shultz

Presentation Director

eyebrows

TBD

Technical Materials Director

Our Host this Evening

Dimensional Innovations


DI

Bathrooms...


Behind the wooden wall in the kitchen


stalls

Drink Served

Laura Kozak

Laura Kozak

Join us on...

Slack

Carolyn Westhoff

#generation-x

#tabletop-games

#movies

#cats_and_doggos

Our mentors

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

Selectors



  • 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



html

<h1>Hello World</h1>

css

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



html


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

css


.cocktail {
    color: rebeccapurple;
}


Cosmopolitan

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

Comments



  • NOT displayed in the browser

  • Can be used to explain code

  • Can be used to prevent execution of code

Comments



/* 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

Selectors

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;
}


H1

H2

H3

H4

H5
H6

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



HTML:

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

CSS:

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
DOM

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

<ul>
  <li>
    <em>Most important item</em>
  </li>
  <li>
    Second most important item
  </li>
</ul> 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"

Combinators



  • 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

Absolute



  • pixels [px]

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

Relative



  • 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

Color



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

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

Color



  • RGB

  • Hexadecimal

RGB



  • 3-digit RGB code

  • Each digit represents 256 values (0-255)

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

rebeccapurple



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

red



  • #ff0000

rebeccapurple



  • hex: #663399

  • rgba(102, 51, 153)

Quick Note About Hex



  • You can use shorthand hex

  • #ffffff = #fff

  • #663399 = #639

Properties



  • color

  • background-color

  • border-color

  • outline-color

  • box-shadow

  • >300 different properties in CSS with ~ infinite values


confused

Properties



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)

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

Inheritance



  • 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
    </div>

</div> .parentDiv {
    color: yellow;
}


Parent div

Child div

Inheritance Example

<div class="parentDiv">

    Parent div

    <div class="childDiv">
        Child div
    </div>

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

Source:



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

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

HTML



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

CSS

  • 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



octocat

Text & Icons



octocat

Common CSS Properties for Text



  • color

  • text-align

  • font-size

  • font-family

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;

Icons



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

  • Link in HEAD or use @import

Font-Awesome



  • 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>
    <html>
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.tailwindcss.com"></script>
    </head>
    </html>

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


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



codingandcocktails.kcwomenintech.org



#LadyDevs       #KCWiT


#CodingAndCocktailsKC