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

404,703

5,759 0

Published 2017-09-14

FIND MY 2023 COURSE HERE: • 1 | INTRODUCTION TO HTML & CSS | 2023...

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.

CSS units list: www.w3schools.com/CSSref/css_units.asp
Adobe Color Wheel: color.adobe.com/

➤ 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 :)

Material for this lesson: www.patreon.com/posts/lesson-material-42361704

All Comments (21)

@Dani_Krossing 1 year ago

NEW UPDATED 2023 COURSE AVAILABLE! 🙂 You can find it here: https://www.youtube.com/watch?v=v8jDnBYc0bs&list=PL0eyrZgxdwhwP0AxnbBiDBCi53LK9uCMZ&ab_channel=DaniKrossing
@zakgraham1283 6 years ago

I'm gonna start liking your videos because you don't beg for likes every video. well done.
@a.snairog775 2 years ago

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
@Keano9766 1 year ago

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!!
@kiams7811 3 years ago

I am learning at the age of 46... Your explanation is impressive...
@ericisaiahperez5324 6 years ago

This is what I love to see, to understand each and every attribute, it is very clear. Thanks again.
@Niko_Dola 2 years ago

I love you for doing this tutorial!
@techexpert2010 6 years ago

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

Your tutorials are the BEST. So sending money to contribute because you truly have the best teaching style!!!!!
@brythm5465 2 years ago

This was great!! Thank you!
@branimirnovakovic6928 5 years ago

Thank you for making these tutorials, kind sir.
@jaimepalomera1967 5 years ago

thank you so much! this definitely helped a lot
@pianoLee-sx9dx 6 years ago

I am really enjoying all of your tutorials!
@rahxephon76 5 years ago

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.
@Travelised 4 years ago

Well explanation thank u
@Beast80001 4 years ago

Thanks, this is exacly what i needed!
@CarolNankinga 2 years ago

I can't get enough of these lessons. Thank you so much.
@muzzammilowais1347 4 years ago

I am following your series, incredible stuff!
@mrsdhuha 3 years ago

You maintain very high standards through all your videos. Many thanks.
@davescorneroftheworld1147 5 years ago

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