Putting CSS to Work: Common CSS Properties

Loading...

University of California, Davis의 강좌에서

Introduction to Web Development

418개의 평가

University of California, Davis

Introduction to Web Development

418개의 평가

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 using CSS with float in clear to control layout.

In this lesson, we'll talk about some of the more common CSS properties.

Now here we see a reference for

a large number of properties that are available in CSS.

I want to be clear that you don't have to know them all and

you can learn them as you go, most of us don't use all of them all the time anyway.

So, notice here we've got a variety of ways to control border.

Let's look at the basic border.

Here we're starting for a paragraph tag and we're giving boarder some properties.

5 pixels solid in array and we can look at an example.

Now, I told you I explained pixels before.

A pixel is an element of your screen so,

imagine your screen made up of tiny little dots.

Those of us with larger screens have more dots.

In this case, five pixels is supposed to be the width.

So, the width we're seeing here is five dots with of screen space.

And we can change this and make this ten.

And see how it looks.

Now, admittedly not very attractive,

but we have the ability to give a border to almost anything.

So using a border, you can provide the size of the border, the style for

the border, which is solid, but you can also do dashed, and the color for

the border.

And let's look at some other elements.

So scrolling down we see display.

Now, this is a very commonly used.

Bit of CSS.

Here we're saying display inline, and notice that these paragraph tags,

these five paragraph tags here, are all showing together in a single line.

You may have noticed from your own work or

some of our lessons that paragraphs usually are on separate lines.

The difference here is display is inline.

And inline is not the default kind of display, for most elements.

So let's change this to block.

Changing it to block causes each one of the paragraphs to be on its own line.

And block is the default for most elements.

You can choose block or in line, whichever best suits your needs.

Then finally, let's look at Height and width.

So here, we see for a paragraph with style ex, a height and width setting.

And these are again in pixels.

And recall that this will be 100 dots of screen space.

Now notice here we've got ex for this paragraph.

And for this first one, for this paragraph here,

Which has class ex, we're giving it a height and width of 100.

And notice how it looks here, high and squished.

While our other paragraph, the second one, is flowing naturally.

Now, it's up to us how we want to size these.

But we can apply a height and width to most elements on the page.

I think it's usually a good idea to start with

allowing the browser to size the height and width.

And then adjusting it as you see fit.

So that's all for this lesson.

And in our next lesson, we'll continue to look at CSS tips and

tricks that you can apply to your web pages.

Coursera 카탈로그 살펴보기

무료로 참여해 맞춤화된 추천, 업데이트 및 제안을 받아보세요.

Coursera는 세계 최고의 교육에 대한 보편적인 접근 기회를 제공하며, 최고의 대학 및 기관들과 제휴하여 온라인 강좌를 제공합니다.

© 2019 Coursera Inc. All rights reserved.

앱스토어에서 다운로드하기

구글 플레이에서 받기