1
00:00:02.01 --> 00:00:03.02
- [Instructor] Hi, this is Chris Converse,

2
00:00:03.02 --> 00:00:04.02
and in this episode,

3
00:00:04.02 --> 00:00:07.08
we'll use CSS to create indented
paragraphs in our web page,

4
00:00:07.08 --> 00:00:08.08
and we'll even look at how to

5
00:00:08.08 --> 00:00:12.00
exclude the first paragraph
item in each parent element.

6
00:00:12.00 --> 00:00:13.03
So if you'd like to follow along,

7
00:00:13.03 --> 00:00:14.08
download the exercise files,

8
00:00:14.08 --> 00:00:18.06
and we'll begin by opening the
HTML file in a text editor.

9
00:00:18.06 --> 00:00:20.01
So once you have your HTML file open,

10
00:00:20.01 --> 00:00:23.06
you'll see that we have a
link to a style.css file

11
00:00:23.06 --> 00:00:25.05
here in the head area.

12
00:00:25.05 --> 00:00:28.09
And then, inside of the HTML,
we have a whole lot of copy,

13
00:00:28.09 --> 00:00:32.03
separated into an article
and aside elements.

14
00:00:32.03 --> 00:00:33.03
If you open this up in a browser,

15
00:00:33.03 --> 00:00:37.07
you'll see all of the content
here showing up in the layout.

16
00:00:37.07 --> 00:00:39.04
So to begin creating our text indents,

17
00:00:39.04 --> 00:00:41.02
let's go back to the exercise files,

18
00:00:41.02 --> 00:00:45.00
and let's open up style.css
in our text editor.

19
00:00:45.00 --> 00:00:47.07
So inside of the CSS
file, let's scroll down.

20
00:00:47.07 --> 00:00:51.06
Let's find the rule that
targets the article element.

21
00:00:51.06 --> 00:00:53.05
Let's add a few returns.

22
00:00:53.05 --> 00:00:55.04
And let's target the paragraph elements

23
00:00:55.04 --> 00:00:57.05
inside of the article element,

24
00:00:57.05 --> 00:01:00.03
which in the layout is
the left column here,

25
00:01:00.03 --> 00:01:05.04
and let's remove the margin
properties on those paragraphs.

26
00:01:05.04 --> 00:01:08.07
So in the CSS we'll
start by typing article,

27
00:01:08.07 --> 00:01:14.01
then a space, then a
p, put in our brackets,

28
00:01:14.01 --> 00:01:14.09
let's come in here

29
00:01:14.09 --> 00:01:18.05
and set a margin property
to 0 for all four sides,

30
00:01:18.05 --> 00:01:20.09
save our CSS, and then
over here in the browser,

31
00:01:20.09 --> 00:01:22.04
we'll now see that we have no spaces

32
00:01:22.04 --> 00:01:25.07
between our separate paragraphs.

33
00:01:25.07 --> 00:01:27.06
So now back over to the CSS.

34
00:01:27.06 --> 00:01:29.00
Inside of that same rule

35
00:01:29.00 --> 00:01:31.08
let's come in here and add
a text-indent property.

36
00:01:31.08 --> 00:01:34.08
So text, dash indent,

37
00:01:34.08 --> 00:01:38.01
and we'll set this to 1.8 ems,

38
00:01:38.01 --> 00:01:40.08
so 1.8, em, semicolon,

39
00:01:40.08 --> 00:01:43.02
save our CSS again, and
now back in the browser

40
00:01:43.02 --> 00:01:45.08
we can see our indents showing up.

41
00:01:45.08 --> 00:01:46.08
Now the other thing I want to do

42
00:01:46.08 --> 00:01:48.06
is make sure that the first paragraph

43
00:01:48.06 --> 00:01:52.04
inside of each group is not indented.

44
00:01:52.04 --> 00:01:53.06
So if I scroll up to the top here,

45
00:01:53.06 --> 00:01:55.08
I don't want to have the
first paragraph indented,

46
00:01:55.08 --> 00:01:57.07
however, I want every subsequent paragraph

47
00:01:57.07 --> 00:02:00.01
to be indented in a particular group,

48
00:02:00.01 --> 00:02:03.07
which is this article
group, or article element.

49
00:02:03.07 --> 00:02:06.00
So to do that, let's go back to our CSS.

50
00:02:06.00 --> 00:02:09.00
Let's come into the article space p rule.

51
00:02:09.00 --> 00:02:10.07
Let's cut the text-indent property

52
00:02:10.07 --> 00:02:12.09
from this particular rule.

53
00:02:12.09 --> 00:02:15.01
Let's close that up.

54
00:02:15.01 --> 00:02:16.08
And then let's come in
here and add another rule

55
00:02:16.08 --> 00:02:18.08
that's going to target a paragraph element

56
00:02:18.08 --> 00:02:23.04
only if it follows
another paragraph element.

57
00:02:23.04 --> 00:02:26.04
So we'll do that by
typing article, space p,

58
00:02:26.04 --> 00:02:31.01
then the space, plus, then another p.

59
00:02:31.01 --> 00:02:32.09
Then we'll add in our brackets,

60
00:02:32.09 --> 00:02:35.09
and let's paste in that
text-indent property here.

61
00:02:35.09 --> 00:02:37.06
Now let's save our CSS.

62
00:02:37.06 --> 00:02:38.04
Back to browser,

63
00:02:38.04 --> 00:02:40.02
we'll now see that the
first paragraph element

64
00:02:40.02 --> 00:02:43.04
inside of our article
element is not indented,

65
00:02:43.04 --> 00:02:44.06
however every other paragraph

66
00:02:44.06 --> 00:02:48.04
inside of that group is indented.

67
00:02:48.04 --> 00:02:50.09
Now to do the same thing
for the aside element,

68
00:02:50.09 --> 00:02:53.04
let's come back over to our CSS.

69
00:02:53.04 --> 00:02:55.08
Let's find the rule where
we target the paragraph

70
00:02:55.08 --> 00:02:57.03
inside of the article.

71
00:02:57.03 --> 00:02:58.09
Let's hit a comma.

72
00:02:58.09 --> 00:03:01.06
Let's type aside, space p.

73
00:03:01.06 --> 00:03:03.01
Let's hit save.

74
00:03:03.01 --> 00:03:05.03
That will remove the spaces
between the paragraphs

75
00:03:05.03 --> 00:03:07.09
in the aside.

76
00:03:07.09 --> 00:03:09.01
And then let's come down to the rule

77
00:03:09.01 --> 00:03:10.08
where we target the paragraph elements

78
00:03:10.08 --> 00:03:13.07
only if they follow
another paragraph element.

79
00:03:13.07 --> 00:03:15.08
Let's hit a comma space.

80
00:03:15.08 --> 00:03:20.07
Let's type aside, space
p, space plus, space p,

81
00:03:20.07 --> 00:03:22.07
and then hit save.

82
00:03:22.07 --> 00:03:24.03
So now we'll get exactly the same effect

83
00:03:24.03 --> 00:03:25.04
in the aside element

84
00:03:25.04 --> 00:03:29.06
as we are inside of the article element.

85
00:03:29.06 --> 00:03:30.08
So with two CSS rules,

86
00:03:30.08 --> 00:03:33.05
we're able to create text
indents for our paragraphs,

87
00:03:33.05 --> 00:03:35.04
and the adjacent siblings
selector allows us

88
00:03:35.04 --> 00:03:38.07
to only target paragraphs
that follow other paragraphs.

89
00:03:38.07 --> 00:03:40.08
And so with that, I'll
conclude this episode.

90
00:03:40.08 --> 00:03:43.07
And as always, thanks for watching.