| 
  • If you are citizen of an European Union member nation, you may not use this service unless you are at least 16 years old.

  • You already know Dokkio is an AI-powered assistant to organize & manage your digital files & messages. Very soon, Dokkio will support Outlook as well as One Drive. Check it out today!

View
 

Lecture - Getting Started with CSS

Page history last edited by Dr. Ron Eaglin 8 years, 7 months ago

 

Getting Started with CSS

 

Prerequisites

 

Lecture - Getting Started in HTML

 

Summary

 

  1. What is CSS?
  2. How do I embed CSS?
  3. Some CSS Capabilities
  4. Where to get more information

 

Video 

 

http://online1.daytonastate.edu/player2.php?id=efd7e9ed0e5e694ba6df444d84dfa37d 

 

 

Reference Materials

 

You can quickly master CSS if you do not have experience with CSS by using the W3 Schools site - http://www.w3schools.com/css/default.asp

 

Additional Information

 

One of the most useful tools for using CSS in real sites is Firebug (which is an add-on for Firefox). Also demonstrated in this video is ColorZilla which is an incredibly useful tool for setting colors in web sites.

 

Transcription of Lecture

 

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!

 

 

COP 4813 Lectures

Comments (0)

You don't have permission to comment on this page.