- Discuss what CSS does and why it's important
- Cover the basics of HTML
- Differentiate between inline, internal, and external stylesheets
- Demonstrate the anatomy of a declaration block
- Understand how to use class, id, and element selectors, and selector order of importance
- Demonstrate the use of the box model
- Demonstrate the use of CSS grid in page layout
- Introduce CSS Frameworks like Bootstrap and Semantic UI
What does CSS mean?
Cascading Stylesheets
Why do we use it? Makes the internet look pretty
-
CSS Zen Garden:
csszengarden.com -
My Favorite:
lingscars.com
- Some elements need an opening and a closing tag.
<tag>Content</tag><h1>Heading</h1>- h1 - h6
<p>Paragraph</p>
- You can nest elements within other elements.
<ul></ul>(Unordered list) /<ol></ol>(Ordered list)<li>List Item</li>
<div></div>(block) /<span></span>(inline)
- Some elements are self closing.
<tag /><br /><img />
<tag style="property:value or values;”>
<head>
<meta…></meta>
<title…></title>
<style>
tag {
property: property value or values;
}
</style>
</head>
selector(s) { property: value or values; property: value; }
- HTML tags/elements - Least specific
- Classes
.class-name
- Ids - Most specific
#id-name
Element Selector:
p {
font-size: 20px;
}
Class Selector:
.navbar {
margin-bottom: 0px;
}
ID Selector:
#main-page-title {
font-family: sans-serif;
}
Selecting Multiple Elements:
p, .navbar, #main-page-title {
color: green;
}
- For an external stylesheet we have to add a link in the head that looks something like this:
<link rel="stylesheet" href="./stylesheet.css">
4 Elements of the box model:
- Margin
- Border
- Padding
- Content
Flex-based layout system
- Use this to organize your elements horizontally OR vertically
- CSS Flexbox Froggy is a great resource for this! vvv
Grid-based layout system
- Use this to organize your elements horizontally AND vertically all at once
- CSS Grid Garden is a great resource for this! vvv
These properties make it easy to create well-designed and responsive pages
Frameworks do a lot of the CSS work for us!!!
You can style your website very quickly by using a framework, but there are some drawbacks.
Semantic UI
Bootstrap
Materialize
Awwwards - For inspiration
codrops - Fantastic resource for all things CSS
w3schools - Great HTML resource
w3schools - Great CSS resource
CSS Tricks - The best resource for learning and understanding flexbox and grid
CSS Grid Guide - Takes you straight to the grid page
CSS MDN - Another goodie
CSS Zen Garden - Great examples of some rock solid CSS experiences
Flexbox Froggy - THE BEST way to learn flex
CSS Grid Garden - THE BEST way to learn grid
Code Pen - code examples with code sandbox
CSS Grid Generator - Awesome tool to implement css grid quickly
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent