How to Practice CSS

Loading...

來自 University of California, Davis 的課程

Introduction to Web Development

275 個評分

University of California, Davis

Introduction to Web Development

275 個評分

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 to the lesson.

In our last lesson, we talked about common CSS properties, and

in this lesson, we'll talk about putting our CSS that we've used for

various elements of our examples into one external page to see how it works.

So here we have a version of a page that we've looked at a few times.

We have a JavaScript function that we've used,

we have our CSS starting on line seven.

And you'll notice that I've removed the in line CSS from all the various elements.

And I've added a table that we worked with in a previous example.

So let's first look at how this page,

Will appear without any CSS at all.

Now this is the page without CSS.

We've got our text all in the default color and default font.

We've got our image at its natural size.

And you probably remember seeing a number of these pieces before in other examples.

Now let's look at the CSS we want to apply.

I've placed it in to a file called together.css.

So we have our body tag with a background color.

An h1 with a color and a margin with 20 pixels.

And you remember from previous lessons that pixels are the dots on your screen.

So people with larger screens actually have more pixels.

Then we've got a class called testClass.

That mix, whatever it's applied to, have a red color and

a three times normal font size.

We've got a regular class for color blue and regular font size of 100%.

And now we're adding CSS to our table from a previous example.

Here we've got the border.

We're giving it a fairly narrow border.

It'll be solid and red.

And we can set the width of the table, and when we set a table width,

it's relative to the page.

And so in this case, the table should be 90% of the page width.

And returning to our example, we could see here that our table has no border and

is much smaller than 90% of the page.

We can apply styles specifically to the table data,

which are the elements in the table, the cells.

And for each of them, we're giving a border.

We're making it black.

We have some IDs output, Google and

text on our page, which we'll go back and look at in a moment.

Output will be green, with a font size that's double normal.

Google will have float:left and its height specified to to 40 pixels.

And finally text will have a color:blue, a font-size of 200% and it'll do clear:left.

So let's look at some of these.

Here our image has id of Google, And

our table has no styles specified, but in the CSS,

we have selectors for the table elements.

Now let's see how it looks when we actually apply it.

I'll give you one more look at the unstyled page.

And now, go up and make sure that our file name is correct.

Together.css.

And we'll go to our page and refresh.

And notice now, we have dramatic changes.

Our image is much smaller now, so its new height

changes it quite a bit, and we are using our float,

and our table properties to make lots of differences.

Notice that our table is now 90%.

And the outside of the table has a red border,

while the inside cells have a black border.

So this gives you an idea of how dramatically our pages can change

from plain HTML to those styled with CSS.

That's all for this lesson.

In our next lesson, we'll continue to look at CSS HTML and forms.

探索我們的目錄

免費加入並獲得個性化推薦、更新和優惠。

Coursera 致力於普及全世界最好的教育，它與全球一流大學和機構合作提供在線課程。

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

通過 App Store 下載

通過 Google Play 獲取