Sorry, your browser is not supported
To have the best experience using Skillshare, we recommend that you use one of these supported browsers.

Introduction to CSS: Add Fundamental Styles to a Portfolio Website

Jenn Lukas, Front-end Developer and Consultant

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
23 Videos (2h 22m)
    • 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


About This Class


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. 

114 of 116 students recommendSee All

Great class! The explanations are complete and fun to watch. I learned a lot!
Trijnie Nanninga

Creature Creator

loved the course, was absolutely great!
Once again, just awesome. I was taking this as a refresher, but I feel like I walked away with a complete and clear understanding of CSS. I'd love to see a Javascript class by the same instructor!!!





Jenn Lukas

Front-end Developer and Consultant

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 o...

See full profile