CSS in a Nutshell

CSS in a Nutshell

Open Ended

What do you think we use CSS for?

CSS is for Appearance

• ​Colors

• Position

• Size

• Text wrapping

• Etc.

CSS is NOT like HTML.

HTML can and will take a lot of terrible code. CSS does not. If you mess up your CSS, it won't work. That includes punctuation and dashes.

.

However, it doesn't seem to care about indentation.

• CSS is mixed into the HTML document.

• Applies CSS to just one page.

• NOT ALLOWED IN CLASS.

Internal

• CSS is in its own document

• Applies CSS to the whole website.

• This is the ONLY way we do CSS in this class.

External

Internal vs. External CSS

• Adds CSS directly to a single line of html.

• You are NEVER allowed to use it.

Inline

• Goes between <style> tags

• Writes like regular CSS between those tags.

Internal

Internal CSS: Inline or Internal

Why don't we use internal CSS?

Internal CSS can break html. It basically works until it doesn't. You aren't doing anything that will break the html, but this is for learning good code habits, not fancy CSS. As a rule, we try to keep our CSS separate from our html.

Inline CSS in particular is notorious for breaking whole websites. It's never allowed in class.

Selector tells the CSS where to apply the appearance changes.

​

CSS Selectors

Selectors:

There are several ways to use selectors.

• Simply put the html tag into your selector to change all everything with that html tag.

• Add the attribute id="[choose your own]" to your html and use #[id name] to choose a single item to apply changes to.

• If you want several html elements to have these changes, use class="[choose your own]" and make the selector .[class name]

Match

Match the following selectors to their html counterpart (Note: Closing tags are not provided).

• h1 {}

• #foo

• .bar

• h1.bar

<h1>

id = "foo"

class = "bar"

<h1 class = "bar">

• <h1>

• id = "foo"

• class = "bar"

• <h1 class = "bar">

This is where we do the actual changing. We divide declaration blocks into two parts: the property, and the value.

​

Declaration Blocks

This is the specific change you're making. You're changing the background color in the property, and now you're changing it to blue in the value.

Value

Property says what you're changing. The color? The location? The font family? It's choosing a subject to change.

Property

Property and Value

Hotspot

Select all the properties

Hotspot

Select all the values

Labelling

Label the Selector, property, value, and a declaration block.

Drag labels to their correct position on the image

Selector

Property

Value

Declaration Block

Multiple Choice

True or false: You don't need the semi-colon at the end of a declaration block.

• True: Web code isn't like Python

• False: It's in the pictures for a reason

Float moves blocks (like images or div tags) from one side of the screen to another, and wraps text around them. You can float left or right. You can technically float center, but you shouldn't try it because sometimes it... breaks.

Float

Normally, you can just use font, and it will work. But replit is weird. It only lets you use font-family.

​

Font-Family

​Start by choosing a font. Then, assume it won't work. Choose the next font you'd like. Then finally either a serif or sans-serif font the browser may have.

Multiple Choice

Why do we use font-family and not font?

• It's superior to font

• font is depreciated

• Replit is weird

• Ms. Lewis says so.

Multiple Choice

When are we allowed to use inline CSS in class?

• When needed

• During your About Me assignment

• NEVER

• When you feel like it

Multiple Choice

Where should the CSS go?

• In its own document

• As an html attribute (inline)

• On the moon

• Anywhere.

Multiple Select

What is something we can we use float on? (select all that apply)

• Text

• An image

• A header

• A div tag

Hotspot

Which image has had float used on it?