Table of Contents

CSS is how web pages get their looks. Learn CSS with our beginner's guide, where you'll learn how to style and design your webpage.

  1. Fundamentals
  2. Learn the fundamentals of CSS.

    1. Introduction to CSS
    2. In this tutorial series, we'll teach you how to use CSS to amp up your website presentational skills.

    3. Three ways to apply CSS
    4. Learn the three ways to apply CSS to an HTML document: inline, internal and external.

    5. Basic CSS Selectors
    6. Learn how to use type, class, id and universal selectors in CSS to apply presentational elements to your webpage.

    7. Using CSS Combinators
    8. Learn how to use CSS decendant, child, adjacent and general sibling combinators.

    9. How CSS Cascading Works
    10. Learn how CSS rules are determined with cascading in CSS.

    11. Applying Colors in CSS
    12. Learn how to apply colors in CSS using predefined, HGL, and RGB values.

    13. Using Lengths in CSS
    14. Learn how to use different relative and absolute lengths in CSS: ex, ch, em, rem, vw, vh, vmax, min and px.

  3. Text
  4. Learn how to apply and select texts in CSS.

    1. Introduction to CSS Text
    2. Learn how to apply text in CSS

    3. Font Types
    4. Learn the different font types: serif, sans-serif and monospace.

    5. Getting Fonts
    6. Learn how to get fonts using the font-family

    7. Applying Font-Family
    8. Learn how to apply fonts with the CSS property font-family along with how to change font sizes and learn about type scales.

    9. Bolding and Italicizing
    10. Learn how to bold and italicize text in CSS.

    11. Applying Text Decorations and Shadow
    12. Learn how to apply underline, overline, through-text and drop-shadow styles to text in CSS.

    13. Using text-transform
    14. Learn about the different font effects you can apply to your text through CSS.

  5. Boxes
  6. Learn how to manipulate and apply decorations to CSS boxes.

    1. Introduction to CSS Boxes
    2. CSS Seems too difficult to comprehend? Try thinking every element on the page as a Box!

    3. The CSS Box Model
    4. Introduction to the CSS Box Model. Learn about padding, margin and the content area.

    5. Applying Padding and Margin in CSS
    6. How to create the proper amount of white space by applying padding and margin using CSS.

    7. Playing with Boxes
    8. Learn how to adjust the height and width of a CSS box.

    9. Playing with Borders
    10. Learn the different types of border including solid, dotted, dashed, double, groove, ridge, inset, and outet.

    11. Playing with Border Effects
    12. Learn how to apply box shadows in CSS.

    13. Border Radius and Creating Ellipses
    14. Learn how to turn ridged rectangle borders smooth with the border-radius property.

    15. The Box-Sizing Property
    16. Learn how to adjust which elements appear as margin and padding, with the CSS box-sizing property.

    17. Handling Text Overflow
    18. Learn how to properly handle text overflow.

    19. Word and Line Wrapping
    20. Learn how to use word-wrap and white-space to handle text wrapping.

  7. Images
  8. Learn about images in CSS.

    1. Introduction to CSS Images
    2. In this short section, we'll go over how to size images and add opacity to CSS images.

    3. Sizing Images in CSS
    4. Here, we'll learn how to set the height and width of an image, and discuss how it's important in saving user bandwidth.

    5. Adding Image Opacity in CSS
    6. Learn how to make an image transparent with the opacity property.

  9. Backgrounds
  10. Learn about backgrounds in CSS.

    1. Introduction to CSS Backgrounds
    2. Learn how to place CSS backgrounds, and apply positioning to them.

    3. Applying a Background through CSS
    4. How to place an external image as a background image in CSS .

    5. Using background-origin and background-clip in CSS
    6. Learn how to specify the placement with the background-clip and background-origin CSS properties.

    7. How to position a background in CSS
    8. Learn how to position a background in CSS, and how to keep your background fixed while the user scrolls through its contents.

    9. Using Background Repeats
    10. Learn about the different types of background repeats available in CSS.

    11. Using Multiple Backgrounds
    12. Learn how to user multiple backgrounds, along with the shorthand notation background property.

    13. Rollover Sprites in CSS
    14. Learn how to make an image sprites through CSS.

  11. Intermediate
  12. Learn about intermediate selectors and concepts in CSS.

    1. Introduction to Intermediate CSS Concepts
    2. Learn how to use dynamic, before and after pseudoclasses, along with attributes selectors and vendor prefixes.

    3. Using CSS Pseudo Class Selectors
    4. Learn how to select the first or last element, first/last of a type, not, nth or nth-last-child, or only a certain type or only child element in CSS.

    5. CSS Before and After Pseudoclasses
    6. Learn how to apply content before and after an element in CSS.

    7. CSS Dynamic Pseudo Classes
    8. Learn how to select an active, visited, hovered, or focused linke using dynamic pseudo classes in CSS.

    9. CSS Attribute Selectors
    10. Learn how to select based on attribute existence, equality, ends with, starts with, or with a specific substring.

    11. Using Vendor Prefixes
    12. Learn how to use vendor prefixes to account for elements that are still in experimental browser support.

  13. Typography
  14. Learn about typography, and how you can use it to better text readability, legibility and overall user experience in CSS.

    1. Introduction to CSS Typography
    2. Learn about typography, the art of choosing the right font and optimizing the style and appearance of text, in this CSS tutorial.

    3. Legibility
    4. Legibility is the quality of text being clear enough to read. We'll look into the type face anatomy, going over the ascender and descender lines, cap height, and x-height for this lesson.

    5. Readability
    6. Learn how to manage the line width and height spacing to maximize user experience. Additionally, learn about chunks to create white spaces around blocks of text.

    7. Font sizes
    8. Learn how to use the font-size property, and all about type scales in CSS.

    9. Leading and Kerning
    10. Make sure that the space between your characters (kerning) and lines (leading) are appropriate in CSS.

    11. Vertical and Horizontal Alignments
    12. Learn how to horizontally and vertically align text with the text-align and vertical-align properties in CSS.

    13. Color Schemes
    14. Choose the right color scheme to optimize contrast for user readability in CSS.

  15. Layout
  16. Learn how to layout a page using CSS

    1. Introduction to CSS Layouting
    2. Learn all about layout techniques in CSS. We'll go over the display, position, column, and float properties.

    3. Displaying
    4. Learn how to use the display property to display inline, block and inline-block. We'll also go over how to hide elements with display and visibility.

    5. Positioning
    6. Learn how to position elements in absolute, relative or fixed position attributes.

    7. Column Layouts
    8. Learn how to use column layouts to make text span multiple columns.

    9. Floats
    10. Learn how you can use floats to make elements hug the left or right walls of a containing parent element.