The web today is almost unrecognizable from the early days of white pages with lists of blue links. Now, sites are designed with complex layouts, unique fonts, and customized color schemes. This course will show you the basics of Cascading Style Sheets (CSS3). The emphasis will be on learning how to write CSS rules, how to test code, and how to establish good programming habits. When done correctly, the styling of a webpage can take enhance your page. When done incorrectly the result can be worse than no styling at all. To ensure that your sites do not put up barriers for people with cognitive and/or physical disabilities, you will learn how to evaluate pages using the standardized POUR accessibility guidelines. Upon completion of the course, learners will be able to sketch a design for a given HTML page. Using that design they will use CSS to implement the design by adding fonts, colors, and layouts. This is the second course in the Web Design For Everybody specialization. Subsequent courses focus on adding interaction with JavaScript and enhancing the styling with responsive design. It will be difficult to complete this course if you do not have access to a laptop or desktop computer for the homework.
01-03 Colors
Loading...
En provenance du cours de University of Michigan
Introduction to CSS3
3008 notes
University of Michigan
3008 notes
Cours 2 sur 5 dans Specialization Web Design for Everybody (Basics of Web Development and Coding)
À partir de la leçon
Week One: Getting Started with Simple Styling
Welcome to Introduction to CSS3! In this course you will learn how to style your pages by taking advantage of the power of CSS3. We will focus on both proper syntax (how to write your styling rules) and the importance of accessibility design (making sure that your style enhances your site, not make it harder to navigate). It is so important that you jump in ready to make mistakes and typos in this course. The only way you will really understand the material is to practice typing it in on your own as often as possible.
Rencontrer les enseignants
Colleen van Lent, Ph.D.Lecturer
School of Information
Charles SeveranceAssociate Professor
School of Information
Hi.
In today's lecture, we're going to be talking about colors.
Before I really jump in, though, I just want to remind you that I'm
a computer scientist, and art and design are not necessarily my core background.
In fact, I'm pretty bad at it.
So what I'm gonna be talking to you about today when I'm talking about colors
is the best way to code up colors.
Instead, when you're really looking for
advice on what the best color schemes are going to be.
I'm gonna direct you to different places online and
let you use your own expertise to kind of figure out what goes best with each other.
But let's begin with how we use colors on your web page.
We talk about the three different basic color conventions,
the main ones that people use.
Conventions is just another word for suggestions.
It's not a rule.
You don't have to follow the rules I'm going to give you.
It's just the way that most programmers program so
that they can understand what you're trying to do, when they look at your code.
One way that you cn add color is to just simply use the English word.
Blue, red, yellow, etc.
These work, and they'll show up fine on your page.
The problem is, is that it's not consistent across the pages.
What's yellow to one browser is not the exact same shade
of yellow to another browser.
So in general, we avoid color names when your final project is coming up.
When you're just coding and hacking away,
you just want to pop something up on the screen.
No problem.
Use blue or red or yellow but then later what you're going to want to do.
It changed when these other two conventions I'm going to talk about.
The first one is called hexadecimal.
Hexadecimal you might recognize the decimal part,
that's how we count from zero to nine.
Hexadecimal just means they have sixteen digits instead of ten.
So you can use zero to nine, but then also A, B, C, D, E, and F.
And F is kind of like the strongest, most powerful number you can use.
When you do hexadecimal, it's always set up the same,
where you have a pound sign followed by either three or six digits.
The examples I have here for you are six digits.
And the way it works is that you have a red, green, and blue value, and
the bigger the number you put in there, the more red, green, or blue you'll see.
So here's my example.
I have an example of blue, red, but
also yellow because depending on how much of these different values you put in,
it's can change the color that's gonna show up on your screen.
Now hexadecimal is probably the most common way of doing colors when you look
at a lot of people's pages, but another way that's coming up a lot is the RGB.
Again, it's the same idea that we have red, green, and blue,
but instead of using these kind of strange hexadecimal numbers, the zero to F,
instead you're using numbers between zero and one.
So here I've done the same thing, I've just done one, one, and one, one.
I could have just as easily put 0.5, 0.8, 0.6, and
that would change the strength of the color.
So here I have rgb (0,0,1).
One of the reasons that people have been switching over to rgb is that there's
another option called rgba.
And for the longest time I really had to think about what that a meant and
what it stands for is alpha transparency.
So you have a fourth value on the end that says, you know what?
I want to use this blue color, but I wanna kind of make it a little bit see through.
So when it comes up,
if I were to actually make it zero it would be completely see through.
If I were to give it a final value of one,
it would look just like the regular rgb value.
Now one of the interesting things to note is that, if you're watching this video
right now and there's someone next to you watching the video on their screen.
It's absolutely possible that if you look over, It looks different.
You need to remember that different monitors can display colors in
different ways, all right?
So I want to show you an example really quick on the web
of how you can see some of these different colors and how they're working.
What I brought up here is my course webpage and it's okay if you can't see it.
I know it's kind of small.
What I want to show you is me using something called Inspect Element
to really kind of look at my page, and look at the colors,
and a really quick way for me to see how I can make it look different.
So I have my mouse, right here.
I'm gonna right-click, and i'm gonna go down to Inspect Element.
Now for some of you, this part may pop over to the side or underneath.
You can move it around by clicking on this button over here.
But as you can see I'm gonna highlight my h1 and go down here to the span.
And you can be like oh, there's the color I'm using.
I'm gonna go ahead and click on this, and as you can see
I can actually in real time, kind of play with which different colors I want.
I kind of like that one better than the blue and
you can see that it is changing the hexadecimal value for me down there.
So if I wanted to,
I could find the perfect color, this green is not the perfect color.
I could find the perfect color, grab that hexadecimal value and
put into my style sheet.
They also give you the option of the RGBA value as well so
you can do it either way you want.
I love using expect element to kind of play with the colors because it's so
much easier when you can see what's happening as you're designing it.
If you want to check something else I can even go down here, each thing as you
highlight you can add colors, do different things along the same line.
So I wouldn't suggest this, but I'm gonna add a background color.
And as you can see, they have the actual names.
Because it's very unlikely that if you were to scroll through the different
hexadecimal values you have any idea what it's talking about.
And instead of actually using the word beige, once again I can click on that box.
It'll pop up the hexadecimal value for me.
So this is where it can get really fun and really bad,
because you can just start falling down this rabbit hole.
And you're like, oh I like this color.
No this color's better.
You're beginning, you're starting off, just pick a color, play with it, and
keep going with it.
But let's go back.
One of the things that happens when people are using color is there's this
really natural tendency to want to use color to emphasize something, or
explain how important something is.
You may have seen when you filled out forms that it says
make sure to fill out everything that's in red.
Well, this can be a real problem when it comes to accessibility.
And I want you to make sure that you're trying to think about the most appropriate
way to use your color when you're designing your page.
And one of the things you need to think about is that it's not enough to think,
oh someone can use the screen reader.
I'm gonna use HTML tags to really make sure
that they can pick up the semantics from the page.
No, there are a lot of people reviewing your site who aren't legally blind.
Instead, they're visually impaired or they're just color blind.
They're, many more people are color blind than you would ever really get.
So you wanna make sure that when you're using your page,
you're thinking about whether the colors are conveying meaning or just style.
So think about your color contrast and what color contrast it that
when you look at a page is the text on a good color for the background?
Most of us intuitively know when something has really poor color contrast.
We're squinting at it.
But to be honest,
very few of us know what the really exact level is of where you need to go.
So what you can do is you can use different tools
to help you quantify the contrast between text and its background color.
I've put in two links here.
The wave.waveaim.org, and the Wave contrast checker.
And I'm gonna show you just a quick example of how you can use these
to check a page.
So I go over here, and I've got the wave.webbing.org.
And you can go ahead and you can type in any URL you want right here.
I'm gonna go ahead and put in my own personal web page from UMISH,
which may change by the time this comes up.
And, as you can see, you can go over here and it'll check your styles,
it'll check your different HTML.
But if you check where my mouse is, you can also check on the contrast.
And it'll go in and it'll say, nope, this looks good.
There were no color contrast issues detected.
You'll be surprised how much, though, you will get examples.
They can be extremely picky and if it's really something that you feel strongly
that you can see, absolutely, stick with it.
But you wanna take their suggestions with a grain of salt.
The one thing I really wanted to talk to you about again,
is just this whole idea of don’t use color alone to convey meaning.
This is a typical kind of bar graph for people to use colors to say, hey this is
how much share is Apple iPhone, the Pre Palm, different things along that line.
So let's look at that same graph but in grayscale.
And suddenly you can see it's pretty much useless to anybody who's really trying to
pick out these parts in the middle where the colors are extremely similar.
Instead, if you're going to use a graph like this,
I'm not saying you can't, I'm saying make sure you're providing alternatives.
Make sure you've got alternate text or you've got a caption or
someplace else where people can link to to get this information.
All right, so I know I didn't talk a lot about the different colors that you can
use, or the different colors that go together, again,
because that's not really something I need to lecture you about.
It's something that you can go off on your own and learn.
What I did want you to understand is how those different color conventions work.
How that you know you can use hexadecimal or RGB, RGBA, or
even the words themselves, but you want to kind of get away from that.
Finally when you're done,
when you've got your colors going, don't get too attached to them.
Because you're gonna be surprised at how often,
when you check your site using a contrast checker, that what you thought looks
really great really isn't something that's accessible to everybody.
So have fun with the colors.
Use inspect element.
Everyone loves to play with these different design elements of your page.
And I hope that you've learned something here that's useful as you continue
programming, and keep styling your site.
Explorer notre catalogue
Rejoignez-nous gratuitement et obtenez des recommendations, des mises à jour et des offres personnalisées.
Coursera propose un accès universel à la meilleure formation au monde,
en partenariat avec des universités et des organisations du plus haut niveau, pour proposer des cours en ligne.
© 2018 Coursera Inc. Tous droits réservés.
