CSS Tutorial for Beginners - 01 - Introduction to CSS - Bilingual Subtitles
Welcome to your very first beginning on CSS, and this is part of our ongoing web development series.
Now, if you do not have a solid understanding of HTML,
you should go to my channel page and go through the HTML for Beginner's tutorial set.
That's kind of a prerequisite.
Now, if you already know HTML and you feel you don't need that that's fine.
But you don't know anything about HTML,
I strongly recommend that you go ahead and take that series because an understanding of HTML is really crucial to using CSS.
Now, as a note, we will also be introducing some new HTML elements in this series.
And the reason is they go hand in hand together.
So it didn't make sense to discuss the those in the HTML for beginners because they really work hand in hand with CSS.
In of what you will need, we're just going to use notepad for now, just like we did in the HTML for beginners series.
Now eventually we'll use an editor, but for now we just need notepad.
Okay, so what is CSS?
Well, here's the dictionary version.
CSS stands for cascading style sheets.
It is a style sheet language used for describing the look and formatting of a document written in a markup language.
Markup language which is, for us, HTML.
Well, that's pretty nice that dictionary term.
But what is it simply?
Well, it just adds style to your HTML.
That's it.
Pretty something.
And the nice thing about it is you can completely control how your web pages look without changing your HTML and so it comes in very handy.
An I like to use is imagine you build a fence and imagine that fence is your HTML.
But the fence is unpainted.
It's basically just wood.
And so in order to add color to it, you need to paint that fence.
the paint would be the CSS in this analogy.
It adds style to the fence.
So that's a good way to think of it.
You could also use the same analogy for a house.
You build a house and then you have to add style to the house, right?
You have to paint the inside in the exterior.
You know, you need to add fixtures and paintings and all sorts of things that add style to the house.
So that's a good way to think of this.
Okay, well, let's not waste any more time.
Let's go ahead and do some CSS in this initial video.
Okay, so let's open up Notepad and we're going to reuse some of the source that we used in the HTML
tutorial series and you guys will probably recognize that if you took that series.
I think this is from episode two or three.
Now, if you do not have this source feel free to hit the pause button now and just go ahead and copy all of this.
So let's go ahead and add some CSS to this HTML document and what we're going to go ahead and
use here is the style element tag and it's just style that simple and you'll notice that we're
putting this within the head element that's where this goes because remember it's not actually
content we're actually just styling some of the elements in the body.
Remember we're going to go ahead and paint some of these.
We're to give this some color actually.
So let's go ahead and add a closing tag for this.
And there you go.
Now I want to point out two things.
This style element is an HTML element.
We put our CSS inside here, but this is actually an HTML element.
So all of our CSS that we're going to code will go inside this element everything inside here.
I also want to point out that this is one way that we can reference our CSS.
There are other ways we can go ahead and reference our CSS.
This is just one way.
Now we will be covering that in future tutorials.
But for now, this is one way.
And just keep that in mind that there are other ways and I will go over that in another tutorial.
Okay, so now let's go ahead and save this document if you haven't already.
and you want to save this as a HTML document and it's probably going to say I already have it there
it already exists and I'm going to go ahead and hit yes to this.
Now what we want to do here is let's just take a look at the page minus any CSS so we haven't had any CSS yet we just added the HTML
element but let's go ahead and just minimize this and we will open this up.
And there you can see we have no color yet added this.
So let's close that out and we'll go back to the source.
Okay, so now we're back in the source and let's go ahead and select the element that we want to style.
And in this case, I want to select the h1 element.
So we're going to go up here and type in H1.
Now this is the selector.
And what we're doing is telling CSS this is the element that we want to style.
So all we have to do is type in H1.
Notice we don't have to use the angle brackets.
We only have to type in H1.
So just keep that in mind.
Now we also need an opening and closing squiggly bracket.
And all the styles that we're going to do will go within these two brackets.
So everything that we style in this H1 element will be between these two brackets.
actually let's create some space here so that we have so it's a easier to
read this now we have to decide the style that we want to apply to here and in
this case we're going to go ahead and change the background color of this now we could
underline this we could change the font there's all kinds of things we could do
but in this case we're just going to do one style today now we'll cover all the different ways you can style HTML elements.
But this case, we're going to do background color.
And each one of these styles is called a property.
That's what they're actually called.
And the property we use is background hyphen color.
Now again, that is the property.
Now after the property, we put in a colon, but we're not done.
Now we have to specify what value that color is going to be.
Or simply what color do we want this to be?
And in this case we want this to be purple.
And so that is the value.
And then we put in a semicolon.
And this is the way it's going to be for all the CSS that you do from this point on.
This is the same type of thing you'll be doing.
So you get really used to this.
You'll put the property you'll put a colon then you have to specify the value that you want in this case
We need a color which is purple and then you put a semicolon now if we did another CSS property
We would just put this right below it and we would do the same type of procedure and actually what this semicolon does is
It's a break it says okay.
I'm done with this move on to the next property.
Now, collectively, all this is called a CSS rule.
But the way I like to think of it is we're just saying,
Hey, I want to style this h1 element, and I want the background to be purple.
And as I said, if we want to add any other styles, we would just put them right below here.
And again, we'll be doing that in future tutorials.
So let's go ahead.
and save this now.
And let's go ahead and open up the document.
Unlock More Features
Install the Trancy extension to unlock more features, including AI subtitles, AI word definitions, AI grammar analysis, AI speaking, etc.
Compatible with Major Video Platforms
Trancy not only provides bilingual subtitle support for platforms like YouTube, Netflix, Udemy, Disney+, TED, edX, Kehan, Coursera, but also offers AI word/sentence translation, full-text immersive translation, and other features for regular web pages. It is a true all-in-one language learning assistant.
Supports All Platform Browsers
Trancy supports all platform browsers, including iOS Safari browser extension.
Multiple Viewing Modes
Supports theater, reading, mixed, and other viewing modes for a comprehensive bilingual experience.
Multiple Practice Modes
Supports sentence dictation, oral evaluation, multiple-choice, dictation, and other practice modes.
AI Video Summary
Use OpenAI to summarize videos and quickly grasp key content.
AI Subtitles
Generate accurate and fast YouTube AI subtitles in just 3-5 minutes.
AI Word Definitions
Tap on words in the subtitles to look up definitions, with AI-powered definitions.
AI Grammar Analysis
Analyze sentence grammar to quickly understand sentence meanings and master difficult grammar points.
More Web Features
In addition to bilingual video subtitles, Trancy also provides word translation and full-text translation for web pages.