Explore
For Enterprise
Join for Free
Log In

Blättern
Suche
Für Unternehmen
Anmelden
Kostenlose Teilnahme

Putting CSS to Work: Getting Started with External CSS

Loading...

Introduction to Web Development

University of California, Davis

4.6 (507 Bewertungen) | 48K 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 (507 Bewertungen)

5 stars
367 ratings
4 stars
108 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 to the next lesson. In our last lesson, we reviewed some elements of CSS syntax. In this lesson, we're going to look at how we get started with external CSS and deal with some of the problems that frequently occur when we're just starting out. So here, I have a version of a var we've equipped before. This was a var we used for some JavaScript testing. And I've removed the various stale elements, all except for one, this bit online 33, where I have a body and then style equals Background-color: lightblue. So, what this should give me is a page with a light blue background. I've already saved my file. So, I'll try opening it in the browser. Now, here's the page and it has the text that I expected and the button I expected, but it's not light blue. So let's return to the page for a moment and look closely at line 33. Now this is a common kind of problem, not maybe this one specifically but very similar problems, I've misspelled the word style. So I can fix that by editing the file, just like I would fix any other sort of type or syntax error. Save, and then I'll try refreshing, and now I get the blue background. So, when your CSS, off with that matter your HTML. Don't work quitely you expect. Look very closely to your syntax. So what now, this is an in line style and I've mentioned in the previous lesson that we are going to move away from using a line styles and focus instead on external CSS, which is usually a best practice. So to do that, we need to place our CSS in a separate file. In here, we have most of the syntax we need as we've seen before. Link and we need to specify the stylesheet, the type, text/css and finally, an href that references the file. So, here's the file that we've used in the past. And what I'm going to do Is save this with a new name. And I'll also Dissimulate starting up fresh, remove everything in the file. And we'll save this. And we'll return to our file and type basic test. And you'll notice here that I've again misspelled the word. So you have watch very carefully for this. And make sure that the file name matches the actual file name and location. Now, we know this CSS we'd like to use, it's right here, but we want to move it into an external file and this will make it easier for us to maintain. At the moment, we have just one style but any of our pages will eventually have many styles. So, I'll copy this in. I'll get rid of the portion of the syntax that belongs to an inline style. I don't need the key word style and I don't need the quotes. So, now, I should have a working external style sheet. I have my body tag, I specify here the style that I want, I'll return here. I'll make sure my file name is correct, basic test and that I've removed the style here from the body tag. And let's do one more test. Let me remove this reference, just for a moment. Save my file. Now my body kept no longer has in line style. So, this, when I refresh it should have no background color. It doesn't. I did this to make sure that I'm no longer using an in line style from the HTML. I made sure that I can no longer see it, no longer see a blue background. Now, the next time I see the blue background, I should see it coming from my external file. And basictest, spelled correctly. And I'll save it. Now we hope of course, at this point, that we're going to get the results that we want. But notice that we don't. So what I'm going to do is carefully check the name and that checks out. Make sure that I didn't somehow damage the syntax here, but this looks okay. And then I'll go back to the basic test files to see if these all looks okay. On line two, I see background-color: lightblue, ending with a semicolon, that looks fine. But then I notice on line one that I've mistyped body. The t is so closed to the y on the keyboard. Just made a small mistake. Save. Go back and refresh. And now, I have a working background. So, once I have this I can now expand this style sheet, add as many CSS styles as I need and I know that my connection of the style sheet for this page with this syntax on line seven is working properly. So try going through an approach similar to this, you don't have to make the mistakes I made but [INAUDIBLE] approach like this, and you'll be able to get your CSS working with just one style before adding more. It's important to test each step to make sure you're able to get the results you want, before you make too many changes at one time. So in our next lesson, we'll be looking at more details and tips for CSS.

Durchsuchen Sie unseren Katalog

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

Coursera arbeitet mit erstklassigen Universitäten und Organisationen zusammen, um Online-Kurse anzubieten und dadurch universellen Zugriff auf die weltweit beste Ausbildung zu ermöglichen.

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

© 2019 Coursera Inc. All rights reserved.