1
00:00:02.02 --> 00:00:03.03
- [Instructor] Hi, this is Chris Converse

2
00:00:03.03 --> 00:00:05.04
and in this episode we'll
add a graphic column

3
00:00:05.04 --> 00:00:07.09
to a web page using a CSS pseudo-element

4
00:00:07.09 --> 00:00:10.01
and some CSS flex properties, allowing us

5
00:00:10.01 --> 00:00:12.04
to alter the layout
without adding any markup

6
00:00:12.04 --> 00:00:14.01
to the HTML file.

7
00:00:14.01 --> 00:00:15.07
So if you'd like to follow along with me,

8
00:00:15.07 --> 00:00:17.07
download the exercise
files and let's begin

9
00:00:17.07 --> 00:00:21.03
by opening the HTML file in a text editor.

10
00:00:21.03 --> 00:00:23.06
So when you have the HTML
file open, up in the head area

11
00:00:23.06 --> 00:00:25.07
we have a link to a style.css file

12
00:00:25.07 --> 00:00:28.00
which we'll be opening in a moment.

13
00:00:28.00 --> 00:00:31.03
Inside of the body area,
we have a main element.

14
00:00:31.03 --> 00:00:34.08
This main element is going to
serve as our main flex container

15
00:00:34.08 --> 00:00:36.07
and the first element
in here, the article,

16
00:00:36.07 --> 00:00:38.04
will be the first column.

17
00:00:38.04 --> 00:00:41.03
Now the second column, which
will contain just a graphic,

18
00:00:41.03 --> 00:00:43.07
we're going to be adding
through a CSS pseudo-element.

19
00:00:43.07 --> 00:00:45.06
So I don't want to add
any additional markup

20
00:00:45.06 --> 00:00:48.05
to the HTML to add that design element.

21
00:00:48.05 --> 00:00:50.06
So let's go back to the exercise files.

22
00:00:50.06 --> 00:00:52.02
Let's find style.css.

23
00:00:52.02 --> 00:00:55.01
Let's open that in our text editor.

24
00:00:55.01 --> 00:00:57.05
Once that's open, let's scroll down.

25
00:00:57.05 --> 00:01:00.09
We're looking for the main rule here,

26
00:01:00.09 --> 00:01:02.02
and after the height property,

27
00:01:02.02 --> 00:01:04.06
let's come in here and
set another property.

28
00:01:04.06 --> 00:01:07.04
Let's set a display,

29
00:01:07.04 --> 00:01:11.05
and let's set this to flex.

30
00:01:11.05 --> 00:01:12.06
Next, let's get the cursor down

31
00:01:12.06 --> 00:01:15.04
inside of the main space article rule.

32
00:01:15.04 --> 00:01:16.09
After the padding property,
let's come in here

33
00:01:16.09 --> 00:01:19.00
and add a flex property.

34
00:01:19.00 --> 00:01:21.03
So type flex colon space.

35
00:01:21.03 --> 00:01:23.00
We'll use shorthand style here,

36
00:01:23.00 --> 00:01:25.04
so we'll use one for the flex grow,

37
00:01:25.04 --> 00:01:27.05
space one for the shrink,

38
00:01:27.05 --> 00:01:31.05
then a space and then 65% for the basis,

39
00:01:31.05 --> 00:01:33.02
then a semicolon.

40
00:01:33.02 --> 00:01:35.00
Now in order to have
our flex column show up,

41
00:01:35.00 --> 00:01:36.03
we're going to need a second element

42
00:01:36.03 --> 00:01:38.02
inside of the main
element, and this is where

43
00:01:38.02 --> 00:01:41.04
we're going to add that extra
element with a pseudo-element.

44
00:01:41.04 --> 00:01:45.03
So let's get our cursor
before the main space article.

45
00:01:45.03 --> 00:01:49.09
Let's create another
rule, main, two colons,

46
00:01:49.09 --> 00:01:54.08
then the word before,
that will add our element.

47
00:01:54.08 --> 00:01:57.09
Inside of here, let's start
with a content property.

48
00:01:57.09 --> 00:02:00.00
We're going to set this equal
to two single tick marks

49
00:02:00.00 --> 00:02:03.03
and a semicolon.

50
00:02:03.03 --> 00:02:08.08
Next let's set a display
property to block.

51
00:02:08.08 --> 00:02:11.06
Next property, let's set a flex property

52
00:02:11.06 --> 00:02:14.02
on this new pseudo-element.

53
00:02:14.02 --> 00:02:16.00
So flex colon space.

54
00:02:16.00 --> 00:02:22.08
We'll do one space one space and then 35%.

55
00:02:22.08 --> 00:02:25.03
Next property, let's set a background.

56
00:02:25.03 --> 00:02:28.03
Let's skip the color and go right to url

57
00:02:28.03 --> 00:02:29.08
so we can bring in a background image.

58
00:02:29.08 --> 00:02:33.01
So url, beginning and ending parentheses,

59
00:02:33.01 --> 00:02:39.04
type images, forward
slash, background.jpg.

60
00:02:39.04 --> 00:02:40.07
Then outside of the parentheses,

61
00:02:40.07 --> 00:02:43.04
we're going to set a no-repeat property.

62
00:02:43.04 --> 00:02:47.09
We're going to set the x position to 30%

63
00:02:47.09 --> 00:02:51.03
and the y position to zero.

64
00:02:51.03 --> 00:02:54.09
Then on the next line,
let's set a background-size,

65
00:02:54.09 --> 00:02:58.07
and we're going to set this
to cover, then a semicolon.

66
00:02:58.07 --> 00:03:00.06
So with those rules in place, hit save.

67
00:03:00.06 --> 00:03:01.09
Go back to the browser

68
00:03:01.09 --> 00:03:03.05
and you'll now see that
we have a new element

69
00:03:03.05 --> 00:03:06.04
being added that's being
treated like a flex column

70
00:03:06.04 --> 00:03:08.06
although the entire element is being added

71
00:03:08.06 --> 00:03:11.07
through a pseudo-element in our CSS.

72
00:03:11.07 --> 00:03:14.00
So without adding any
additional HTML to our page,

73
00:03:14.00 --> 00:03:16.02
we're able to add in
another design element

74
00:03:16.02 --> 00:03:19.07
using CSS pseudo-elements
and the flex properties.

75
00:03:19.07 --> 00:03:21.08
And so with that, I'll
conclude this episode,

76
00:03:21.08 --> 00:03:24.07
and as always, thanks for watching.