CSS - Basics

Now that you've got HTML basics in your toolkit it's time to get fancy with style! With CSS, you'll learn how to style your personal introduction page to look more like a magazine and less like a grocery list.

“Given a div element that has a background color of yellow, a width and height of 100px, 15px padding, 10px margin and 1px black border. In an otherwise green page how many pixels will render yellow?”
sample interview question

Having completed lesson 1 you learned how to use HTML to structure very basic web pages. Pages that look liked they were timewarped here from the 90s! Just kidding, but let’s fix that by introducing some CSS to the mix. CSS is an abbreviation for Cascading Style Sheets, which sounds complicated, but you can think of it as a little magic dust you sprinkle on your page to control its appearance by telling the browser how all the different instances of all the different HTML elements in all the different parts of your page or application should appear when it renders them. For everything from background colors and font styles to menu bars and those “newspapery” paragraphs that wrap around images — CSS is your man and HTMLs flashy sidekick!

A Beginner’s Guide to HTML & CSS, Lesson 1 CSS explained by a Google Engineer.

Now that you’ve been gently introduced, let’s head on over to our favorite interactive online code school, Codecademy, and take the first three sections of CSS: Coding with Style. These Codecademy tutorials will help you expand upon your very simple web page to create a very useful web page — your résumé! You will read about all the different ways you can include CSS style in your page and when you should use each method. Good Luck and hope to see you soon! Sections 1-3 of CodeCademy / CSS: Coding with Style.

Got it? Well, there's a little more. To learn the best way to format your new site with bold, italic and linked text, read, or at least breeze through Shay Howe's Lesson 2 - Elements & Semantics and refer to it during the challenge. It will help you choose the best practices for structuring your personal résumé page.

A Beginner’s Guide to HTML & CSS - Elements and Semantics, Lesson 2
What's next? Do the challenge!

1 Comments — Join the discussion

  • 768af3def250eed3bbd49cd1e562b6f5?&s=30&d=mmLenny

    Good luck everyone! This whole interview/practice process is definitely innovative for a company. Loving the refreshing exposure to old ideas. : )