Styling With Css Intro

We've learned a bit about HTML. While HTML does a great job of putting words and pictures on the page, CSS exists to make your content look good.

Make This Look Good

Let's take a look at a rather simple example of what CSS does. Go ahead and flip between the HTML and CSS tabs of the CodePen below. You'll see the HTML section has just a simple header: <h1>This Is My Header</h1>. The text turns up red though. How is that possible? The magic of CSS is how. Click on the CSS tab. You'll notice we set the color to red with this line: color: red. If you change the red to green what happens? It turns green! BOOM You just wrote your first CSS. Congrats!

In the CSS, color is what we refer to as a property. The color property defines what the text color of all h1 HTML elements should be. If we change the value of color to blue, any h1 element on the page will turn blue.

Note: Normally, every CSS property we define needs to end with a semi-colon (;). The one exception is when there is only a single property defined as is the case here. It is good practice to go ahead and add a semi-colon, though:

h1 {
  color: red;

Now that you understand the basics of CSS, continue on to the next lesson and get a deeper understanding of CSS.

Unlock your future in tech
Learn to code.

Learn about Flatiron School's Mission

With a new take on education that falls somewhere between self-taught prodigy and four-year computer science degree, the Flatiron School promises to turn students with little programming experience into developers.

In the six months since the Manhattan coding school was acquired by WeWork, it has spawned locations in Washington, D.C., Brooklyn, and London. Now, WeWork is opening a fourth Flatiron School location, this time in Houston.

Adam Enbar, Flatiron School's cofounder, believes now is the time to grow. "How the world is changing has impacted working and learning in very similar ways. We think education fundamentally is about one thing: enabling people to pursue a better life."

Learn. Love. Code.
Students come to Flatiron School to change their lives. Join our driven community of career-changers and master the skills you need to become a software engineer or a data scientist.
Find Us