Browsers have built-in stylesheets, also called user agent stylesheets. Understand how these default styles impact your web pages.
- [Narrator] Have you ever opened an HTML file that didn't have a style sheet? If so, it probably looked something like this. Some people refer to this as unstyled content, and while it certainly does look that way, it's not entirely accurate. Before users were allowed to control HTML pages through cascading style sheets, browsers had to have some way of displaying HTML content visually. Without the default styles, users would just see a big wall of text running together instead of a readable document with basic formatting.
So, why should you care about this? Well, when you write CSS, one of the things you're actually doing is overriding those default browser styles and replacing them with how you want the elements to look. Remembering that is pretty important because if you forget to account for browser styles, it's really easy to miss things, like maybe a little bit of padding or spacing on an element or some text formatting. Basically things that can make your layout look just a little bit off. This is why a lot of developers use something called CSS Resets.
In essence CSS Resets zeros out all default browser styling so that you can style elements precisely the way you want. We're going to talk about that later in the course. The other important thing to remember is that users can override your styles anytime they want. Via most browser preferences, they can choose a default font or font size to use or even change the color contrast. If you're a designer that spent hours perfecting the layout and typography of a design, this might make you cringe, but the important thing to remember is this, the goal of any website should be to make the content accessible to the individual user.
Some people might have color blindness or trouble reading low-contrast text. Others could be using a screen reader or a translation tool that doesn't care about the styles. That said, is design still important? Absolutely! And should you use CSS to control the presentation of your content? You betcha! Just know that considering your users needs are a really important part of web development and something to keep in mind as you plan and write your CSS. One more thing to note before we move on. In addition to default browser styles, each browser uses its own rendering engine, which means that you could take the exact same HTML mark up and CSS styles and it might look different from browser to browser.
Ask any developer who's been around a while about the struggle of getting a design to look the same across multiple browsers, and they'll tell you the old war stories of their battles against Netscape and early versions of Internet Explorer. For designers who love Pixel Perfect, you'll find this highly annoying, but thankfully web standards are at a point where these differences are more minimal then ever. I did want to mention it though as something to be aware of when you are writing your CSS.
- 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