Embedded Files
Welcome to the tenth lab of Team Edge!
Welcome to the tenth lab of Team Edge!
In this lab, we cover an introduction to CSS and the basic styles you can add to beautify your web page.
You will be completing three challenges to practice your CSS skills
You will be completing three challenges to practice your CSS skills
Click on the challenge for the link to the challenge page.
New Skills:
New Skills:
Styling elements using CSS
Selecting elements using CSS selectors
Styling multiple elements using classes
New Skills:
New Skills:
Selecting elements using an ID
Add emphasis to specific elements using CSS properties
Reference
Reference
Cascading Style Sheets (CSS)
Cascading Style Sheets (CSS)
CSS allows you to write rules for how the browser should display the content on the screen.
You are able to control the styles of multiple elements to create a consistent design of the webpage(s).
CSS allows you to control:
CSS allows you to control:
CSS Syntax:
CSS Syntax:
The selector will find all instances of the specified element(s) and apply the style rules
Here, all content in the paragraph elements would be displayed in a blue font color.
Curly braces { } follow the selector to group the style rule(s)
The declarations within the { } are written as a property:value pair.
Each property:value pair must be followed by a semicolon (;)
Classes
Classes
<div class="studentIntros">
Unlike ids, classes are used to identify more than one element. The class name is added to the opening tag of the elements.
In the CSS file, you can apply a style to the group of HTML elements by using the selector:
.studentIntros{
{color: #569f23;}
}
The period (.) indicates that we are selecting a class.
IDs
IDs
<div id="myIntro"> </div>
Unlike classes, ids are only allowed to be used to identify a single element. The id name is added to the opening tag of the element and must given a unique name.
In the CSS file, you can apply a style to the specific HTML element by using the selector:
#myIntro{
{color: #e66465;}
}
The pound symbol, or hashtag, (#) indicates that we are selecting an id.
Color Picker
Color Picker
Colors in CSS are represented in hex values. Click on the color square below and select a color to get the hex value.
Want more practice on CSS?
Want more practice on CSS?
Additional Resources
Additional Resources
Report abuse