Why CSS Still Matters

Stephanie A. Higa
Senior Software Engineer @ Box
WomenTech Global Conference 2020

What is CSS?

But what is CSS, really?

If you think of a building…

Who should care about CSS?

Recognize these sites?

CSS is the language that makes the web recognizable and beautiful

CSS is generally not well-understood

It's unique — it doesn't have much in common with programming languages
Support for many newer features varies from browser to browser
Popular frameworks obscure the details of the language

Materialize

Semantic UI

UIkit

Bootstrap

Foundation

A brief overview of CSS fundamentals

Everything is a box

Also known as the box model

Margin

Border

Padding

Element content (image, text, input field, etc.)

Margin, border, padding are all optional
Padding = space inside of the border
Margin = space outside of the border

CSS defines rules based on selectors

Type: matches all HTML elements of a certain type
- img - image
- input - input field
- p - paragraph
ID: custom item name specified using the id attribute — can only apply to one element
Class: custom group name specified using the class attribute —can apply to multiple elements

Classes are the ideal selector

Styling a paragraph

Biscuit chocolate cake bonbon lemon drops bonbon apple pie liquorice tootsie roll. Marzipan ice cream ice cream tiramisu jelly beans lemon drops biscuit. Croissant chocolate bar jelly-o gummi bears croissant soufflé fruitcake icing.

.example-paragraph { font-family: Chalkboard; margin: 0; padding: 0; color: #555; line-height: 0.8em; border: 1px solid red; border-radius: 0; }

CSS is like a graphics program in code

Creating a circle in CSS

border-radius: 0

border-radius: 100px

border-radius: 100%

Creating a triangle in CSS


                        width: 300px;

                        height: 300px;

                        border-width: 32px;


                        width: 0;

                        height: 0;

                        border-width: 150px;


                        border-top-color: #fecf6a;

                        border-left-color: transparent;

                        border-right-color: transparent;

                        border-bottom-color: transparent;

Creating a cylinder

CSS animations

A border animation

Learn more about CSS

Mozilla Developer Network docs: https://developer.mozilla.org/en-US/docs/Learn/CSS
CSS Tricks: https://css-tricks.com
CSS Reference: https://cssreference.io

Thank you!

Stephanie A. Higa
https://www.linkedin.com/in/sahiga
https://www.github.com/sahiga/css-talk