CSS for Designers

CSS for Designers

by
Released January 2015
Publisher(s): O'Reilly Media, Inc.
ISBN: 9781491917770

Read it now on the O’Reilly learning platform with a 10-day free trial.

O’Reilly members get unlimited access to books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial

Video description

CSS is a powerful language for creating and controlling your website’s presentation, but it’s more of a visual language than a traditional coding tool. With this video workshop, you’ll quickly learn how to solve a wide range of style issues with CSS, whether you’re a web designer just starting to code, an experienced developer looking to refresh your skills, or a student looking to get into web design.

UX designer Adrian Mendoza starts with the basics and then adds layers of code and complexity as the course progresses. Along the way, you’ll learn how to create a non-functional spec, build a style guide, and develop page templates.

  • Get an overview of CSS with a basic demo
  • Set up your programing environment and organize your files
  • Learn the basic CSS types and explore CSS syntax
  • Create a non-functional spec: a document based on business decisions that affect coding
  • Build a style guide for color, font styles, links, padding, margins, borders, and backgrounds
  • Develop a page template with Div styles, layouts, and buttons
  • Code and test your CSS for cross-browser compatibility
  • Optimize CSS and minimize your code for performance

Adrian Mendoza has spent more than 20 years working in design and user experience. Founder of Mendoza Design, he has consulted on a variety of user experience for web and mobile projects.

Table of contents

  1. Introduction to CSS
    1. Course Introduction Introduction to CSS
    2. Creating a Functional Spec
    3. Setting up your Environment
    4. Organizing your Project
  2. Learning CSS Basics
    1. Learning CSS Basics
    2. Setting up Your CSS Files in Your HTML
    3. Setting up a reset.css in Your Project
    4. Looking at CSS Syntax
  3. Creating the Style Guide
    1. Creating the Style Guide Introduction
    2. Setting up Your Style Guide
    3. Using Color in CSS
    4. Font Styles: Using Font Weight
    5. Font Styles: Using Font Size
    6. Font Styles: Using Font Family
    7. Font Styles: Adding to your Style Guide
    8. Creating Custom Fonts Using @Fontface
    9. Styling Links
    10. Padding: Adding Padding to Classes and DIV's
    11. Margins: Adding Margins to Classes and DIV's
    12. Borders: Adding Borders to Classes and DIV's
    13. Styling Backgrounds
    14. Presenting Your Style Guide: How to Present Your Style Guide to Others
  4. Creating a Page Template
    1. Introduction to Creating Page Templates
    2. Creating Your First Page Template
    3. Creating Div Styles: Adding Dropped Shadows
    4. Creating Div Styles: Adding Rounded Corners
    5. Creating Div Styles: Adding Translucency
    6. Creating Div Styles: Adding Gradients
    7. Creating Layouts Using DIV’s: Introduction to Creating a Layout Using Div's
    8. Creating Layouts Using DIV’s: Adding a Column
    9. Creating Layouts Using DIV’s: Adding Heights
    10. Creating Layouts Using DIV’s: Adding Widths
    11. Creating Layouts Using DIV’s: Adding Left and Right Floats
    12. Creating Layouts Using DIV’s: Adding Layers
    13. Creating a Page Structure for HTML 5
    14. Creating Buttons: Creating the Button
    15. Creating Buttons: Adding Hover State
    16. Creating Buttons: Adding Images
    17. Creating a Page Template Wrap Up
  5. Getting Ready for Production
    1. Getting Ready for Production
    2. Cross Browser Compatibility
    3. Optimizing Your CSS: Add Multiples Classes on One Line
    4. Optimizing Your CSS: Streamlining CSS Attributes Using Shorthand
    5. Optimizing for Performance

Product information

  • Title: CSS for Designers
  • Author(s):
  • Release date: January 2015
  • Publisher(s): O'Reilly Media, Inc.
  • ISBN: 9781491917770