1 00:00:00,000 --> 00:00:03,990 Have you ever opened an HTML file that wasn't controlled by a style sheet? 2 00:00:04,000 --> 00:00:07,990 Chances are, if you have, that it looked something like this. 3 00:00:08,000 --> 00:00:12,990 Now I've also heard of this referred to as unstyled content. 4 00:00:13,000 --> 00:00:16,990 Now, while it certainly looks unstyled, that's not entirely accurate. 5 00:00:17,000 --> 00:00:20,990 Before authors were allowed to control HTML pages through Cascading Style 6 00:00:21,000 --> 00:00:25,990 Sheets, browsers had to have some way of displaying HTML content visually. 7 00:00:26,000 --> 00:00:28,990 Although the approaches among early browser manufacturers differed, 8 00:00:29,000 --> 00:00:32,990 essentially they all developed default style sheets that told the browsers how 9 00:00:33,000 --> 00:00:34,990 to display specific elements. 10 00:00:35,000 --> 00:00:39,990 Although there are some differences from one browser to another, in general, all 11 00:00:40,000 --> 00:00:44,990 browser default style sheets will render a page similar to what you see here. 12 00:00:45,000 --> 00:00:48,990 When you write CSS, one of the things you are actually doing is overriding those 13 00:00:49,000 --> 00:00:53,990 default browser styles and replacing them with how you want the page to look. 14 00:00:54,000 --> 00:00:58,990 Remembering that is more important to web designers than you might think. 15 00:00:59,000 --> 00:01:03,990 If you forget about the browsers' default styles, it's really easy to miss a 16 00:01:04,000 --> 00:01:07,990 little bit of spacing on an element or some text formatting that makes your 17 00:01:08,000 --> 00:01:11,990 design or layout either look a bit off or not work at all. 18 00:01:12,000 --> 00:01:15,990 Then you spend an inordinate amount of time trying to find the error in your 19 00:01:16,000 --> 00:01:20,990 styles, rather than accounting for the default margins or styling of a specific element. 20 00:01:21,000 --> 00:01:21,990 How do I know that? 21 00:01:22,000 --> 00:01:24,990 Well, it's happened to me more than once. 22 00:01:25,000 --> 00:01:29,990 There is even a CSS technique designed specifically to counter this, called a CSS 23 00:01:30,000 --> 00:01:32,990 Reset, that we will talk more about later. 24 00:01:33,000 --> 00:01:35,990 In addition to dealing with a browser's default styling, you also have to 25 00:01:36,000 --> 00:01:40,990 understand one very important factor when writing CSS: 26 00:01:41,000 --> 00:01:44,990 the end user can overrule your styles any time they wish. 27 00:01:45,000 --> 00:01:48,990 Now most visual designers cringe when they first hear this, but in reality 28 00:01:49,000 --> 00:01:51,990 there's some pretty smart thinking behind this. 29 00:01:52,000 --> 00:01:53,990 First off, let me demonstrate what I am talking about. 30 00:01:54,000 --> 00:01:58,990 I am going to be using Firefox, but almost all browsers have, to one degree or 31 00:01:59,000 --> 00:02:02,990 another, the amount of control over your content that I am going to show here. 32 00:02:03,000 --> 00:02:06,990 Note that in the Preferences I can choose the fonts that I want to use for my 33 00:02:07,000 --> 00:02:08,990 pages and what size the text should display. 34 00:02:09,000 --> 00:02:14,990 If I go into Advanced, I can even tell the browser to ignore this font that the 35 00:02:15,000 --> 00:02:16,990 site wants to use in favor of my own. 36 00:02:17,000 --> 00:02:20,990 As you can see, that makes a huge difference in the design. 37 00:02:21,000 --> 00:02:25,990 If that's not enough control, I can tell a page to zoom in or zoom out on the 38 00:02:26,000 --> 00:02:31,990 content, or just the text, or even turn the pages styles off completely. 39 00:02:32,000 --> 00:02:35,990 So why do browsers give end users so much control? 40 00:02:36,000 --> 00:02:39,990 Well, mostly the reason is accessibility. Let's face it. 41 00:02:40,000 --> 00:02:41,990 Not every designer is a good designer. 42 00:02:42,000 --> 00:02:45,990 Often layouts break or don't display correctly. 43 00:02:46,000 --> 00:02:48,990 Other users might have disabilities that prevent them from seeing the page 44 00:02:49,000 --> 00:02:52,990 properly or colorblindness that makes low-contrast sites hard to read. 45 00:02:53,000 --> 00:02:57,990 By allowing users to overwrite styles, increase the size of text, or just 46 00:02:58,000 --> 00:03:02,990 turn off style sheets, it's allowing users to access the page content the way that they want to. 47 00:03:03,000 --> 00:03:07,990 As a visual designer, that might be a bit hard to take it first, but on the web 48 00:03:08,000 --> 00:03:11,990 it's the content that really matters, not so much the design. 49 00:03:12,000 --> 00:03:15,990 As a graphic designer myself, that's hard to say, but remember that the main 50 00:03:16,000 --> 00:03:19,990 focus of graphic design is on communicating in ideas and information. 51 00:03:20,000 --> 00:03:23,990 So no matter what the context, content does matter. 52 00:03:24,000 --> 00:03:26,990 Staying focused or making sure that you are overriding defaults styles 53 00:03:27,000 --> 00:03:30,990 correctly and making sure your accounting for your users' needs are very 54 00:03:31,000 --> 00:03:34,990 important aspects of web design, and incredibly important considerations when 55 00:03:35,000 --> 00:03:45,000 planning and writing your CSS.