Explore
For Enterprise
Join for Free
Log In

Blättern
Suche
Für Unternehmen
Anmelden
Kostenlose Teilnahme

CSS Basics, Part 1

Loading...

Introduction to Web Development

University of California, Davis

4.6 (514 Bewertungen) | 49K Teilnehmer angemeldet

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.

Lehrplan anzeigen

Kompetenzen, die Sie erwerben

Css Code, Html, JavaScript, Cascading Style Sheets (CCS)

Bewertungen

4.6 (514 Bewertungen)

5 stars
372 ratings
4 stars
110 ratings
3 stars
23 ratings
2 stars
3 ratings
1 star
6 ratings

PT

Jan 22, 2017

Even though I haven't been able to purchase the course (yet!), I am very glad that I decided to take this anyway~ It's like an into course for dummies! Except without making you feel dumb~ Lol.

MS

Feb 20, 2019

This course deals with all client side fundamentals of web development. It starts from teaching of HTML to javascript validation of HTML forms. Overall this course is a must for beginners.

Aus der Unterrichtseinheit

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

Unterrichtet von

Daniel Randall
Senior Architect at Composer Solutions and Instructor

Skript

[MUSIC] Welcome back. In our last lesson, we talked a little bit about the artistic aspects of developing our websites and how they should look and some things we could avoid. In this lesson, we'll talk more about code aspects of how our websites appear, particularly with CSS. In a previous video, we talked about three different approaches to CSS. Inline, Internal and External. These sometimes have different names depending on who you're talking to, and we've been using inline so far in this course. It turns out that inline is actually the probably worst approach to CSS because, in the long term, it's harder to maintain. It makes more work for us, so take care of CSS when it's done inline. In this lesson, we'll look at it In terms of the internal approach and the external approach. So, let's look at a bit of code. Here we have our JavaScript testing that we used in a previous video for testing out JavaScript, and in that video, we used a line for output, so refresh this, and, for instance, here we have the result is 5. We were using it as our testing output. Then you can see that it's green and relatively large, and that's because this line here, 43, this paragraph for output has an inline style, where the color is green and the font is 200% normal size. These are the name value pairs that we discussed previously that make up the styles, and they're separated by semicolons. This approach works, but if we apply the string or strings that are similar to many different elements on the page, that becomes harder to manage, and we need to make changes. Like, for instance, we want to change this into some other value, it becomes a little difficult to do. So the next sort of best approach, a little better that this in line styles are the internal or local styles. And we have an example of those here on lines 29 through 32 where the styles are being delimited by style tags. These are similar in appearance to HTML tags, but they don't actually show up on the page. And notice here, just like on line 43 where we have style information, we have similar information here Color:blue and font-size:100% name value pairs. But in this case, on my 30 and 31, these have names, regular and medium. And what these notation means is p.regular and p.medium mean that a paragraph tag denoted with regular or paragraph tag denoted with medium will get this styles and they will apply to every paragraph using regular or medium on the page. So that, if we want to make modifications to regular, we can do so by just making one change here and little apply everything on the page. So Scrolling down a bit here on line 45 we can see our paragraph tag with the class regular and the text, this is a test of regular. So let's have another look at this page where this is a text of regular using blue and it's a smaller font because We said that it should be 100% the size right here. And compared to the green font which is 200%. We'll go back and look at that. 200% and 100%, and we're doing this with CSS. Now, There's yet another approach to CSS that is probably best of all. And that is defining our styles in a separate file. So I have a file here called basic.css and we're free to name this as we choose in most cases. So, here We've got a style for the body, a style for each one tags. And this means that anybody element in here are site that uses this CSS. We'll have a background color of light blue. And each one tag We'll have a color of navy, and a left margin. We haven't seen this before, a left margin with 20 pixels. We'll talk more about pixels, what they are in a future video. And here we have our test class of like ten, and we'll go back to Our tag here on line 47 where we have testClass and we'll see how that one works in a moment. In this case the color will be red and the font size will be 300 and the advantage here is that we can maintain our CSS All in one separate file. And we're not mingling it with HTML and JavaScript, which could be kind of confusing. Notice if we look here we've got inline style, we have local style, we have JavaScript, and we certainly have some HTML, making this file harder to maintain. Then this one which is just CSS alone. Now the way we use that external CSS is with syntax here on line 7. A link and we specify these aspects. The style of sheet and that the type is text CSS. Our href. Here should be the name of the file, so I'll complete that. And now we have basic CSS, which matches this file name, basic CSS, and we'll save. And then we'll return to our page and when we refresh, we'll see that we have a lot of change. The background is blue, as we said it would be, and Our test class paragraph tag, scrolling down, here on line 47 is large and red just as we see it should be here when we look into our external CSS file, color red and font-size 300. So In our next video we will be continuing our discussion of CSS syntax and some more CSS tips and tricks.

Durchsuchen Sie unseren Katalog

Melden Sie sich kostenlos an und erhalten Sie individuelle Empfehlungen, Aktualisierungen und Angebote.

Coursera

Info
Leitung
Jobs
Katalog
Zertifikate
MasterTrack™-Zertifikate
Abschlüsse
Für Unternehmen
Für Regierungen

Community

Kursteilnehmer
Partner
Entwickler
Beta-Tester
Übersetzer
Blog
Tech-Blog

Mehr

Nutzungsbedingungen/AGB
Datenschutz
Hilfe
Barrierefreiheit
Presse
Kontakt
Verzeichnis
Partnerunternehmen

Mobile App

© 2019 Coursera Inc. All rights reserved.