Thanks to visit codestin.com
Credit goes to www.scribd.com

Scribd
Upload
45 views22 pages

CSS Level One

This document outlines the topics that will be covered in a CSS Level One course, divided into five parts and a final assessment. Part 1 covers the basics of CSS and linking a CSS file to HTML. Part 2 discusses backgrounds, borders, and using div and span tags. Part 3 explains CSS selectors for targeting elements by id, class, and combinations of selectors. Part 4 gives an overview of using the browser inspector tool. Part 5 briefly covers CSS specificity. The assessment involves editing a CSS file to style an HTML file to match a solutions version.

Uploaded by

Herzer321
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
45 views22 pages

CSS Level One

This document outlines the topics that will be covered in a CSS Level One course, divided into five parts and a final assessment. Part 1 covers the basics of CSS and linking a CSS file to HTML. Part 2 discusses backgrounds, borders, and using div and span tags. Part 3 explains CSS selectors for targeting elements by id, class, and combinations of selectors. Part 4 gives an overview of using the browser inspector tool. Part 5 briefly covers CSS specificity. The assessment involves editing a CSS file to style an HTML file to match a solutions version.

Uploaded by

Herzer321
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 22

CSS Level One

CSS - Level One


Django Bootcamp

● We’ve now completed HTML and it is


time to move on to learning about CSS!
● CSS stands for Cascading Style Sheets
● CSS describes how HTML elements are
displayed on a page
Django Bootcamp

● Styling can affect color, font, size,


borders, and many more properties of
HTML
● While you can define styling inside of an
HTML file, it is much more common (and
better) to create a separate .css file and
then link it to the html file.
Django Bootcamp

● Let’s show a quick example of just how


powerful CSS can be by exploring the
same HTML code, but with different CSS
linked to it.
● https://www.w3schools.com/css/css_intro.asp
CSS Level One - Part 1
CSS - Level One
Django Bootcamp

● In this section of the course the notes are


divided into Parts 1-5 and then we have a
final Level One Assessment
● Each part consists of an html file and a
css file, refer to the contents of the CSS
Level One folder for more information.
Django Bootcamp

● Let’s get started with Part 1, where we


will begin with the very basics of CSS.
CSS Level One - Part 2
CSS - Level One
Django Bootcamp

● In Part 2 we will discuss backgrounds


and borders
● We will also show how to utilize the div
and span tags we mentioned during the
HTML sections of the course.
● Let’s get started!
CSS Level One - Part 3
CSS - Level One
Django Bootcamp

● A major part of what we’ve seen so far


has revolved around the idea of CSS
“selectors”
● Selectors in general are used to target
HTML elements that we want to style
Django Bootcamp

● So far we’ve only approached the idea of


selecting HTML elements by their tag
● But what if we only want to select
subsets? Or select a single element?
● That is where we can use selectors to
clarify exactly what elements we want
Django Bootcamp

● We can use “ids” to target single


elements
● We can use “classes” to target groups of
elements
● We can then use also use combinations
of selector tags to target certain
combinations of elements
Django Bootcamp

● Let’s jump right in to show how this all


works!
CSS Level One - Part 4
CSS - Level One
Django Bootcamp

● We won’t be coding for this lecture, we


will just be getting a tour of the Google
Chrome Browser Inspector
● It is a really useful tool for us to actually
explore the HTML,CSS, and Javascript on
a site!
CSS Level One - Part 5
CSS - Level One
Django Bootcamp

● In this lecture we will briefly cover a CSS


topic called “specificity”
● Specificity defines the hierarchy of CSS
styling, and what type of tags overrule
others.
● Let’s get started!
CSS Level One
Assessment
CSS - Level One
Django Bootcamp

● For this assessment, you will be given an


HTML file already filled out
● It will be your task to edit a CSS file to
make the HTML look like the solutions
version.
Django Bootcamp

● There are three files you will need from


the CSS Level One Folder
○ CSS_Level_One_Assessment.css
○ CSS_Level_One_Assessment.html
○ CSS_Level_One_Test_Solutions.css
● Let’s explore the assessment!
CSS Level One
Assessment - Solutions
CSS - Level One

You might also like