CSS BASIC
Presentation
•
Computers
•
•
Practice Problem
•
Hard
Prof. Tarik
Used 4+ times
FREE Resource
14 Slides • 0 Questions
1
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.
2
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.
3
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.
4
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
5
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.)
6
CSS in-line
Written inside of the HTML element, only pertains to that specific element.
"style='property: value' "
7
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.
8
9
10
11
12
13
14
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.
Show answer
Auto Play
Slide 1 / 14
SLIDE
Similar Resources on Wayground
6 questions
10-dars Ichki musobaqa (Robo mission)
Presentation
•
6th - 8th Grade
10 questions
Greek and Latin Words Parts
Presentation
•
4th Grade
10 questions
Theme Review Lesson
Presentation
•
4th Grade
10 questions
Latin/ Greek Roots
Presentation
•
4th Grade
10 questions
Computer Network
Presentation
•
9th - 12th Grade
11 questions
HTML coding
Presentation
•
7th Grade
8 questions
Computer Mouse
Presentation
•
1st Grade
12 questions
Artificial Intelligence
Presentation
•
8th - 9th Grade
Popular Resources on Wayground
10 questions
Impact of 9/11 and the War on Terror
Interactive video
•
10th - 12th Grade
21 questions
Continents and Oceans
Quiz
•
6th Grade
5 questions
9/11
Interactive video
•
9th Grade
20 questions
Parts of Speech
Quiz
•
5th Grade
16 questions
Subject & Predicate
Quiz
•
5th Grade
10 questions
Riddles Riddles fun Riddles
Quiz
•
6th - 12th Grade
21 questions
Lab Safety
Quiz
•
10th Grade
6 questions
PRIDE in the Hallways and Bathrooms
Presentation
•
12th Grade
Discover more resources for Computers
7 questions
Digital Footprint
Presentation
•
5th Grade
18 questions
Company Logos
Quiz
•
6th - 8th Grade
20 questions
Module 1 Topic 1 Vocabulary
Quiz
•
9th - 12th Grade
10 questions
Exploring Digital Citizenship Essentials
Interactive video
•
6th - 10th Grade
20 questions
Karel the Dog Review
Quiz
•
9th - 12th Grade
15 questions
Chapter 13 Test Review
Quiz
•
9th Grade
11 questions
Fast & Curious: Email Ettiquette
Quiz
•
6th Grade
30 questions
Internet safety
Quiz
•
4th - 5th Grade