Introduction to CSS

This course contains 20 interactive tutorials and will teach you the basics of CSS in an hour. It's the perfect starting point for aspiring web developers and designers who want an easy way to learn CSS.

    <html>
        <head>
            <link rel="stylesheet" href="index.css">
        </head>
        <body>
            <div class="card">
               <p>
                   <b>FREE HTML COURSE:</b>
                   https://scrimba.com/g/ghtml
                </p>
            </div>
        </body>
    </html>
    <!-- FREE HTML COURSE -->
Eric Tirado1:36a year ago
    <html>
        <head>
            <link rel="stylesheet" href="style.css">
            <!-- <style>
                body {
                    background-color: black;
                    color: white;
                }
            </style> -->
        </head>
        <body >
            <section>
                <h1>APPLYING STYLES</h1>
                <h3>Inline Styles</h3>
    section > b, div > b {
        color: blueviolet;
    }
    
    
    
    
    /* Selectors */
    /* https://www.w3schools.com/cssref/css_selectors.asp */
    
    /* Combinators */
    /* https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors */
    .box {
        border: 2px solid;
        background-color: white;
    }
    #classes {
        color: slateblue;
    }
    #ids {
        color: tomato;
    }
    #classes > P > b, #ids li > b {
        color: goldenrod;
    }
    #id {
        background-color: blueviolet;
    }
    html .class {
        background-color: tomato;
    }
    .class {
        background-color: goldenrod;
    }
    html body {
        background-color: aqua;
    }
    body {
        background-color: goldenrod;
    #inline * {
        display: inline-block;
        width: 200px;
        height: 100px;
    }
    #block * {
        width: 200px;
        height: 200px;
    }
    
    /* More Info about Block vs Inline Elements */
    /* https://www.w3schools.com/html/html_blocks.asp */
    /* More Info about Width & Height */
    /* https://www.w3schools.com/css/css_dimension.asp */
    .bar {
        width: 50%;
    }
    .progress {
        width: 50%;
    }
    .box {
        background-color: rgba(255,0,0,.5);
    }
    
    
    
    
    /*  COLOR NAMES LIST: 
        https://www.w3schools.com/cssref/css_colors.asp 
        */
    
    /*  COLOR TYPES: 
        https://www.w3schools.com/cssref/css_colors_legal.asp 
        */
    .box {
        background-color: lightgray;
        width: 100px;
        height: 100px;
        padding: 10px;
        box-sizing: border-box;
    }
    .content {
        background-color: white;
        
    }
    .box {
        background-color: lightgray;
        width: 100px;
        height: 100px;
        padding: 10px;
        /* box-sizing: border-box; */
        border: solid 10px lightgreen;
    }
    .content {
        background-color: white;
        padding: 10px;
        box-sizing: border-box;
    }
    .parent {
        background-color: rgba(0,0,0,.3);
    }
    .box {
        background-color: lightgray;
        width: 100px;
        height: 100px;
        padding: 10px;
        margin: 10px;
        /* box-sizing: border-box; */
        border: solid 10px lightgreen;
    }
    
    .content {
    .box {
        width: 100px;
        height: 100px;
        padding: 10px;
        border: 10px solid lightgreen;
        margin: 10px;
        box-sizing: border-box;
    }
    .box {
        margin: 20px;
    }
    .hidden {
        /* display: none; */
        /* visibility: hidden; */
        /* opacity: .5; */
    }
    @import url('https://fonts.googleapis.com/css?family=Black+Han+Sans');
    body {
        background-color: #3D85C6;
        color: rgba(0,0,0,.8);
        height: 95vh;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    .font {
        font-family: 'Black Han Sans', arial, sans-serif;
        font-size: 30px;
        font-weight: bold;
    .inline {
        background-color: slateblue;
        color: white;
        padding: 2px 5px;
        display: inline-block;
        width: 100px;
        height: 100px;
        margin: 5px;
    }
    .block {
        border: 2px solid tomato;
        padding: 5px;
    }
    <html>
        <head>
            <link rel="stylesheet" href="instructor.css">
            <link rel="stylesheet" href="index.css">
        </head>
        <body>
            <h1>Floating Elements</h1>        
            <!-- <img src="https://placeimg.com/400/400/animals"> -->
            <section>
                <div class="box tomato"></div>
                <div class="box purple"></div>
                <div class="box gold"></div>
                <div class="box green"></div>
                <div class="clearfix"></div>
    /* 
        CHALLENGE
        — Apply a percent width to CONTENT ID of 75 percent and set the 
        - Apply a height of 400 pixels to the CONTENT & NAVIGATION IDs
        — Apply a pixel height to the HEADER and FOOTER ID of 50 pixels
        — Apply the proper float values to the content and navigation ID
        — Apply a clear property that clears all floated elements to the
    */
    
    #header {
    	background: #44accf;
        height: 50px;
    }
    #content {
    body {
        padding-bottom: 100px;
    }
    
    .first {
        position: relative;
        top: -40px;
        margin-bottom: -40px;
    }
    .second {
        position: relative;
    }
    .ribbon {
        position: absolute;
    ul a:hover::before {
        content: "⇨  ";
        color: red;
        margin-right: 20px;
    }
    
    /* 
        Pseudo Elements
        https://www.w3schools.com/css/css_pseudo_elements.asp
        
        Psudo Classes
        https://www.w3schools.com/css/css_pseudo_classes.asp
     */
    <html>
        <head>
            <link rel="stylesheet" href="instructor.css">
            <link rel="stylesheet" href="index.css">
        </head>
        <body>
            <header>
                <h1 class="class" id="id" >Congratulations!</h1>
            </header>
            <section>
                <h2>
                   We have learned...
                </h2>
                <ul>

Looking for a simple way to learn CSS? You've come to the right place 🎯

CSS is what makes websites look beautiful, so it's a must-have skill for any web designer or developer. Luckily though, this course makes it super-easy to learn the basics. And it only takes an hour!


Just enroll in the course and sit back to enjoy the brilliant Scrimba-instructor Eric Tirado's fun and engaging explanations! Towards the end of the course you'll also be given a challenge to make sure you've understood the concepts.

Before enrolling in the course, you should a have basic knowledge of how HTML works. If you don't have that, we'd recommend you to take Eric's Introduction to HTML course first.

Course content:

  • CSS Documents and the cascade
  • Selectors, properties & values
  • Classes and id's
  • Specifity
  • Widths & heights
  • Length units
  • Colors
  • Padding
  • Borders
  • Margins
  • The box model
  • Visibility
  • Fonts
  • Element flow
  • Float & clear
  • Float layout challenge
  • Position property
  • Pseudo classes / elements

... so enroll in this course today, and you'll be a CSS ninja in no time!

what other people say

the ultimate code learning experience

meet your teacher

The course creator

Eric Tirado

Eric is a believer, designer, front-end develper, learner, teacher. His popular introductions to HTML and CSS on Scrimba has helped tens of thousands of aspirings coders get into web development.

Thank Eric for the course

secure your free spot