CSS

Presentation

•

Computers, Fun

•

Professional Development

•

Practice Problem

•

Medium

Robert Anderson

Used 44+ times

FREE Resource

9 Slides • 7 Questions

Intro to CSS

Cascading Style Sheets

What is CSS?

CSS is what we will use to make our webpages look nice and unique. They are separate files that we create that can be linked to our HTML to enhance the overall page.

Breakdown

Yellow: The first part is the "selector". This lets our HTML know what we are referring to.
Green: The next part is the entire declaration we are making.
Pink: Inside of the { } is where we will "declare" our style choices. "property: value;" pairs.
Orange: The first part of our pair is the "property" which states what type of style we are referring to.
Blue: The second part is the "value" which states the specific setting or numeric value we want to assign.

Multiple Choice

What does CSS stand for?

Cascadian Street Slang

Cruising Style Stools

Cascading Style Sheets

These are all wrong

Multiple Choice

Choose the correct property value pair.

propert; value;

property: value:

property: value

property: value;

Classes and ID's

A 'class' is an attribute assigned to an HTML element. It can be assigned to as many different elements as we would like. It is best used though for elements that are used for the same purpose.
An 'id' is also an attribute assigned to an HTML element. It is a specific and unique value that cannot be used anywhere else.

Selectors and Specificity

General element selectors can be used to style every element in your HTML that matches the selector (least specific)
When a "." starts the selector we are referring to a "class". So any element with an attribute of 'class=bill-images' will be assigned the same style as each other. (more specific)
When a "#" starts the selector we are referring to an "id". Each "id" is unique and can only be applied once. The one element with the attribute of 'id=quote' will be assigned the style choices declared

Multiple Choice

If I wanted to assign an attribute to style every single <p> tag what would work best?

p {color: blue;}

.p {color: blue;}

.paragraphs {color: blue;}

#paragraphs {color: blue;}

Multiple Choice

What selector is most specific?

h1 {height: 200px;}

#this-one {height: 200px;}

.theseOnes {height: 200px;}

* {height: 200px;}

3 Different ways to link CSS to HTML

1) In-line (not best practice, gets messy, hard to keep track of, not DRY)
What is DRY? (Don't Repeat Yourself) The practice of trying to write code that can be used and re-used multiple times instead of writing it over and over and over... and over and over.
2) Inside of the <style></style> element we can put inside of the <head></head> element in our HTML file. (Better than 'in-line', good for learning and working on small activities, still not best practice.)
3) Create a separate file with a ".css" extension and <link> the file to our HTML. (Best practice, keeps our HTML and CSS separate and keeps our code clean. We love clean code.)

CSS in-line

Written inside of the HTML element, only pertains to that specific element.

"style='property: value' "

CSS in <style> tags inside the <head>

Better than in-line. Can use general element selectors, class selectors, id's, and everything else in-between.

Still not best practice, can get messy and cumbersome as code grows. Too much going on in one place.

CSS <link>'ed!

Using a <link href="bill.css" rel="stylesheet" > inside of our <head> we can then write our CSS in a separate file to keep our code clean and easy to use.

This allows us to use our CSS on any HTML file we want to, by just adding a <link> in that HTML file. This helps with our practice of DRY coding.

Multiple Choice

Can you assign styles to a "class" with in-line CSS?

Yes

What is in-line styling?

Where am I?

Multiple Choice

How many elements can share the same "id"?

None, There can be only 1 element per "id".

Any element of the same type.

Any element with the same class.

All of them.

Multiple Choice

Can an HTML element have more than 1 "class"?

Yes

What's an element?

Where am I, and how did I get here?

Intro to CSS

Cascading Style Sheets

Show answer

Auto Play

Slide 1 / 16

SLIDE

Similar Resources on Wayground

12 questions

Module 2 Chapter 5 Lecture 1

Lesson

•

University

11 questions

In order to / so that / such a

Lesson

•

Professional Development

11 questions

English department presentation (Dec 2020)

Lesson

•

Professional Development

10 questions

ÔN TẬP CÂU LỆNH FOR_DO

Lesson

•

Professional Development

11 questions

METAVERSE

Lesson

•

KG - University

15 questions

Elements of Exercise

Lesson

•

Professional Development

11 questions

03 Second Conditional 💀

Lesson

•

Professional Development

15 questions

Sieci Komputerowe - Protokoły Warstwy Aplikacji

Lesson

•

Professional Development

Popular Resources on Wayground

15 questions

Fractions on a Number Line

Quiz

•

3rd Grade

10 questions

Probability Practice

Quiz

•

4th Grade

15 questions

Probability on Number LIne

Quiz

•

4th Grade

20 questions

Equivalent Fractions

Quiz

•

3rd Grade

25 questions

Multiplication Facts

Quiz

•

5th Grade

$fractions$

22 questions

fractions

Quiz

•

3rd Grade

6 questions

Appropriate Chromebook Usage

Lesson

•

7th Grade

10 questions

Greek Bases tele and phon

Quiz

•

6th - 8th Grade

Discover more resources for Computers

20 questions

Black History Month Trivia Game #1

Quiz

•

Professional Development

20 questions

90s Cartoons

Quiz

•

Professional Development

12 questions

Mardi Gras Trivia

Quiz

•

Professional Development

7 questions

Copy of G5_U5_L14_22-23

Lesson

•

KG - Professional Dev...

12 questions

Unit 5: Puerto Rico W1

Quiz

•

Professional Development

42 questions

LOTE_SPN2 5WEEK2 Day 4 We They Actividad 3

Quiz

•

Professional Development

15 questions

Balance Equations Hangers

Quiz

•

Professional Development

31 questions

Servsafe Food Manager Practice Test 2021- Part 1

Quiz

•

9th Grade - Professio...