Welcome back.

In the last video we built up the scaffolding for two components.

In this video we'll introduce some HTML structure and styling.

What you'll notice is just how little the framework gets in the way of

semantic markup and styles.

Letting designers have total control of each components look and feel.

Let's get going.

We're picking right up where we left off in the last video.

I've got the entry component.html open.

And before I start writing any html markup, I'm going to enter the different

properties I'm going to expect to have in my entry.

Let's delete this message from the file.

And each entry will have a title,

a photo, a description, and comments.

I'm gonna leave comments off for now.

We'll be tackling the comments later on in the course.

Now I'll add curly braces around each property.

These values will come from the component class.

If we look at the browser, we'll see that the message for

the entry list component is there but nothing from the entry component.

Okay, so we've added the properties to the entry component

template now let's add them to the entry component itself.

Each property will be a string.

So I've set the type accordingly.

Since we don't have this wired up to a server,

I'm going to assign some initial values.

Let's set the title to My First Photo.

The photo to be the URL

http://placehold.it/800x500 with

the query string of text=Angular Basics.

And then for the description, 'A Description

of My First Photo'.

We'll change these later.

This will give you something to look at in the browser.

Save the file.

And now the values are showing up in the browser.

I am going to remove the message from the entry list component the html file.

So I'm gonna open up entry-list.component.html,

delete the first line and save it.

And back in the browser, we just have the values from our entry component.

Let's start to write out our HTML.

In the entry.componnet.html file let's wrap the title in an h2 tag.

Then save it.

The browser shows the change.

I want the image and the description to be wrapped in a figure element.

This is standard HTML so nothing special here.

The photo should be a property

that will go on the source attribute of an image tag.

Just like if you're writing regular html,

be sure to put quotes around the photo in the curly braces.

Then I'll rub the description in a figure caption.

Save it.

The browser shows our entry without any style.

So let's fix that.

Open up the entry component.css file.

The figure element by default has a margin of 40 pixels around it.

I want to remove it.

So let's set it to 0.

And then add a 1px border around it.

If we switch over to the browser, we can see that our new styles have been applied.

Let's inspect that.

I'm going to use Chrome Developer tools to see the CSS.

If I right click on the element and click on the Inspect element

I can see the style rules that are applied to this element.

You'll notice that the figure style has an extra identifier on the selector

This is how angular scopes the style to that particular component.

If we look at the HTML tag for figure we'll see the same identifier as

an attribute of the element Now let's add some more rules to our style sheet.

I want the caption to overlay the photo.

So I'll give it a transparent

background, And white text.

Bump up the font size Add some padding.

Position it at the bottom of the parent element.

Next, I need to make the figure to have a relative position,

so that the caption will be properly positioned.

Then I need to adjust the photo so it fits in the figure element.

I'm going to make it fluid, so that the width will be 100% of the parent element.

Remember, that because we're adding these styles to the component's style sheet

these changes won't have any effect on other components in our app which is

a very nice feature.

Looking at the browser we can see that the changes that took effect make our figure

100% flexible.

One more thing I want to do is add a margin to the outer app entry element.

To do this we'll use the host, Pseudo class.

If you're not familiar with the host pseudo class it's part of the CSS3

specification for scoping to the shadow dome.

I've included some information on the host pseudo class in the teacher's notes.

I'm going to add the padding of 1em to each app entry element.

Because the app entry element is a custom element,

the browser treats it as an inline element.

Which means we cannot simply add padding to it.

We need to set it as a block level element.

Great, our browser shows the entry and the styles are looking great.

The ability to scope your style sheet to a single component

is one of Angular's best features.

Having a place where the content creators and the designers can make changes without

touching core business logic is a must for any team.

In the next video, we'll learn about directives and

how to control the page layout.