1 00:00:09,000 --> 00:00:13,000 Hello, I'm Dr. Ron Eaglin and today I'm talk to you about
2 00:00:13,000 --> 00:00:17,100 Cascading Style Sheets, and Cascading Style Sheets are
3 00:00:17,100 --> 00:00:20,840 actually one of those great handy web things
4 00:00:20,839 --> 00:00:25,199 that allow you to really style your website.
5 00:00:25,199 --> 00:00:30,799 So what we're gonna do is we're gonna build on top of the previous lecture I had on HTML,
6 00:00:30,890 --> 00:00:34,649 and hopefully you've had time to go through and do some of the HTML tutorials
7 00:00:34,649 --> 00:00:38,609 that are on the w3school site and this is gonna
8 00:00:38,609 --> 00:00:42,829 also use - you're also going to do the w3schools for the CSS.
9 00:00:42,829 --> 00:00:46,070 But this is just getting started. Now
10 00:00:46,070 --> 00:00:50,359 There are ways to do styling of website's
11 00:00:50,359 --> 00:00:53,929 with the style stuff in line,
12 00:00:53,929 --> 00:00:57,530 but what i'm going to do here is I'm actually going to have, as you can see up here,
13 00:00:57,530 --> 00:01:00,879 a link to an external style sheet.
14 00:01:00,878 --> 00:01:04,219 Ok, and it's going to be a separate file, which I actually have right here,
15 00:01:04,219 --> 00:01:09,019 called styles.css, the .css extension
16 00:01:09,019 --> 00:01:12,399 is for Cascading Style Sheets and
17 00:01:12,400 --> 00:01:15,810 what this really does is it allows you to do some -
18 00:01:15,810 --> 00:01:19,030 to make your site look a little different. So lets look over at
19 00:01:19,030 --> 00:01:22,099 my site right here, if I were to look at it,
20 00:01:22,099 --> 00:01:25,839 notice I've got a background color, I have - this has
21 00:01:25,840 --> 00:01:30,770 got a slightly different font, and I played a few little tricks, like I can make the
22 00:01:30,769 --> 00:01:32,828 link to the website disappear
23 00:01:32,828 --> 00:01:36,739 as I hover over it, I can also do some other things there, it doesn't actually
24 00:01:36,739 --> 00:01:37,949 disappear I've just
25 00:01:37,950 --> 00:01:42,020 change the background to match the background of the website.
26 00:01:42,019 --> 00:01:45,420 Well lets look at how that works. So first,
27 00:01:45,420 --> 00:01:49,340 in the head section of my
28 00:01:49,340 --> 00:01:52,939 HTML document, I've created a link,
29 00:01:52,938 --> 00:01:56,449 I told it it was a 'stylesheet',
30 00:01:56,450 --> 00:02:01,759 type, which is your mime_type of text/css,
31 00:02:01,759 --> 00:02:05,748 and I href, I reference an external
32 00:02:05,748 --> 00:02:08,859 file called styles.css. Which I have, by the way,
33 00:02:08,860 --> 00:02:14,100 right here next to it. So when the body, the first I'm going to look
34 00:02:14,099 --> 00:02:15,419 at here's is in the body,
35 00:02:15,419 --> 00:02:18,500 I've got this paragraph tag p,
36 00:02:18,500 --> 00:02:22,370 and I set the class equal to 'mystyle'. Now
37 00:02:22,370 --> 00:02:26,340 'mystyle' is over here in my style sheet,
38 00:02:26,340 --> 00:02:30,780 '.mystyle' and I've just change the font style to be oblique.
39 00:02:30,780 --> 00:02:34,280 So if you were to look at that, you would see this little oblique
40 00:02:34,280 --> 00:02:38,539 style. But the interesting thing about 'mystyle'
41 00:02:38,539 --> 00:02:42,169 is it's a class; its a CSS class that I have defined.
42 00:02:42,169 --> 00:02:45,699 I can make as many of these as I want. I can come in here and make
43 00:02:45,699 --> 00:02:50,299 .mystyle2
44 00:02:50,300 --> 00:02:54,300 and then I can put information about how I want things styled there.
45 00:02:54,300 --> 00:02:58,880 In my cascading style sheets, and
46 00:02:58,879 --> 00:03:01,939 that will apply to every
47 00:03:01,939 --> 00:03:07,430 element in all of the HTML documents that reference this style sheet,
48 00:03:07,430 --> 00:03:12,750 that have the class of '.mystyle'. So what this allows you to do
49 00:03:12,750 --> 00:03:19,150 is it allows you to create universal classes that you can change and apply to
50 00:03:19,150 --> 00:03:20,390 your entire website.
51 00:03:20,389 --> 00:03:23,429 This is the proper way to actually
52 00:03:23,430 --> 00:03:26,659 have your website behave,
53 00:03:26,659 --> 00:03:30,000 and how to style it. The tags that you use
54 00:03:30,000 --> 00:03:34,009 within your website should have a functional purpose,
55 00:03:34,009 --> 00:03:38,739 you really shouldn't be using tags to define style, you should be using
56 00:03:38,740 --> 00:03:42,080 tags to define the structure of your document.
57 00:03:42,080 --> 00:03:45,700 That's just good solid HTML, so
58 00:03:45,699 --> 00:03:51,399 in this case, I've got this one and all I did here was I changed the font here
59 00:03:51,400 --> 00:03:52,520 to be oblique there,
60 00:03:52,520 --> 00:03:56,810 and that's that same 'Hello World!' you see there. Now,
61 00:03:56,810 --> 00:04:00,590 another tag that I have a little bit of a change to,
62 00:04:00,590 --> 00:04:05,920 I appear in the body, and body is an existing tag; see there's body,
63 00:04:05,919 --> 00:04:10,969 and close body; it's an existing tag. I changed the background color to be a
64 00:04:10,969 --> 00:04:12,439 different background color,
65 00:04:12,439 --> 00:04:16,798 and it's this color right here. Now what I did here;
66 00:04:16,798 --> 00:04:20,008 suppose I wanted to make the background color, lets say the color of my skin.
67 00:04:20,009 --> 00:04:23,270 I've got some neat little tools that I use here, this is a
68 00:04:23,269 --> 00:04:26,948 pen dropper which is called ColorZilla, which is available
69 00:04:26,949 --> 00:04:30,740 in Firefox. If I were to go like this and say ok you know what I want to
70 00:04:30,740 --> 00:04:34,769 make that color now my background color, and
71 00:04:34,769 --> 00:04:38,310 I just clicked over there, I can now come back over to here,
72 00:04:38,310 --> 00:04:42,879 ok I'm going to change the color to be
73 00:04:42,879 --> 00:04:47,270 this. Ok I've just pasted that in,
74 00:04:47,269 --> 00:04:52,128 I'll save it, now I come back over here to my website
75 00:04:52,129 --> 00:04:56,120 and I refresh it, now I can tell that
76 00:04:56,120 --> 00:05:01,149 color of my skin is that odd strange pink color which looks really
77 00:05:01,149 --> 00:05:05,128 odd when you actually take a uniform skin color
78 00:05:05,129 --> 00:05:09,270 and apply it has a background color. I can do the same thing, I could say you know what would
79 00:05:09,269 --> 00:05:11,180 happened if I did that with the color
80 00:05:11,180 --> 00:05:15,069 of let's say my
81 00:05:15,069 --> 00:05:18,278 shirt, which I just did right there,
82 00:05:18,278 --> 00:05:24,339 I come back over here, take this background color,
83 00:05:24,339 --> 00:05:27,359 I paste it in, I save it,
84 00:05:27,360 --> 00:05:31,218 and now I come back over here and reload,
85 00:05:31,218 --> 00:05:35,339 and now it's got the color of my shirt as a background color.
86 00:05:35,339 --> 00:05:39,339 Well, it shows you that you can apply
87 00:05:39,339 --> 00:05:42,788 styles to any existing tag that's in here.
88 00:05:42,788 --> 00:05:45,788 I can apply directly to the paragraph tag or the anchor.
89 00:05:45,788 --> 00:05:49,408 In this case, I am gonna do something with the anchor,
90 00:05:49,408 --> 00:05:52,938 I going to use a pseudo-class, which in this case is denoted by
91 00:05:52,939 --> 00:05:56,150 the tag, then a colon,
92 00:05:56,149 --> 00:05:59,188 and then the pseudo-class, and the pseudo-class is something
93 00:05:59,189 --> 00:06:03,379 simply like if I hover over this
94 00:06:03,379 --> 00:06:07,300 it's gonna change the color. So in this case, if I hover over this link,
95 00:06:07,300 --> 00:06:10,960 notice that the color changes. Ok,
96 00:06:10,959 --> 00:06:15,188 kind of interesting there and you can see that. So
97 00:06:15,189 --> 00:06:19,449 what i'm showing a little bit here of, with cascading style sheets,
98 00:06:19,449 --> 00:06:23,749 is something to get you started. Now
99 00:06:23,749 --> 00:06:28,990 all of these types of tags that you see in here like background-color,
100 00:06:28,990 --> 00:06:32,590 font-style, color, Ok,
101 00:06:32,589 --> 00:06:36,899 those are available if you go to the -
102 00:06:36,899 --> 00:06:40,418 In fact I'll just show you. If you are in the
103 00:06:40,418 --> 00:06:45,139 class website,
104 00:06:45,139 --> 00:06:45,560 and I
105 00:06:45,560 --> 00:06:48,980 go CSS w3schools,
106 00:06:48,980 --> 00:06:54,970 and that will take you to the tutorial,
107 00:06:54,970 --> 00:06:58,889 this is really the best way to learn a lot of the nuances
108 00:06:58,889 --> 00:07:03,800 of Cascading Style Sheets. Now at the same time it's going to be very difficult to try
109 00:07:03,800 --> 00:07:04,720 to memorize
110 00:07:04,720 --> 00:07:08,550 all these different types of tags that are here. So what I do is I recommend
111 00:07:08,550 --> 00:07:12,230 that you use an editor that allows you to -
112 00:07:12,230 --> 00:07:15,830 that actually knows what they are and will help you remember them.
113 00:07:15,829 --> 00:07:19,139 There are CSS editors out there,
114 00:07:19,139 --> 00:07:22,650 and in my case I'm simply using Notepad because it's a simple
115 00:07:22,649 --> 00:07:26,199 way to do this. So anyway that's
116 00:07:26,199 --> 00:07:29,300 all you really need to get you started in Cascading Style Sheets.
117 00:07:29,300 --> 00:07:32,100 so have fun; good programming!
|
Comments (0)
You don't have permission to comment on this page.