1
00:00:00,000 --> 00:00:03,990
If you're brand-new to web design it's often easy to get overwhelmed at all

2
00:00:04,000 --> 00:00:07,990
the different technologies and terminology used in web development.

3
00:00:08,000 --> 00:00:10,990
Trying to understand what you need to learn first, or even making sense of it

4
00:00:11,000 --> 00:00:12,990
all, can be frustrating.

5
00:00:13,000 --> 00:00:17,990
With that in mind, I want to take a moment to define exactly what CSS is and

6
00:00:18,000 --> 00:00:20,990
where it fits in a larger scheme of web design.

7
00:00:21,000 --> 00:00:25,990
CSS, or Cascading Style Sheets, is a style sheet language developed to control the

8
00:00:26,000 --> 00:00:29,990
presentation of markup language documents, like HTML.

9
00:00:30,000 --> 00:00:34,990
You can think of HTML as controlling the structure of the web while CSS controls

10
00:00:35,000 --> 00:00:36,990
the presentation of it.

11
00:00:37,000 --> 00:00:40,990
The best way that I can think of to display that visually is to think of HTML as

12
00:00:41,000 --> 00:00:42,990
the structure of a new building.

13
00:00:43,000 --> 00:00:45,990
You can see the structure as it's being built, but you don't really know what

14
00:00:46,000 --> 00:00:47,990
the building is going to look like.

15
00:00:48,000 --> 00:00:52,990
CSS, on the other hand, serves as the skin of the building, and determines what the

16
00:00:53,000 --> 00:00:55,990
outside of the building is going to look like.

17
00:00:56,000 --> 00:00:58,990
By separating structure and presentation in this way, you can change how

18
00:00:59,000 --> 00:01:02,990
things look by simply changing the CSS files, all without changing the

19
00:01:03,000 --> 00:01:04,990
underlying structure.

20
00:01:05,000 --> 00:01:10,990
In terms of syntax, CSS is not a markup language like HTML, or even a scripting

21
00:01:11,000 --> 00:01:11,990
language like JavaScript;

22
00:01:12,000 --> 00:01:13,990
it's style sheet language.

23
00:01:14,000 --> 00:01:17,990
This means that CSS consists of a collection of formatting rules which

24
00:01:18,000 --> 00:01:20,990
identify the elements in the document that they should control and the

25
00:01:21,000 --> 00:01:22,990
properties that they wish to set.

26
00:01:23,000 --> 00:01:27,990
These styles are usually contained in an external file that can control a single

27
00:01:28,000 --> 00:01:29,990
document or entire web site.

28
00:01:30,000 --> 00:01:33,990
The term cascade refers to how these styles are applied to pages.

29
00:01:34,000 --> 00:01:37,990
Styles are applied in the order that they're found and since styles can be

30
00:01:38,000 --> 00:01:41,990
placed in several different locations, this often results in a cascade of styles,

31
00:01:42,000 --> 00:01:46,990
from external documents all the way down to locally placed styles.

32
00:01:47,000 --> 00:01:50,990
One of the major benefits of CSS is that it allows us to enable highly

33
00:01:51,000 --> 00:01:52,990
modularized web design.

34
00:01:53,000 --> 00:01:56,990
While this is a bit of an oversimplification, you can think of web sites as

35
00:01:57,000 --> 00:02:00,990
being controlled and constructed by five main elements:

36
00:02:01,000 --> 00:02:03,990
HTML controls the document structure;

37
00:02:04,000 --> 00:02:08,990
CSS controls the documents' look and field; JavaScript controls behavior within

38
00:02:09,000 --> 00:02:13,990
the client, or browser if you prefer; server-side languages such as PHP control

39
00:02:14,000 --> 00:02:18,990
processing and business logic; and databases such as MySQL store content.

40
00:02:19,000 --> 00:02:23,990
Now in some cases a web site might use all of these elements, while in others it

41
00:02:24,000 --> 00:02:26,990
might only use HTML and CSS.

42
00:02:27,000 --> 00:02:30,990
This modular approach means that you can change each of these elements

43
00:02:31,000 --> 00:02:31,990
independently of each other.

44
00:02:32,000 --> 00:02:36,990
In terms of CSS, you can change the entire layout and design of a page without

45
00:02:37,000 --> 00:02:39,990
ever changing its content or structure.

46
00:02:40,000 --> 00:02:43,990
You also speed development and site maintenance by controlling the formatting

47
00:02:44,000 --> 00:02:47,990
for an entire site through a small number of CSS files.

48
00:02:48,000 --> 00:02:50,990
Separating style and structure in this way helps your content become

49
00:02:51,000 --> 00:02:52,990
more portable as well.

50
00:02:53,000 --> 00:02:56,990
You can define separate styles for different types of media so that your page

51
00:02:57,000 --> 00:03:00,990
looks one way on the desktop and receives a more optimized design for print

52
00:03:01,000 --> 00:03:02,990
and mobile devices.

53
00:03:03,000 --> 00:03:06,990
As more and more devices consume web content, this allows you to control the

54
00:03:07,000 --> 00:03:09,990
presentation of your content within that device without having to change the

55
00:03:10,000 --> 00:03:11,990
structure of your file.

56
00:03:12,000 --> 00:03:15,990
Regardless of how complex the site is, I think it's pretty easy to see how

57
00:03:16,000 --> 00:03:19,990
important CSS is to the overall process of creating web sites.

58
00:03:20,000 --> 00:03:30,000
Anyone wanting to learn web design should regard CSS as an essential skill.