Preamble

Yesterday we meandered through cutting edge CSS features. Some of you faced issues with browser support. Check out CanIUse.com to see the browser support for HTML/CSS/JS/SVG cutting edge features.

Class 3: CSS Basics Continued

From the last course we had 5 mini-projects. Please present them now.

Box Shadows:

See the Pen Box Shadows Example by Kyle Sullivan (@kysully) on CodePen.

Backgrounds:

See the Pen qbrNRr by Bri (@feralislatr) on CodePen.

See the Pen rxyLQW by Jianwei Ke (@kejianwei) on CodePen.

Outlines:

See the Pen yeMgOm by Andy Novocin (@AndyNovo) on CodePen.

Borders:

See the Pen xZqgOE by Andy Novocin (@AndyNovo) on CodePen.

CSS from scratch

I forgot to put this in our notes before but it is very important. There are 3 ways to get a CSS rule into your website when you build from scratch (plain text).

Link to separate file

If you use the link tag in your head tag you can specify the name of a file to read the rules from.

      
        <link rel="stylesheet" href="path/to/your/style.css">
      
    

CSS From Scratch Task 1: Head to cloud9, create an HTML document from scratch. Create a file named banana.css. Have the CSS rules from banana apply to your HTML document using the link tag.

The other way to link to CSS is from one css file to another using:

      
        @import 'custom.css';
      
    

This can also be handed some specific media query conditions (which we will discuss soon). Documentation here.

Import Task 2: Now add another css file called apple.css import the apple stylesheet from the banana sheet.

The style tag

In your HTML you can add a <style> tag which can contain CSS rules. This can include an import line if you don't want to use links.

Inline Styles

This is a bad practice, but sometimes it happens. You can add a style="property:value" attribute to any element. This will give the CSS property to that element.

Text and Font Follow up

Please head back to yesterday's notes. You will get 10 minutes to do the text attribute project. Then 2 minutes per group to show what you found. Then 10 minutes to poke through the google fonts API.

The Box Model

OK, so this is a very important notion in CSS and everyone should know it.

Every element is a rectangular box with content, padding, border, outline, and margin.

Plugin Fun Task 4: Install a plugin like "LiveCSSEditor" which lets you add CSS to other people's websites. Go to a cool looking website. Add the line * { outline: 2px solid salmon; }. Enjoy the boxiness.

• So the innermost box is the content. It has a width and height.
• The next box around that is the padding. Padding is always transparent but it shows the background of the element.
• The border is a visible layer at the outside of the padding which defaults to having the background of the element beneath it (this can be altered).
• The outline is just like the border with two exceptions: it does not take up space (in terms of the stacking/flow of elements on your screen) and it need not stay in place (like my dumb column problem yesterday).
• The margin is the next surrounding box, it is always transparent and it shows the layer beneath the element. It keeps other elements at bay, roughly.

Box Model Task 5: Alter the following dabblet in the following ways. Make the padding 100px, then reset it to 10px. Do the same now for border. Now for Margin. Now for outline. Observe how the page reflows or doesn't and see the box model in your mind's eye.

Box Model Task 6: Now add a width property (pick the pixel value yourself). Now add a height property. Note that this is the width and height of the content-box only right now.

We will come back to this after we do some layout work, there is much more to say.

The Display Property

Now that we know that every element is a box with margin and padding the next question is how those boxes are stacked. The first step in this journey is to understand display: block vs display: inline vs display: inline-block.

Inline Elements

When you think of inline elements I want you to imagine <span> which sits "inline" with the surrounding text. It lets you select particular words that you want to emphasize for some reason.

You can make any element an inline element using the display property. inline elements do not accept width and height properties. In fact margin and padding only work horizontally not vertically.

Inline-block Elements

Inline-block elements work just like inline but they do accept width and height, otherwise they try to in the natural left to right line flow.

Block Elements

Block elements accept width and height and sit on a new line. If you do not set a width they take up as much horizontal space as they can. If you don't set a height the height is set by the content.

Basic Display Task 7: In the following dabblet change the display property from none to inline to inline-block to block. Notice how the remaining text is impacted by the margins of the spans.

inline-block can be used to make grids of pictures that will fill as much space as you give them. We will come back for display: flex soon.

Create Task 8: Find one or many 200x200 images. Create a "grid" of 200x200 images using <img src="url_here"> and display: inline-block. Adjust the width of your screen to see the flow of the images.

Default User Agent Stylesheet

If there is time:

Talk about debugging, the cascade, specificity, and inheritance for determining which rules are in.