Cascading style sheets are a fundamental part of front-end web development. Learn how CSS gives us the ability to separate style from content.
- [Instructor] If you're a designer or developer trying to stay on top of current web technology you may feel overwhelmed at the sheer volume of languages and technologies out there. I frequently hear folks say that they're not even sure where to start and I remember thinking the same thing when I started out. I want to introduce you to CSS and show you how it fits into the bigger picture of web development. CSS stands for Cascading Style Sheets. It's a style language used to control the appearance of markup languages like HTML. So you can think of HTML as controlling the structure of the web while CSS controls the presentation of it.
In other words, CSS is what makes the web pretty. I like the way, James, a fellow instructor of mine puts it. Think of HTML as the structure of a new building, your house. You can see this structure as it's being built, but you don't really know what it's going to look like. That's where CSS comes in. It's the skin that shows what the outside of the house will look like. By separating structure and presentation in this way you can change how things look simply by changing the CSS. You don't have to change the underlying structure.
When it comes to syntax CSS is not a markup language like HTML or a scripting language like Java Script, it's a stylesheet language. That means that CSS comes with its own set of formatting rules to identify elements in a document and specify what style should be applied. When it comes to using CSS with HTML there are a few ways to apply CSS to a file. First you can apply styles inline directly to an element. You can apply styles in a style block to find directly inside of a webpage or you can apply styles from an external style sheet that ends in a .css extension.
You can also use multiple style sheets for a single webpage or website. The cascading part of CSS means that style information from multiple sources can be combined. For instance you could have several external style sheets as well as inline styles. The tricky part comes into play when there are multiple style rules for a particular piece of HTML. Which style takes precedent? There has to be a way of figuring out which specific style sheet rule wins. The rule used is chosen by cascading down from the most general rules to the most specific.
The most specific rule is always the one that wins the contest. A simple framework for this might be to think of government laws. There are broad laws at a federal or a country level that apply. There are additional state or providence laws, but ultimately it's the local laws that rule. Similarly external style sheets tend to offer the broadest style rules, however, it's the inline styles that ultimately win if they exist. Talking about the benefits of CSS probably the biggest one is that it provides a separation between style and structure.
That means that you could change styles without changing any underlying structure or content. Going back to our building example we could paint it a different color without changing a thing about its structure or interior. You can also speed development and site maintenance by controlling the formatting for an entire site through a single style sheet. Another great benefit of CSS is that it enables us to define styles based on the size of the device. You can optimize the presentation based on whether someones viewing a website on a phone, tablet, desktop, or whatever other ways technology gives us to experience the web.
So how does CSS fit into the bigger picture of web development? Well it's an essential part of the process. If you want to learn front end web development learning CSS is a must.
- What is CSS?
- Understanding how CSS works with HTML
- Applying fonts
- Understanding the classic box model
- Setting margins and padding
- Positioning elements
- Basic CSS layout concepts
- Media types and media queries
- Working with CSS frameworks and CSS grids
- Creating responsive layouts
- Tools that help you write and maintain CSS