Your browser doesn't support the features required by impress.js, so you are presented with a simplified version of this presentation.

For the best experience please use the latest Chrome, Safari or Firefox browser.

by Ali Spittel

CSS is used to declare styling on webpages. Pretty much every website uses it!

Styles are applied in a cascading manner -- the most specific styles will override the less specific ones!

HTML defines the structure and content of our website. HTML tags have different meanings. For example a h1 tag defines a header. We will attach our CSS code to HTML tags using selectors.

See the Pen Single Div Grace Hopper by Trish Katz ( @techxastrish) on CodePen.

See the Pen Loving Car - Pure CSS with animation by Nikhil Krishnan ( @nikhil8krishnan) on CodePen.

See the Pen One div CSS camera by Adam Towle ( @adamtowle) on CodePen.

See the Pen Cute Dog by David López ( @davidlpz) on CodePen.

See the Pen CSS Toucan by Clara Song ( @clarawrsong) on CodePen.

See the Pen Mona Lisa with pure CSS by Jay Salvat ( @jaysalvat) on CodePen.

When we use CSS, we are selecting content from our HTML code and adding styling to it. We apply CSS code at varying levels of specificity. We will use: Demo
Today, we will be using an HTML tag called a div. These tags are special -- they just specify a grouping of elements or a space to style -- they don't have any default behaviors other than having a new line after them.

Elements are positioned using the top, bottom, left, and right properties. These properties don't work until the position property is set! There are a few different options for positioning, but we will use two today: absolute and relative.

Absolute positioning: We can position our divs on the page relative to their parent elements using absolute positioning! The "sibling" absolutely positioned divs ignore each other, so they can overlap. We will be using absolute positioning for most of our art!

Relative positioning: We can position our divs on the page relative to that div's default position using relative positioning. Remember, divs by default will stack on top of one another!

Demo

As we just saw, we can easily create squares with css, just by setting the width, height, and background-color attributes. To make that square into a circle, just add a border-radius of 50%! That will round the corners of the shape perfectly. Triangles, and other shapes get a little bit more tricky: I use Clippy and to visually edit those shapes using clip paths!

Demo

Follow along!

Completed Project

Download Gravit
Build a piece of CSS art! Use a design software to outline what your artwork will look like. Some Ideas:

CSS grid is a pretty new technology -- it just rolled out this year! It allows you to make grid-based layouts with rows and columns, which makes positioning much easier!

We will start with a grid container that contains grid items within it. We will also specify rows (horizontal) and columns (vertical) that our items will fit within.

Geometric Poster

Another Poster

        
          .grid-container {
            /* Initialize grid */
            display: grid;
            /* The sizing of our rows*/
            grid-template-rows: 1fr 10px 1fr;
            /* The sizing of our columns */
            grid-template-columns: 20px 1fr 2fr;
            /* Add space between the rows and columns */
            grid-gap: 10px;
          }
        
      
An fr is a fraction. For example, for the columns above there are 3 fractional units specified. The 1fr unit will take up one third of any remaining space, and the 2fr will take up the other two thirds.
        
          .grid-item {
            /* Initialize grid */
            grid-row: 1;
            grid-column: 2;

            /* or... */
            grid-row: 1 / span 2;
            grid-column: 2 / span 1;
          }
        
      
Demo

We can also animate our web pages using CSS! No JavaScript needed. There are two main ways we can add animations to our sites: transitions and keyframes. If you want to do something simple upon a user interaction, transitions are great. If you want to do something more complex or time based, you will want to use keyframes.

          
            .item {
              /*  transition: attribute time transition-timing, second-attribute time; */
              background-color: red;
              transition: background-color 2s ease-in;
            }

            /* hover is a pseudoclass we can use to change an attribute on hover */
            .item:hover {
              background-color: blue;
            }
          
        
Demo
          
            .item {
              animation-name: keyframe-name;
              animation-duration: 1s;
              animation-iteration-count: infinite;
              animation-direction: alternate;
            }

            @keyframes keyframe-name {
              from {
                attribute: start;
              }

              to {
                attribute: end;
              }
            }
          
        
Demo
Create your own animation! You can add it to anything you've built today, or create something new! You can use a transition or a keyframe (or try both)!

SCSS is a CSS preprocessor which adds additional functionality to CSS. The browser can't read it by default, so we have to transplile it to normal CSS, but it can make our code a lot cleaner!

It allows us to use variables, mixins, and loops within our CSS code!

Demo

Those of us whose work is to write software are incredibly lucky. Building software is a guiltless pleasure because we get to use our creative energy to get things done. We have arranged our lives to have it both ways; we can enjoy the pure act of writing code in sure knowledge that the code we write has use. We produce things that matter. We are modern craftspeople, building structures that make up present-day reality, and no less than bricklayers or bridge builders, we take justifiable pride in our accomplishments.

This all programmers share, from the most enthusiastic newbie to the apparently jaded elder, whether working at the lightest weight Internet startup or the most staid, long-entrenched enterprise. We want to do our best work. We want our work to have meaning. We want to have fun along the way.

@aspittel

/in/aspittel

alispit.tel

aspittel