- [Instructor] Hi, this is Chris Converse,
and in this episode,
we'll use CSS to create indented paragraphs in our web page,
and we'll even look at how to
exclude the first paragraph item in each parent element.
So if you'd like to follow along,
download the exercise files,
and we'll begin by opening the HTML file in a text editor.
So once you have your HTML file open,
you'll see that we have a link to a style.css file
here in the head area.
And then, inside of the HTML, we have a whole lot of copy,
separated into an article and aside elements.
If you open this up in a browser,
you'll see all of the content here showing up in the layout.
So to begin creating our text indents,
let's go back to the exercise files,
and let's open up style.css in our text editor.
So inside of the CSS file, let's scroll down.
Let's find the rule that targets the article element.
Let's add a few returns.
And let's target the paragraph elements
inside of the article element,
which in the layout is the left column here,
and let's remove the margin properties on those paragraphs.
So in the CSS we'll start by typing article,
then a space, then a p, put in our brackets,
let's come in here
and set a margin property to 0 for all four sides,
save our CSS, and then over here in the browser,
we'll now see that we have no spaces
between our separate paragraphs.
So now back over to the CSS.
Inside of that same rule
let's come in here and add a text-indent property.
So text, dash indent,
and we'll set this to 1.8 ems,
so 1.8, em, semicolon,
save our CSS again, and now back in the browser
we can see our indents showing up.
Now the other thing I want to do
is make sure that the first paragraph
inside of each group is not indented.
So if I scroll up to the top here,
I don't want to have the first paragraph indented,
however, I want every subsequent paragraph
to be indented in a particular group,
which is this article group, or article element.
So to do that, let's go back to our CSS.
Let's come into the article space p rule.
Let's cut the text-indent property
from this particular rule.
Let's close that up.
And then let's come in here and add another rule
that's going to target a paragraph element
only if it follows another paragraph element.
So we'll do that by typing article, space p,
then the space, plus, then another p.
Then we'll add in our brackets,
and let's paste in that text-indent property here.
Now let's save our CSS.
Back to browser,
we'll now see that the first paragraph element
inside of our article element is not indented,
however every other paragraph
inside of that group is indented.
Now to do the same thing for the aside element,
let's come back over to our CSS.
Let's find the rule where we target the paragraph
inside of the article.
Let's hit a comma.
Let's type aside, space p.
Let's hit save.
That will remove the spaces between the paragraphs
in the aside.
And then let's come down to the rule
where we target the paragraph elements
only if they follow another paragraph element.
Let's hit a comma space.
Let's type aside, space p, space plus, space p,
and then hit save.
So now we'll get exactly the same effect
in the aside element
as we are inside of the article element.
So with two CSS rules,
we're able to create text indents for our paragraphs,
and the adjacent siblings selector allows us
to only target paragraphs that follow other paragraphs.
And so with that, I'll conclude this episode.
And as always, thanks for watching.