CSS (Level 2)

The first part of the pre-course will provide you with an overview of CSS and resources to cover the basics that you need.

Introduction to CSS

CSS is the language we use to style a Web page.HTML was NEVER intended to contain tags for formatting a web page! HTML was only created to describe the content of a web page, like:

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

When tags like <font>, and color attributes were added to the HTML 3.2 specification, it started a nightmare for web developers. The development of large websites, where fonts and color information were added to every single page, became a long and expensive process. To solve this problem, CSS was created. CSS removed the style formatting from the HTML page!

What is CSS?

• CSS stands for Cascading Style Sheets

• CSS describes how HTML elements are to be displayed on the screen, paper, or in other media

• CSS saves a lot of work. It can control the layout of multiple web pages all at once

• External stylesheets are stored in CSS files

CSS Crash Course

watch this video to get an understanding of HTML

This video will give you a clear understanding of CSS and how to use it. We really recommend dedicating time to watching it as it will save you a lot of time trying to understand things on your own!

Concepts

In order to get a good understanding of CSS, you will need to review and understand the following:

Please note that we use ⏱ to indicate the timestamp in the attached video.

• Intro to CSS - https://www.w3schools.com/html/default.asp (⏱ 0:00)
• CSS Syntax - https://www.w3schools.com/css/css_syntax.asp (⏱ 2:55)
• Colors background-color - https://www.w3schools.com/css/css_colors.asp (⏱ 7:11 & 13:31)
• CSS Selectors *{} - https://www.w3schools.com/css/css_selectors.asp (⏱ 11:14)
• Fonts font-family - https://www.w3schools.com/css/css_font.asp (⏱ 15:46)
• Classes class - https://www.w3schools.com/html/html_classes.asp (⏱ 20:00)
• Box Model - https://www.w3schools.com/css/css_boxmodel.asp (⏱ 24:53)
• Lists ul / ol - https://www.w3schools.com/css/css_list.asp (⏱ 33:00)
• Links a:hover - https://www.w3schools.com/css/css_link.asp (⏱ 39:10)
• Forms input[type=text] - https://www.w3schools.com/css/css_form.asp (⏱ 44:20)
• Align margin / padding - https://www.w3schools.com/css/css_align.asp (⏱ 51:20)
• Position absolute / relative https://www.w3schools.com/css/css_positioning.asp (⏱ 57:10)
• Background background-image https://www.w3schools.com/css/css_background.asp (⏱ 1:03:41)
• Flexbox https://www.w3schools.com/css/css3_flexbox.asp

Additional Resources

Here are some additional links that you might find helpful to explore and understand CSS:

• MDN official HTML documentation
• Codecademy: Learn HTML