CSS: What is it?

Responsive development (via media queries) in intermediate class, also hosted at MedTouch. REMOVE THE CSS AS EXAMPLE. Indicate how they've all seen pages load without CSS (FOUC = flash of unstyled content).

CSS in Action

HTML + CSS

HTML structures the content:

<p>This paragraph should have red text.</p>

Since CSS is a different language, it is kept in a different file (.css instead of .html). CSS says how your structured content should look:

p {
color: red;
}

On your Website, the result is:

This paragraph should have red text.

Without CSS, your HTML pages would look boring ☺

We'll go over CSS syntax shortly.

How does it work?

You make an HTML file

You make a CSS file that describes how specific HTML elements should look

Within the <head></head> of your HTML file, you link to your CSS file

The CSS searches through and selects specific elements that you've said should be styled, and applies that styling

CSS Syntax

selector {
property: values;
}

A block of CSS code is a rule

The rule starts with a selector

It has sets of properties and values

Don't really need to know what each portion is called, more concerned with you knowing how to use them. Selector, curly brace, property, colon, property value, semicolon. Whitespace doesn't matter.

CSS Syntax

You can add multiple property-value pairs to a rule, each ending with a semicolon:

Connecting CSS to HTML

External CSS saves a lot of work by controlling the look and feel of multiple pages at once

Easy to maintain

Useful when working with a team

Reduced bandwidth

Easier for search engines to crawl your site's content

Team: For content entry, inefficient to keep flipping through a style guide to see what color, font-size, etc. a certain heading should be. Instead, you can let the CSS control the styling for you. Also introduce concept of 'separation of concerns'. Bandwidth: caching, so downloaded once. Divide and conquer!

Connecting CSS to HTML

3. External

Let's Develop It!

Make a copy of your class1 folder and call it class2

Create a new CSS file and save it as styles.css within the class2/css folder

Add a link to css/styles.css in class2's index.html file

Now we can begin styling!

Do this with students! Point out that the relative path is the same, since we're in index.html and going into the images folder.

Selector: Element

Enter the element's tag name to target those elements:

p {
color: aqua;
}

p { } in CSS corresponds to <p></p> in HTML

The following selects all image elements:

img {
width: 600px;
}

img { } in CSS corresponds to <img /> in HTML

There are other selectors that we'll get into later. Start with this one so we can style different elements as we move along. CODE THE P AND IMG EXAMPLES FOR THEM.

NOT EXPECTED TO KNOW HOW THIS WORKS: Lots of ways to refer to colors other than the color name. Mention that, when you see the same property on different lines, that just means they're different settings you can use for that property.Mention that the RGBA controls opacity, while RGB is solid. Can shorten hexadecimals to three characters if the R/G/B channel value for each is the same. For example, #ffcc00 can become #fc0. Hexadecimal values are base-16.

Selector: Descendant

To target elements that are descended from another element, use a selector for the ancestor, then a space, then a selector for the descendant:

HTML:

<div>
Buy one get one
<strong>free</strong>
<p>
Offer valid
<strong>today</strong>
only
</p>
</div>

CSS:

div strong {
background-color: yellow;
color: blue;
}

Result:

Buy one get one free

Offer valid today only

Ask students which words would have a yellow BG with blue italicised text. Ask students what element would be an immediate child of the div. CODE EXAMPLE WITH STRUCTURE, AND ASK WHAT ANCESTORS OF A CERTAIN ELEMENTS WOULD HAVE. Also ask about two different ways to target an H1, for example.

Recognizes = have downloaded to their machine. Possibly mention CSSfontstack.com? Mention web-safe fonts, and also give example with Segoe UI. Also, say that these two blocks of CSS mean different things. The first overwrites, while the second is a prioritization. Called 'family' because all of these fonts look similar. Point out that applying fonts, background, etc. to the body element applies it to all the children.

Property: font-size

The font-size property specifies the size of the font.

p {
font-size: 16px;
font-size: 1em;
font-size: 100%;
}

Options include:

Pixels

"em" Units

Percentages

The default <body></body> size is 16px Usually 16px = 1em = 100%

Mention default styling. There's a reason why, last week, our links were rendered as blue, the headings larger, and 'strong' elements as bold, etc. All of that can be overridden with CSS, which is what we're going to do in this class.

Property: font-size

px versus em versus %

Pixels are a fixed-size unit — they don't change relative to their ancestor's font size. Percentages and "em"s are scalable and relative to their ancestor's font size.

Stress that you don't need to worry too much about specifics right now -- while learning, use pixels. This concept will come up in intermediate class so it's good to be aware of. CODE AN EXAMPLE of the difference between pixel and em/percentage. Use half and double. Note: Pixels and em/percentage are not just for font sizes -- you can use them for elements that have widths, heights, etc. Recommend ems and pxs (or other scalable units) over pixels.

Rule of thumb: If there's a space --in CSS-- then the portion after the space is a descendent. If there is no space, you are combining selectors. The first part is "select any element with this class name" and the second part is "select any div". Put them together with a space and you get "select any div that is a descendant of any element with this class name".