Start modifying how your pages look and feel in this introductory exploration of CSS.

Web Essentials

If you’re looking to style your front-end, this module is for you. You'll find it particularly useful if you're coming from some other area of software development, although prior experience is not required.

In this module, you will start with a short tour of CSS. You’ll get to experiment with it through examples that explain its role and behavior. From there, you will then dive deep into each technology, exploring concepts like CSS patterns to make your web pages look good.

By the end of this module, you will be able to beautify your own web applications.

Cascading Style Sheets (CSS)

<html>
  <head></head>
  <body>
    <h1> I am a header </h1>
    <p class="info">Some vital info</p>
    <p id="warning">Dont do this!</p>
    <p class="info">Some other vital info - really?</p>
    <p class="primary">Basic texts</p>
  </body>
</html>

What's going on up there? 

If you've written a lot of `html`, everything above should make some sense.

Some explanation wouldn't hurt. 

Here we go:

`Line 4` basically adds an `h1` header to the page.  
`Line 5` adds a paragraph with a `class` of `info`  
`Line 6` adds a paragraph too. This time, with an `id` of `warning`   
`Line 7` is pretty straightforward too. Can you figure that out? It says, _"Add a paragraph with a class of `info`"_  
`Line 8` also adds a paragraph to the page but with a class of `primary`


Now we are on the same page. At the end of this lesson you'd have styled the markup as seen below:



We will put together all we've learned so far to build something cool. Well, not particularly cool, but a good step in the direction of building some more amazing things.

A Quick Look at CSS Selectors: Type Selectors