Join James Williamson for an in-depth discussion in this video Learning CSS, part of Introduction to Web Design and Development.
- CSS stands for Cascading Style Sheets and unlike HTML, it's a presentation language, not a markup language. While that means that the syntax is totally different from HTML, it doesn't necessarily mean that it's any harder to learn. In fact, I'd actually say it's a bit easier to learn than HTML. The basics of CSS are pretty simple. Style sheets are made up of rules that control the styling and positioning of HTML elements. Each rule is made up of selectors which are used to target HTML elements and declarations, which contain properties and values that the browser then uses to style the element.
In this case, the p is an element selector and it tells the browser to target all paragraphs in the current document. After the selector, there is a declaration block that's defined by the use of these curly braces. Inside those are properties that tell the browser which font to use, what size the text should be, and its color. As you can see, a colon separates the properties and their values, and then a semicolon is used to move from one property to the next.
Although there are some additional syntax rules to learn, for the most part that's as complicated as CSS gets. So, what should you focus on as you learn CSS? Well, first I recommend learning as much as you can about selectors. There are multiple types of selectors and knowing the rules behind them and how they work is critical to writing efficient CSS. Without the ability to write selectors, you won't be able to target specific page elements or regions.
Next, focus on learning which properties can be set for each type of element and which values are accepted for specific properties. This takes a little bit longer to learn but the basic properties and then values shouldn't take that long to master. You also wanna focus on how you could implement CSS within your HTML pages. CSS can actually be implemented within HTML a number of different ways. Here, for example, we're looking at it as a link external resource and you're gonna need to know when one method is appropriate over the others.
You also wanna learn the three core rendering principles of CSS. Those are Specificity, Inheritance, and the Cascade. These principles control when rules are applied, the order in which they're applied, and how any styling conflicts between rules should be resolved. Without understanding those concepts, you'll never be able to write efficient or effective styles. Because there are some minor differences between how different browsers render specific properties, and because newer CSS properties have uneven support among browsers, it's really important that you have a general idea of what is supported and how rendering might differ from browser to browser.
Occasionally, you can create fallbacks or workarounds for browsers, or simply design around the browsers' differences. As I deal with HTML, at the end of the course I'll provide a few CSS resources to help you get started learning CSS.
This course is part of a Learning Path approved by the American Marketing Association.
Gain the skills you need to become an AMA Professional Certified Marketer (PCM) in Digital Marketing by using the industry-leading courses and resources in the Learning Path. Take the AMA certification exam to show that you have what it takes to lead the digital transformation.
- What is web design?
- What is a web designer?
- Learning to code
- Choosing a web host
- Working with a CMS
- Exploring how websites are structured
- Choosing your framework or software
- Designing with standards and accessibility in mind