9: CSS Text Styling Tutorial | Basics of CSS | Learn HTML and CSS | Learn HTML & CSS Full Course

CSS text styling tutorial | Basics of CSS | Learn HTML and CSS | HTML tutorial. In this HTML tutorial you will learn how to style text using CSS, which is important to make your content stand out on your website, and make it readable to the website visitors. Using CSS to change text is easy, and you will learn to style text in no time. When it comes to styleing headers or paragraphs using CSS, it is done the same way, however there might be a few differences which we will discuss in this video.

➤ GET ACCESS TO MY LESSON MATERIAL HERE!

First of all, thank you for all the support you have given me!

I am really glad to have such an awesome community on my channel. It motivates me to continue creating and uploading content! So thank you!

I am now using Patreon to share improved and updated lesson material, and for a small fee you can access all the material. I have worked hard, and done my best to help you understand what I teach.

I hope you will find it helpful :)

[zakgraham]

I'm gonna start liking your videos because you don't beg for likes every video. well done.

[someone..]

Font-family 2:35

Font-size 4:05

Font-style 4:31

Font-weight 5:07

Text-align 5:31

Text-decoration 6:25

Text-indent 7:22

Text-transform 8:05

Color 9:04

Letter-spacing 12:32

Word-spacing 13:12

Line-height 13:33

[rahxephon]

Off topic: Three people who don't like this video, don't understand what html and css are used for.

On topic: I'm going through your videos like brownies one after another. Ten down 33 to go. I just have a few tips for those o probably don't already know about it. When using atom these are the few add-ons you should have;

1 emmet (must have)
2 file-icons (optional)
3 open-in-browsers (must have, you can choose to open in: ie, chrome, firefox, opera and safari)
4 atom-live-server (for me personal it's good to have it, but it's not a must have add-on)
5 atom-html-preview (for me personal it's good to have it, but it's not a must have add-on)
6 color-picker (must have)

Whit number 6 you don't need the Adobe color wheel anymore. Click where you want that color to be, hold down ctrl+alt+c you'll get a color pick window here you will be able to choose: RGB(A), HEX, HSL, HSV, VEC. Select your color and press enter and you're done.

atom-live-server and atom-html-preview are basically the same, the difference is that atom-html-preview opens the preview inside Atom and atom-liver-server opens on your default browser. The good thing about both these add-ons is that once you save your work it will automatically update on your browser, no need to refresh the browser.

emmet is something that will help you write faster. On an empty html file at the top just type ! and press TAB, you'll get a full html skeleton. If you want a div with a class or id, just type .container (for class) and press TAB to get <div class="container"></div> the same goes for id #container (for id) and press TAB to get <div id="container"></div>

My favorite part using emmet is to make ul and ol. Just type ul.nav>li.sub*3>a{box $} and press TAB you'll get:
<ul class="nav">
<li class="sub"><a href=" ">box 1</a></li>
<li class="sub"><a href=" ">box 2</a></li>
<li class="sub"><a href=" ">box 3</a></li>
</ul>

These are the few tips that I can share with everyone watching this video. Just one thing how you are doing things or whatever you are using to get things done, just remember to have fun while doing it. Sorry for this long comment. Keep up the good work.

Greetings from Holland.

[ericisaiahperez]

This is what I love to see, to understand each and every attribute, it is very clear. Thanks again.

[Keano]

you helped me so much, i got a coding book but the code is very old so i updated it to your code and it worked!!

[kiams]

I am learning at the age of 46... Your explanation is impressive...

[taynay]

Your tutorials are the BEST. So sending money to contribute because you truly have the best teaching

[mrsdhuha]

You maintain very high standards through all your videos. Many thanks.

[CarolNankinga]

I can't get enough of these lessons. Thank you so much.

[techexpert]

I'm just so much in love with this channel.. Man your lessons are excellent! Keep on doing this great job

[reegliss]

you can also add an alpha value to a hex code by adding two characters at the end of the hex expression (example : #ff000066). very nice and comprehensive tutorials by the way!

[pianoLee-sxdx]

I am really enjoying all of your tutorials!

[branimirnovakovic]

Thank you for making these tutorials, kind sir.

[TCTFounder]

I get engrossed in the content watching one video after another that I forget to "like" them. Don't worry though, I'm going to have to go back and thumb-up the 8 other videos I've watched. Thank you very much for the lessons!

[aoogaaoogaaoogaaoogaaoogaaaa]

My teacher just gave me this paragraph and told me to do what the instructions said but he didn’t tell me anything about how to color the text or change the font 😰
so this really helped thanks!
(FYI I’ve never even touched css before 💀)

[ismaeldaif]

That was very useful thank you so much !

[MilanB]

Long time no see. Btw your channel made great progress, i remember when you had 10k subs, now you have 41k. Congrats, mate.

[ioannisme]

perfect clear voice very understandable tutorial ..looking forward to see all videos next

[muzzammilowais]

I am following your series, incredible stuff!

[davescorneroftheworld]

GREAT JOB, you are a GREAT instructor thank you for your time. I JUST