Putting CSS to Work: Setting Colors with CSS

Loading...

来自 University of California, Davis 的课程

Introduction to Web Development

290 个评分

University of California, Davis

Introduction to Web Development

290 个评分

This course is designed to start you on a path toward future studies in web development and design, no matter how little experience or technical knowledge you currently have. The web is a very big place, and if you are the typical internet user, you probably visit several websites every day, whether for business, entertainment or education. But have you ever wondered how these websites actually work? How are they built? How do browsers, computers, and mobile devices interact with the web? What skills are necessary to build a website? With almost 1 billion websites now on the internet, the answers to these questions could be your first step toward a better understanding of the internet and developing a new set of internet skills. By the end of this course you’ll be able to describe the structure and functionality of the world wide web, create dynamic web pages using a combination of HTML, CSS, and JavaScript, apply essential programming language concepts when creating HTML forms, select an appropriate web hosting service, and publish your webpages for the world to see. Finally, you’ll be able to develop a working model for creating your own personal or business websites in the future and be fully prepared to take the next step in a more advanced web development or design course or specialization.

从本节课中

Websites with Style: CSS Properties, Colors and Fonts

While HTML and JavaScript are very useful for web development, they don't exactly make websites look attractive - that's where cascading style sheets, or CSS, comes into play. While HTML is used to build the structure of our pages and JavaScript is used to provide interactive functionality, CSS is used to graphically design and layout webpages. By the end of this module, you'll be able to: discuss common mistakes in designing a website; identify and apply CSS basics like purpose and syntax; use CSS properties to control fonts, colors, layouts, and other common properties; differentiate between in-line, internal, and external CSS; and practice and test your cascading style sheets.

Module 4 Introduction2:29

Plain Websites are Boring4:11

CSS Basics, Part 16:41

CSS Basics, Part 24:11

Putting CSS to Work: Getting Started with External CSS7:34

Putting CSS to Work: Setting Colors with CSS4:22

Putting CSS to Work: Controlling Your Page Layout4:26

Putting CSS to Work: Common CSS Properties4:36

How to Practice CSS4:52

Testing Website Styles6:22

与讲师见面

Daniel Randall
Senior Architect at Composer Solutions and Instructor
UC Davis Division of Continuing and Professional Education

[MUSIC]

Hi and welcome back to our discussion with CSS.

Last time we talked about how to get off on the right foot with your

external CSS plan.

In this lesson we'll talk about setting colors with CSS,

which we've already seen a number of times.

So here we are again on the very handy

w3schools website and we see an example here.

We've got some color,

and we've got some names next to the color, matching the colors.

So let us look at the code behind this.

We can see here that these elements

are being set with background-color which we saw in our body tab in the last lesson.

And the headings instead are being set with color, just color right here and it's

color:red, color:orange and so forth with the same colors here in the background.

So there's definitely a distinction between the color of an element and

the background color.

And you'll see that there are some variances here, not on this

page specifically, but in various tags and various CSS.

We'll see different incarnations of color and eventually they all become familiar.

There aren't too many, but

these are the two most common, background-color and color.

And notice here we also see an element that's new to us,

called a div, standing for division.

And each of these divs forms a sort of little container.

So we see here that we have these five containers each one of them matching

one of these five divs and the size of the div is being established up here with CSS.

This is the local or

internal style that we saw previously where the height is 50 pixels and

the width is 100% meaning, 100% of the available width.

So, in each of these we're seeing

the word for the color being used to specify the color.

But that's not the only approach.

We can also use RGB, standing for Red Green Blue.

When we do this we use something that looks like a function, rgb,

and then a value for red, green and blue,

where 0 suggests that we have no amount of that color.

So in this case green and blue, we have no amount of green and blue and

we are as intense as possible with red.

So the values go from 0 to 255.

And we can get any color we want by modifying these various elements.

So let's try this one.

And here we have RGB now this first one is red but we can modify it a bit, if

we change this to 200 and this to 100 and

remember we're going from 0 to 255 for each one.

Now I just arbitrarily chose those values and notice we get a sort of purple.

So we can use RGB to specify any color we want by specifying relative

amounts of red, green and blue that make up the color in total.

Both of these methods work you can use either one.

Sometimes we can't find a color name that we want to use but we could very

carefully tune a color by giving the values for RGB that we want to use.

Now there is yet another approach to this one and this is called the HEX approach

and we won't go into this one in this course but you may see it where you have

a pound sign and then some letters and numbers that also specify a color.

So in this case blue could be specified with the world blue, this RGB or

this X value and so that's sort of a primer on colors in CSS.

In our next lesson we'll be continuing our discussion of CSS.

探索我们的目录

免费加入并获得个性化推荐、更新和优惠。

Coursera 致力于普及全世界最好的教育，它与全球一流大学和机构合作提供在线课程。

© 2018 Coursera Inc. 保留所有权利。

通过 App Store 下载

通过 Google Play 获取