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:363 months 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;
    }
Eric Tirado5:063 months ago
    #id {
        background-color: blueviolet;
    }
    html .class {
        background-color: tomato;
    }
    .class {
        background-color: goldenrod;
    }
    html body {
        background-color: aqua;
    }
    body {
        background-color: goldenrod;
Eric Tirado2:543 months ago
    #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%;
    }
Eric Tirado3:493 months ago
    .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:343 months ago
    .box {
        background-color: lightgray;
        width: 100px;
        height: 100px;
        padding: 10px;
        box-sizing: border-box;
    }
    .content {
        background-color: white;
        
    }
Eric Tirado3:253 months 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:453 months 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:503 months ago
    .box {
        width: 100px;
        height: 100px;
        padding: 10px;
        border: 10px solid lightgreen;
        margin: 10px;
        box-sizing: border-box;
    }
Eric Tirado1:423 months ago
    .box {
        margin: 20px;
    }
    .hidden {
        /* display: none; */
        /* visibility: hidden; */
        /* opacity: .5; */
    }
Eric Tirado1:263 months 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:443 months 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;
    }
Eric Tirado3:023 months ago
    <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>
Eric Tirado5:313 months ago
    /* 
        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>
Eric Tirado1:023 months ago

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!

What people are saying about Scrimba: