This course may contain valuable CSS information for reference, but does no longer reflect our course quality standards.
Transcript from the "CSS Setup" Lesson
[00:00:02]
>> Estelle Weyl: Okay, so we're going to start off the day by looking at selectors. I'm not gonna cover selectors yet. But I just want to show you that with CSS, you can target anything and style it in any way you want. So here I've said every third list item, but we could also do font size 4m, and I could also change the color to red actually that is a green.
[00:00:39] So we're going to be looking at changing it to plus one. So I just changed the item that was there. We're gonna be looking at the stuff that's on the left hand side, which is the type first, and then we're gonna spend the rest of the day looking at the stuff on the right hand side.
[00:00:57] So, basically,we are going to be looking at first, at selectors and then the property values. Some of these, will be prefixed, generally you do not wanna use prefixed properties. Mostly don't use prefixed properties, but remove the moz-border radius and remove the webkit linear gradient from your code. Old Android devices that don't, I mean these are really old Android devices.
[00:01:29] The reason a lot of CSS properties stay prefixed, used to be because of the performance. And is still that is why a lot of the CSS features don't come out that we really wanted because there is no way for the browser vendors to make it perform it enough.
[00:01:49] If you use moz-border-radius, well moz-border-radius is a bad example, if you use webkit-border-radius or webkit radial-gradient, you're targeting the only device that needs that is an old Android device, all right? And it's really slow to create a gradient on an old Android device, it's really slow to create border radiuses on old Android device.
[00:02:10] So just, if they need that prefixed, that's probably on a slow device. So just for the most part cut out, though there are some experimental features that basically they haven't finished the spec yet. You shouldn't use those because then you're not hitting every single browser. But there's sometimes where they're just so awesome that you wanna use them anyways before they're ready.
[00:02:32] So we'll cover some of those, we'll cover some at rules, we'll cover some tools, what are tools for generating CSS? I use a sublime for creating it. And then I also use SASS as a pre-processor, but all you really need is a text editor. You don't need any fancy tools.
[00:03:01] There's some what you see is what you get. There's Dreamweaver, Aloha editor, there's these I've never heard of these other than when I did a search so I could put other examples up. Some people make fun of people who use Dreamweaver, I haven't used, or even looked at it in about four or five years.
[00:03:21] But it actually was a really good tool, and it created nice clean, and it might still create nice clean HTML within external CSS. It's not the tools that are the problem, it's the way people use the tools that are the problem. Other than Frontpage, Frontpage was just a problem.
[00:03:39] When an editor puts all of the stuff in for you, when you don't want it to and it's basically making all these decisions and putting stuff in-line, that's bad. As long as you're controlling the tool and not letting the tool control you. Similarly with preprocessors and postprocessors, They can be very powerful but they can also be very dangerous.
[00:04:02] So, oops, so postprocessors, I'm not gonna actually cover any postprocessors because, I've never used any. Because hopefully I will provide you with enough information today and tomorrow that you won't actually need to postprocess your CSS, you'll actually know how to write the CSS. Anyway, I do use preprocessor because I like it organize my CSS and I will cover that later.
[00:04:28] Will also cover debugging, there is no separate section on debugging. I'm going to be talking about debugging and you'll see me debug throughout the whole process. This are some of the different ways of debugging, I am using Chrome at this moment, so my debugging will be in Chrome, we're going to go over to Firefox a little bit tomorrow.
[00:04:52] There's tools in every browser and so, we're not gonna do a separate section on it, but will be throughout the class. Some really cool tool is CSS, well there's lots of really cool tools, one of the ones I like is Font Squirrel. I use them, but remember that you should be controlling your CSS and not letting your CSS control you.
[00:05:17] So when you use a tool understand what it's doing. And so my goal today is to provide you with enough information that when a tool creates some output, you can read that output and know exactly what it's doing, and remove the 140,000 lines that it added that you didn't really need.
[00:05:35] And you think I'm exaggerating, but I've seen that. There's a lot of other development tools like CodePen, I'm using a few CodePen throughout the two days of workshop, but I'm mostly using in header CSS. But I think it's a great tool to test stuff out when you don't have Estelle to prepare the page for you.