Introduction to CSS: Add Fundamental Styles to a Portfolio Website Premium class

Jenn Lukas, Front-end Developer and Consultant

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
23 Videos (2h 22m)
    • Trailer

      1:04
    • Welcome!

      2:03
    • Gather our Tools

      jon-arbuckle-site.zip
      2:24
    • Overview of our HTML Class Files

      8:32
    • What is CSS?

      4:10
    • CSS Syntax and Terminology

      3:19
    • How to Add CSS to our Pages

      18:13
    • Troubleshooting and the Web Inspector

      8:15
    • Font Properties

      14:15
    • Text Color and Background Color

      12:53
    • Basic Text Style

      3:56
    • Advanced Text Control

      3:51
    • List Properties

      4:32
    • Background Image

      6:00
    • Adding CSS Files Throughout our Site

      2:34
    • Additional CSS Selectors

      9:02
    • The Cascade

      5:18
    • Grouping Selectors

      13:25
    • Link and Pseudo Classes

      4:54
    • Shorthand Properties

      3:52
    • CSS Comments

      4:01
    • Browser Support

      3:11
    • Next Steps

      2:33

About This Class

e7064d5e

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. 

e5a3a58e

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.

792d91a2

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. 

95 of 97 students recommendSee All

cool
Very simple language and basic knowledge to get started :)

1,718

Students

2

Projects

Jenn Lukas

Front-end Developer and Consultant

9033399c

I'm a multi-talented front-end consultant and freelancer developer in Philadelphia and the founder of Ladies in Tech. I write for The Nerdary, am a columnist for .net magazine, and have contributed to The Pastry Box Project. I have spoken at a variety of conferences including SXSW, An Event Apart, and CSS Dev Conference.

My past experiences range from creating Navy training simulations to leading the front-end team at Happy Cog as Interactive Development Director. I was named one of Mashable’s 15 Developer/Hacker Women to Follow on Twitter, and you can find me on Twitter posting development and cat-related news. When I'm not crafting sites with the finest of web standards, I teach HTML and CSS for GirlDevelopIt and  co-host the Ladies in Tech Podcast