Introduction to CSS

Learn how to design websites in less than an hour

    <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 
        */
Eric Tirado3:34a year ago
    .box {
        background-color: lightgray;
        width: 100px;
        height: 100px;
        padding: 10px;
        box-sizing: border-box;
    }
    .content {
        background-color: white;
        
    }
Eric Tirado3:25a year ago
    .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;
    }
Eric Tirado1:45a year ago
    .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 {
Eric Tirado1:50a year ago
    .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; */
    }
Eric Tirado1:26a year ago
    @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;
Eric Tirado3:44a year ago
    .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>

Learn how to style websites like a pro

CSS is what makes websites look beautiful, so it's a must-have skill for any web designer or developer. This course will teach you the basics of it in less than an hour. So sit back and enjoy 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!

Eric Tirado, course creator

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

Thank Eric for the course

What people say about this course

How about some company while you learn?

We've created a community chat so that you can ask questions, help others, and connect with like-minded people.

Join community chat