Jen Kramer
AnnieCannons
Introduction to CSS
4 hours, 11 minutes
CC
Course Description
Learn the basics of CSS, like how to import styles into an HTML file, how to target specific elements on a page using selectors, useful tools, how to add spacing to a page, and a few ways to create basic layouts. Then, practice your new skills by coding the layout for a blog page.
This course and others like it are available as part of our Frontend Masters video subscription.
Preview
Close
Course Details
Published: September 2, 2019
Learn Straight from the Experts Who Shape the Modern Web
Your Path to Senior Developer and Beyond
- 200+ In-depth courses
- 18 Learning Paths
- Industry Leading Experts
- Live Interactive Workshops
Table of Contents
CSS Basics
Section Duration: 29 minutes
-
Jen instructs students how to set up a HTML file in VS Code for the second section of the bootcamp. -
Jen instructs students how to open a CSS file in VS Code. -
Jen demonstrates how to change fonts with fallback options in the file. Important concepts such as property, value, declaration, declaration block, and selector are introduced. -
Jen explains how to add background colors and then codes a snazzy new border into the web page. -
Jen uses a blockquote to demonstrate how to apply various styles to a tag. Responsive font sizing is also discussed.
CSS Classes & the Cascade
Section Duration: 51 minutes
-
Jen introduces CSS classes for targeting user-specified HTML elements. -
Students are instructed to add 5-6 CSS styles of their choosing to their page as a CSS exercise. -
Jen demonstrates how to utilize CodePen to share work and also view work by others, and then shows off a few student creations. -
Jen examines the cascade within CSS, which allows multiple CSS rules to be applied to an HTML element and determines which effect is visible. -
Jen demonstrates how to utilize pseudo-classes to add extra functionality to the CSS document and how to target links with classes. -
Jen answers questions regarding pseudo-classes. -
Jen explains how descendant selectors coexist with parent selectors within the stylesheet. -
Jen discusses placing styles in stylesheets, between style tags, and inline. Demonstrating specificity in CSS, Jen then goes over "winning" rules in the HTML file, illustrating which cascading styles hold true. -
After explaining how to group CSS declarations to reduce code repetition, Jen reviews ID selectors. ID selectors allow for pinpointing CSS rules to specific portions of a web page.
CSS Tools & Exercises
Section Duration: 10 minutes
-
Jen reviews two tools for color choices for a web page including a website with color combinations, and a browser extension that has built-in tools such as a color picker, eye dropper, gradient generator, and other color tools. -
Jen reviews how to check CSS code for errors using a validator. -
Jen discusses how to post images on the web when moving files from local computer to another hosted service like CodePen. -
Jen instructs students to apply styles to their previous HTML exercise, the book markup.
CSS Spacing
Section Duration: 48 minutes
-
Jen gives an overview of the box model and explains how margin, border, and padding come together within it. -
Jen uses an example on CodePen to illustrate how the div tag works and gives a few of its use cases. -
Jen applies CSS rules such as margin, padding, and borders to style div elements. -
Jen exemplifies padding usage by adding it to the right and left sides of a div element. -
Jen demonstrates how to find and remove default margins from paragraphs and headings and add in new values. -
Jen contrasts block elements, that by default fill their entire container, and inline elements, that are only as large as their content. -
Jen discusses units of measurement in CSS, and explains how they relate to font and spacing. -
Jen reviews the CSS width property, which is used to specify the width of an element. -
Jen reviews the CSS height property, which is used to specify the height of an element. -
Due to the many screen sizes used to browse the web, Jen advises against using the height property, as it will potentially prevent content from being visible.
CSS Layout with Block & Inline Block
Section Duration: 26 minutes
-
Jen demonstrates how to code a navigation bar. -
Demonstrating how to style a navigation bar, Jen adjusts the CSS rules on ul and li elements and adds hover state rules to links. -
Jen adjusts the presentation of the navigation menu items by changing the display property value from its default, inline, to block. -
Jen uses inline-block to convert the vertical navigation bar to a horizontal navigation bar.
CSS Layout with Floats
Section Duration: 28 minutes
-
Jen discusses the purpose of floats and uses the float attribute to position an element to the left. Spacing is then added to the element float was applied to. -
Jen introduces the margin shorthand TRBL, which assigns margins based on four space-separated values. -
Jen explains how to center an article element on any device by setting the element's left and right margins to auto. -
Jen uses the CSS property clear to ensure the floated image remains within the border of the article element. -
Jen introduces an exercise to add floats to a book page. -
Jen shows off a few student creations from the previous exercise.
CSS Layout with Flexbox
Section Duration: 16 minutes
-
Jen introduces flexbox, one method of laying out web pages, by setting an unordered list to display flex. -
Jen demonstrates usage of flex-flow, which combines rules for flex-direction and flex-wrap. -
Jen discusses how to use the justify-content rule to designate the distribution of boxes within the flex container. -
Jen covers flex-basis, which allows boxes within a flex container to take up a chosen percentage of the total space while remaining the same height as the other boxes.
CSS Layout Exercise
Section Duration: 37 minutes
-
Students are instructed to code a blog page using an image of the completed page as a reference. -
Jen codes the first part of the solution, uses inline block, top and bottom borders, and a bottom margin. -
Jen demonstrates how to create a wrapper for the blog using width and an auto margin. -
Jen first identifies the flex container and flex items within the page and HTML code and then uses flexbox to create the solution header. -
Jen uses inline block, list properties, and link properties to create the solution nav bar. -
Jen uses float, clear, and spacing properties to create the layout for the articles list section of the solution. -
Jen congratulates students for making progress on the project.
Learn Straight from the Experts Who Shape the Modern Web
- In-depth Courses
- Industry Leading Experts
- Learning Paths
- Live Interactive Workshops