Lesson 4.1: CSS Basics, Selective Styling
Jasmine
Created on October 7, 2024
Over 30 million people create interactive content in Genially.
Check out what others have designed:
BLENDED PEDAGOGUE
Presentation
WORLD WILDLIFE DAY
Presentation
FOOD AND NUTRITION
Presentation
2021 TRENDING COLORS
Presentation
HISTORY OF THE CIRCUS
Presentation
LETTERING PRESENTATION
Presentation
SPRING HAS SPRUNG!
Presentation
Transcript
Lesson 4.1
CSS Basics Selective Styling
START
What is CSS?
Classes & IDs
Exit Ticket Questions
CSS Comments
Applying CSS
Documentation
Vocabulary
CSS Syntax
Comparison
Cascading Order
Quote
Objectives
Index
Students will learn the fundamentals of CSS (Cascading Style Sheets) and how to apply CSS to HTML documents. They will also review key concepts related to CSS.
Objectives:
Vocabulary
- CSS (Cascading Style Sheets): a stylesheet language used for describing the presentation of documents written in a markup language. - CSS Rule: Selector and declaration block that defines the styling for an HTML element. - Stylesheet: a file used to contain the presentational styles for HTML content. - Cascade: defines the styling that takes precedence when there’s more than one origin. - User Agent Stylesheets: basic style sheets that provide default styles to any document. - Inheritance: controls what happens when no value is specified for a given element property. - Specificity: determines the CSS declaration that is most relevant to an element and thus which property value to apply to the element.
+ next
07:00
Documentation
- Style attribute: an attribute that specifies an inline style for an element. - Style element - <style>: a tag that’s placed within the <head> tag that’s used to define style information for an HTML document. - Link element - <link>: an empty element that defines the relationship between the current document and an external resource. - Id Attribute: Used to specify a unique id for an HTML element - Class attribute: specifies one of more class names for an element. - /* CSS Comments */: notes added to CSS that are ignored by browsers and used to explain the code, leave reminders, etc.
+ next
07:00
CSS stands for Cascading Style Sheets. CSS is used to define the presentation and style of documents written in HTML. The ability to alter the appearance of HTML content was made into its own.
What is CSS?
"CSS is used to style and format HTML content."
Selector { property: value; } H1 { color: blue; }
Example of CSS Structure:
Structure of CSS
- Selector: What's being styled - Declaration block: Enclosed in curly braces - Property: Defines what's styled - Value: Specific styling - Semicolon: Ends property-value pairs
CSS Syntax
+ next
External Styling
Internal Styling
Inline Styling
Applying CSS:
3 ways to apply CSS to a webpage
+ click here
+ click here
+ click here
The use of IDs and classes are for selecting HTML elements. - IDs must follow specific rules. - IDs are unique within a document. - Classes can be applied to multiple elements.
Classes & IDs
Classes and IDs are assigned to our HTML elements.
Classes and IDs are assigned to our HTML elements.
IDs
Classes
+ click here
+ click here
cascading order of CSS rules.
Cascading Order & Specificity
Cascading Order & Specificity:
Element Specificity
Cascading Order
+ click here
+ click here
- Syntax: /* comment */ We can make both single and multi-line comments. With the syntax for a comment consisting of a forward slash and a start (*) then closing with another star and a forward slash.
CSS Comments
+ next
+ next
a. <h1 style:color="red;">Red Header</h1> b. <p style="color:red;">Red Paragraph</p> c. <h1 style="color:blue;">Blue Header</h1>
Which of the following is an example of a correct inline CSS application?
Question 03
True or False: CSS is used to define the content for a web page.
Question 02
a. Cascading Style Scripts b. Creative Style Sheets c. Computer System Software d. Cascading Style Sheets
On your Lesson 4.1 docment, answer the following questions. Then submit into Lesson 4.1 on canvas.
What does CSS stand for?
Question 01
Exit Ticket Questions
+ next
What is the benefit of using an external style sheet? a. It makes it easier to share styles across multiple pages. b. It helps to keep styling separate from the HTML content. c. It allows for the creation of styling that's easier to maintain and update. d. All of the above
Question 05
a. <link>b. <script> c. <meta> d. <style>
On your Lesson 4.1 docment, answer the following questions. Then submit into Lesson 4.1 on canvas.
Which element is used to contain internal CSS?
Question 04
Exit Ticket Questions
Submit your Lesson 4.1 doc onto canvas in Lesson 4.1.
`html file <body id="example"><p> This paragraph should be blue </p</body>`CSS#example { color: blue; }
IDs in CSS
<body style="color:blue;"> <h1> Title </h1> </body>
Inline Styling
<html><head><style> <h1> Title of the Page </h1></style></head></html>
Internal Styling
`html file <html> <head> <link rel="stylesheet" href="style.css"></head><body><h1> Title of the Page </h1></body></html> `CS file h1 { color: blue; }
External Styling
`html file <body class="example"><p> This paragraph should be blue </p></body> `CSS.example { color: blue; }
Classes in CSS
Consectetur adipiscing elit
A class selector is more specific than selecting an element, and an id is more specific than a class.
Element Specificity
1. If there are any conflicting styles the last stylesheet to be added will take precedence. 2. If multiple selectors target the same element the last defined style takes precedence. 3. The styles we write within the <style> element on our HTML documents will override any external stylesheet or user agent stylesheet. 4. Inline styles take precedence over all other application methods.