CSS TutorialLesson #1

CSS HOME

`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#1572B6">`

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#1572B6">

</svg>

Learn CSS

CSS is the language we use to style an HTML document.

CSS describes how HTML elements should be displayed.

This tutorial will teach you CSS from basic to advanced.

Learn CSS now

New EA Academy Adventure App

Adventure Mode

Learn CSS in bite-sized quests with XP and streaks. Your progress grows for each new adventure! Free on iOS and Android.

Download on theApp Store GET IT ONGoogle Play

<img src="/adventure/img/screen-map.png" width="420" height="868" alt="CSS adventure map in the EA Academy Adventure app" loading="lazy"> <img class="adv-promo-mascot" src="/adventure/img/mascot-lynx.png" width="230" height="295" alt="" loading="lazy">


Examples in Each Chapter

This CSS tutorial contains over 700 CSS examples.

With our online editor, you can edit the CSS, and click on a button to view the result.

CSS Example

Example Code

css
Try it Yourself
body
{
  background-color: lightblue;
}

h1
{

  color: white;

  text-align: center;

}

p
{

font-family: verdana;

  font-size: 20px;

}

Click on the "Try it Yourself" button to see how it works.


CSS Examples

Learn from over 700 examples! With our editor, you can edit the CSS, and click on a button to view the result.

Go to CSS Examples!


Use the Menu

We recommend reading this tutorial, in the sequence listed in the menu.

If you have a large screen, the menu will always be present on the left.

If you have a small screen, open the menu by clicking the top menu sign .


CSS Templates

We have created some responsive W3.CSS templates for you to use.

You are free to modify, save, share, and use them in all your projects.

Free CSS Templates!


CSS Exercises

Many chapters in this tutorial end with an exercise where you can check your level of knowledge.


CSS Quiz

Test your CSS skills with a quiz.

Start CSS Quiz!


Track Your Progress

Create a EA Academy account and get access to more features and learning materials:

  • View your completed tutorials, exercises, and quizzes
  • Keep an eye on your progress and daily streaks
  • Join the leaderboard and compete with others
  • Get your own avatar and unlock new skins
  • Create your own personal website

Sign Up

Note

This is an optional feature. You can study at EA Academy without creating an account.


CSS References

At EA Academy you will find complete CSS references of all properties and selectors with syntax, examples, browser support, and more.

CSS Properties

CSS Browser Support

CSS Selectors

CSS Combinators

CSS Pseudo-classes

CSS Pseudo-elements

CSS At-rules

CSS Functions

CSS Animatable

CSS Web Safe Fonts

CSS Units

Px to Em Conversion

CSS Colors

CSS Default Values

CSS Entities

CSS Aural

Interactive Code Examples

CSS Example

css
Try it Yourself
Interactive runnable CSS example from EA Academy.
Live Output Preview: