Introduction to CSS: Add Fundamental Styles to a Portfolio Website

So you know some HTML and are hip to what Mayor Bloomberg and Snoop Dogg were proclaiming. The next step in the website process is to add some design to that structure with Cascading Style Sheets (CSS).

CSS allows us to add presentation to our otherwise, kind of bland HTML-only page. Want colors? You got it! Want large font sizes and small font sizes? We can do that, too! Want to spruce your page up with Comic Sans? You have that power….though some might argue whether or not that's a good idea, but no judgement here! 

In order to get whatever aesthetic you fancy onto your HTML, we first need to learn how CSS is structured, how to apply it to your page, and how to start creating declarations to have the design rules take effect. 

What You'll  Learn

• What is CSS? You'll learn the difference between HTML and CSS, and how they relate to each other.
• CSS Properties. We'll go over the basic elements of CSS and how to code a pages style.
• CSS in Action. How to apply fundamental styles such as: font sizes, font faces, colors, backgrounds, and other text characteristics to your page.
  

What You'll Make:

We'll take a four page HTML-only portfolio site and link it to a new CSS document. We'll apply basic styles to our elements and see how those take effect on our HTML document. We'll learn how the cascade works, different selector types, and the syntax to create the rules. 

We won't be diving into CSS layouts at this point,  as first we'll need to cover the necessary fundamentals to getting the presentation layer onto our project. We'll see how adding these different styles allow for easy customization of your own portfolio site and start to see how with this knowledge, the design possiblities are plentiful. There will also definitely be pictures of cats involved. Perhaps pandas, too. 

• Trailer
• Welcome!
• Gather our Tools
• Overview of our HTML Class Files
• What is CSS?
• CSS Syntax and Terminology
• How to Add CSS to our Pages
• Troubleshooting and the Web Inspector
• Font Properties
• Text Color and Background Color
• Basic Text Style
• Advanced Text Control
• List Properties
• Background Image
• Adding CSS Files Throughout our Site
• Additional CSS Selectors
• The Cascade
• Grouping Selectors
• Link and Pseudo Classes
• Shorthand Properties
• CSS Comments
• Browser Support
• Next Steps