Name: CSSフルコース - FlexboxとCSS Gridのチュートリアルを含む (CSS Full Course - Includes Flexbox and CSS Grid Tutorials)
Uploaded: 2021-01-14T10:23:55.000Z
Duration: 1 h 25 min 39 s
Description: VoiceTubeの動画で発音を聞きながら英語表現を覚えよう！学べる英語：

This is a complete CSS course or cascading style sheets.

CSS is something you used to style websites or style HTML.

So before you watch this course, you should have some familiarity with HTML.

You can learn a CML through the free HTML curriculum at free Coke camped out.

Or or you could check out the video course that a link to in the description this whole CSS course follows along with the CSS curriculum.

Or so when you hear me talk about challenges or completing challenges, I'm talking about the challenges.

As far that curriculum, however, it's a standalone video, so you don't have to go through the curriculum to get value out of this course.

But if you want to, you can go through that curriculum as well.

In the description, uh, after you finish this course, you may want to try out some CSS projects, so I have a link to a playlist with a bunch of CSS projects.

You can do a ride in the description and then after you master CSS and HTML, it may be good to try out JavaScript.

So let's get started in this challenge, we're gonna talk about in line styles.

Inline styles are where you style something right on the element that you want to effect.

So if I put my mouth on this p tag here, I can add a style to the P pack by just using style, and then we're gonna put what the style is gonna be you and we're gonna put color.

So that would just make the color of that text blue.

But for this talent, we're not going to style.

And now I'm going to add the style to this ace to tag, and I'm going to make the style where the color is going to be a threat just like that.

And let's open up the browser and see what that looks like.

Okay, you can see that the text The title here is red.

In the last challenge, we talked about in line styles.

Now we're gonna talk about a different way to add styles using a style block and you can see we use color red.

There are actually hundreds of CSS properties like color.

We're going to eventually get to those, but not quite yet.

So to make a style block just at the beginning, I can add the tag style and then we just need a closing style block.

Now, I can add all my styles between these two style tags.

If I wantto style all the paragraph tags, I can put a p and I'm gonna put curly Brace.

And inside these two curly braces, I'm gonna put color bread.

Now, this is going to style all the paragraphs every time you see a P tag like here, here and all the P tags were gonna now be read.

If we look in the browser weaken, see what that's gonna look like.

This paragraph is read all the P tags have now changed the text to read so for this challenge.

We're going to take out the inline style here, and I'm going to add some style to this block up here instead of styling.

P tag's running a style that h two tags and I'm going to make them all blue So I'm gonna put Color blue Now Let me open up the browser and we'll see what that looks like if I refresh and you can see the age to is now blue.

In the last challenge we learned about styling tags like this.

In this challenge, we're talking about styling classes.

Classes are reusable styles that could be added to HTML elements.

So to show that you're styling a class, you would put a dot in front of it.

So I'm the changes eight h 22 dot blue text.

And if you add the stock blue text, this is only going to style elements that have a class of blue text.

So, for instance, for this paragraph I'm going to add a class and I'm going to put in blue text now.

You can see I put a period up here, but you don't put a period down here.

The period just means that the class when you're looking at your CSS your style's.

So if I open this in my browser and refresh it, we can see that this is now blue right here.

We're gonna change this up instead of making us a blue text.

It's now going to say read text and this color is going to become red.

Um, I'm not gonna need this anymore because instead of playing the class on the pictograph, I'm gonna put the class on this age to tag.

And then if I show that in the browser and refresh, you can see the title is red.

What's great about classes is that they allow you to use the same CSS styles on multiple HTML elements.

So friends and see how this has class read text.

I can had read texts, a class read text to any element to make it red.

And that's what we're gonna do in this challenge.

So on the first p element right here, right up here, I'm gonna add class equals read text.

And when I open up the little browser here, you'll see that the title is red and the first paragraph is red.

Just by adding the class to both elements, there are hundreds of different CSS properties.

We've only talked about color so far, but another one is font size that's pretty self explanatory.

It's going to change the font size of an element.

So, for instance, I can put font size 30 pixels, and now everything that has the red text class will also be font size 30.

So if I look in here, you can see that this paragraph is a lot bigger.

Now we're going to change the font size of paragraphs, so I'll just remove what I had here.

So it right down here, it's gonna be key, and the font size is going to be 16 pixels.

Put 16 p x and now if I show the browser here, we'll see that all the paragraphs are 16 pixels that we've just increased everything to 16 pixels for the paragraphs you can set, which font in element should use by using the font family property.

Now you can use a type or style of thought like Sarah If San Sierra for mono space or you can put in the exact fund.

So in this challenge, we're gonna make all the P elements mano space.

So right here, I'm going to put font family and then mano space.

And if we just showed this in the browser and refresh, you can see now we have these this mono space font here just like that, you can import fonts from different websites.

A free library of Web funds that you can use is ghoul fonts.

They have a lot of great fonts, and that's what we're gonna do.

In this challenge, we're gonna see how to import ghoul fonts.

So if I just paste in some coat up here, this code comes directly from the ghoul Fonz website, and you can see it's the font family lobster.

So I'm just about to show you how to use that right in our code here.

So what I'm going to do is for the age to element.

I'm gonna at each to here, and I'm at a font family of lobster.

Now, that's all I really had to do for this challenge.

If I wanted to, I could add a backup font that would be used just in case the cool font didn't load like this.

I do a comma, and then I can put a generic font that's gonna be used if the specific font doesn't load.

I'm just gonna open the browser and see if it works.

And you can see we have the lobster font right here.

There's some default fonts available in all browsers like Mono Space, Serif and San Serif.

You can see we're using the mono space font right here.

So when one fun isn't available, you can tell the browser to degrade or default toe another font like one of these default Fonz like the model Space Font, for example.

Let's say we had the Farr family in the font family.

So if I add Helvetica right here, and I can actually just make a list of fonts right here, So in font family, when you have a list here first it tries the first font, but that one's unavailable.

字幕リスト動画再生

CSSフルコース - FlexboxとCSS Gridのチュートリアルを含む (CSS Full Course - Includes Flexbox and CSS Grid Tutorials)

specific

period

instance

spot