/css-basics

Primary LanguageHTML

CSS Fundamentals

Objectives

  • Discuss what CSS does and why it's important
  • Differentiate between inline, internal, and external stylesheets
  • Understand how to use class, id, and element selectors, and selector order of importance
  • Demonstrate the use of the box model, floats, clear, positioning, flex box, CSS grid in page layout
  • Introduce CSS Frameworks like Bootstrap, Semantic UI, Materialize
  • Show Pesticide for Chrome

CSS Basics

  • What is it? sparkles also Cascading Style Sheets
  • What Does it Do? style the html makes things pretty and nice and sparkley rallzlmattazz lit

Stylesheets and Selectors

How do we add CSS to our HTML page?

  • Inline
    • style="color: green"
  • Internal
    • <style><style/>
  • External import external page
    • < link rel="stylesheet" href="styles.css" >

Colors?

  • Names "green"
  • RGB rgb(0, 255, 0)
  • Hex Codes #00FF00

Types of CSS selectors

  • HTML tags/elements
  • Classes
  • IDs
Element Selector:
body {
  text-align: center;
}

Class Selector:
.navbar {
  margin-bottom: 0px;
}

ID Selector:
#main-page-title {
  font-family: sans-serif;
}

The Box Model

  • What is the box model?

padding and margin borders

4 Elements of the box model:

  • Content - The content of the box, where text and images appear
  • Padding - Clears an area around the content. The padding is transparent
  • Border - A border that goes around the padding and content
  • Margin - Clears an area outside the border. The margin is transparent

(Use Chrome Web Developer to explore!)

Layouts & Positioning - Floats & Clear

Floats - take our elements outside of the standard flow of the webpage

.grand-canyon-image {
  width: 400px;
  float: left;
}

Use clear to make your elements 'clear' any floats and sit inline with the regular flow of the page

.park-info {
  clear: both;
}

Layouts & Positioning - CSS Grid, Flexbox

Makes it easy to create well-designed and responsive pages

CSS Grid

Grid-based layout, two-dimensional system

Example makes dynamic auto-fill grid:

.image-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  grid-gap: 10px;
}

Example makes 5 x 5 grid, where each column and each row is divided into 5 parts each filling 20% of the column and row, respectively:

.image-gallery {
  display: grid;
  grid-template-columns: 20% 20% 20% 20% 20%;
  grid-template-rows: 20% 20% 20% 20% 20%;
  grid-gap: 10px;
}

Example makes 3x3 grid, where each column is divided into 3 fractional units and each row is divided into 3 fractional units:

.image-gallery {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  grid-gap: 10px;
}

grid-template is another way to generate your grid, and it combines both grid-template-columns and grid-template-rows

You can also target specific elements within the grid and specify where there should start/end via: grid-column-start, grid-column-end, grid-row-start, grid-row-end, grid-column, grid-row, grid-area

Flexbox

One-dimensional system (row or column based)

.header {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

Some properties of flexbox include:

  • justify-content - aligns items along the main axis
    • Can specify flex-end, flex-start, center, space-between, space-around
  • align-items - aligns items along the cross axis
    • Can specify flex-end, flex-start, center, baseline, stretch
  • flex-direction - choose the direction of items along the main axis
    • Can specify row, row-reverse, column, column-reverse
  • flex-wrap - choose whether items must remain on single lines or if they can wrap to new lines
    • Can specify nowrap, wrap, wrap-reverse
  • flex-flow - combines flex-direction and flex-wrap

You can also align specific flex items along the cross axis with align-self

CSS Frameworks

Does a lot of the CSS work for us

Resources