Introduction to CSS for Designers
In this tutorial we'll learn how to use CSS to style a resort website from scratch. Software required: Adobe Edge Code, Google Chrome Browser.
What you'll learn
In this tutorial we'll learn how to use CSS to style a resort website from scratch. We'll use CSS properties that allow us to make changes like the font our site uses, adding a full screen background image, centering a web page in the browser window, and using pseudo selectors for styling interactive content like links and forms. We'll learn how to adjust the amount of space between elements with margins and padding, and how the box model can help us understand how margins, padding, and borders affect the width and height of an element. We'll also discuss important concepts like understanding the browser and how it applies default styles and fonts, and best practices like using a font stack and web safe fonts. For an additional learning resource, the exercise files contain a Key Web Terms Reference Guide PDF so you can get comfortable with important web design terminology. Software required: Adobe Edge Code, Google Chrome Browser.
Table of contents
- Setting Up Our CSS 7m
- Changing the Size of Text 6m
- Changing the Font 4m
- Understanding Fonts for the Web 5m
- Creating a Font Stack 6m
- Beyond Web Safe Fonts: Using Externally Hosted Fonts 8m
- Changing the Font Weight and Using Text Transform 6m
- Using Pseudo Selectors to Style Link States 9m
- Margins and Padding 7m
- The Box Model 5m
- The Box Model in Action 10m
- Centering Web Pages in the Browser Window 7m
- Styling Tables 6m
- Styling Forms 9m
- Adding a Full Screen Background Image 10m