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

FIND MY 2023 COURSE HERE: • 1 | INTRODUCTION TO HT...
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_...
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: / lesson-material-42361704

[@Dani_Krossing]

NEW UPDATED 2023 COURSE AVAILABLE! 🙂 You can find it here: kzbin.info/www/bejne/rGnNdaF4jshjmNU&ab_channel=DaniKrossing

[@zakgraham1283]

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

[@ericisaiahperez5324]

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

[@rahxephon76]

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 the same goes for id #container (for id) and press TAB to get 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: box 1 box 2 box 3 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.

[@Dani_Krossing]

I will go ahead and pin your comment ;)

[@raz2763]

Not all heroes wear capes...

[@alexanderschmidt2543]

THANK YOU! That is what i wanted! I wasn't satisfied with atom-html-preview. atom-live-server was the solution i was searching for but couldn't find anywhere... atom-live-server paired with autosave-onchange is like the live preview from Brackets. I love it! Greetings from Germany :D

[@kelvincuevas7699]

rahxephon76 I’ve been going to school for a month the teacher don’t f***g explain and whit this video I’m very clear. Thanks so much.

[@pm_shaw]

Your suggestion on Atom's Emmet plugin (atom.io/packages/emmet) was amazing!

[@a.snairog775]

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

[@bc2536]

thanks champ

[@techexpert2010]

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

[@taynay75]

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

[@kiams7811]

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

[@branimirnovakovic6928]

Thank you for making these tutorials, kind sir.

[@jaimepalomera1967]

thank you so much! this definitely helped a lot

[@pianoLee-sx9dx]

I am really enjoying all of your tutorials!

[@mrsdhuha]

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

[@ioannisme7495]

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

[@CarolNankinga]

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

[@JohnKelvin098]

I really appreciate your tutorials. I've been watching it since morning and I'm learning a lot. I chose to use the Visual Studio Code as my application for coding and I think it has many awesome features that are very handy like the built-in color wheel or RGB program that lets you choose and customize the color you want and it will automatically input the RGB coordinates. Please Keep up these tutorials. It's really helping a lot of people. Thank you very much and God bless.

[@davescorneroftheworld1147]

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

[@muzzammilowais1347]

I am following your series, incredible stuff!

[@Beast80001]

Thanks, this is exacly what i needed!

[@Keano9766]

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!!

[@brythm5465]

This was great!! Thank you!

[@Niko_Dola]

I love you for doing this tutorial!

[@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!

[@laiqaahmed3724]

Very important chapter indeed in terms of css. Dani bro kept it to the point and clear . I would be learning from both his series on html and css . Thank you for your hardwork and time !

[@MilanB]

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

[@Dani_Krossing]

Milan :D Thank you :) Yes the channel is doing great and the people who subscribe seem really nice and supportive.

[@jamesbrandon8582]

One year after your comment, it has literally quadrupled to 160k subs, thats crazy!

[@nvlel]

@@jamesbrandon8582 1 year later and his subs nearly doubled to 310k

[@yasirjune69]

it is really a good video for the beginners and i really appreciated your work.

[@reegliss93]

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!

[@ismaeldaif4014]

That was very useful thank you so much !

[@moenesma9415]

Thanks for this good Turtorial

[@stefanenyedi1900]

good job, bro!

[@miazeng7752]

YOU ARE AWESOME!!!!!

[@progress2171]

Thank you for that!!!!!!

[@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 💀)

[@Travelised]

Well explanation thank u

[@argenisaguilar9045]

Great..thaks so much...👍

[@SkepticalBill]

Thank you!

[@aaryanthakur8952]

thank you so much .It helped me a lot :)

[@masudurrahman0684]

Thank you for this Video.

[@dllm3tommy741]

Thanks for the video

[@theblackelephant]

Bro thanks alot you have a good and nice way to explain.

[@salemxd4563]

this is a very clean lesson thanks

[@split3278]

thank you this is very helpful

[@aci25tv]

Such an awesome teacher you are. Learning so much from your great videos. Thank you so much! Question, do you have a tutorial how to do masking with CSS? Hope you do, and if you don't I hope you make a tutorial on that.

[@Dani_Krossing]

Hi :) no there is not a tutorial on masking yet, but there will a tutorial on Flexbox and clipping/masking CSS within the next few lessons, since the latest video exercises (episode 18 & 19) included some older techniques to web programming. Such as "float" and "hidden: overflow", which are both depreciated techniques. Flexbox and CSS masking are big enough areas to deserve an entire lesson each, and are going to be part of this course within the next few lessons :)

[@ahmedel-hindawi9226]

really helpful thanks

[@inspirationalworld5610]

Brilliant job

[@mohanadalhiti9168]

Thank you for this

[@umajitendra2213]

your voice is very good. Way of teaching is awesome

[@SanDex-V-Felix]

Wow ur are amazing .. thank u 💕💕

[@apporvaarya]

nice tutorial Sir :)

[@alifiaputri9455]

thanks !!

[@someshsharma708]

thank you so much sir

[@kavyarayidi1839]

you are the best teacher ever

[@thestarr5844]

thank you

[@vangelova7443]

Thank you so much for the detailed lesson! May I ask a question? So when we use the text-transform and we set it to let's say lowercase, it sort of ignores the way we have written the sentence/heading/paragraph, etc. in HTML. So is it like this because of the fact that css has higher priority than html? I mean does styling have higher priority than HTML tags? Thanks in advance!

[@Esra-mm6yk]

Thanks

[@zakariehaji]

I would love to have you as a teacher

[@ahnafbataineh8319]

ty for video what the program the u used

[@JalalKhan-br3ld]

i like and leave a comment each time cos you dont beg for that ...like others right...stay happy and cool

[@darlenelopez5632]

I want to know, how do you SEPARATE paragraphs using CSS instead of inside HTML?

[@tamimabdullah4638]

14:00 Thanks man

[@buntoeunsoun6262]

I like it

[@ishaqkhan4508]

brilliant

[@HexBeatz]

how can i put a transparent background box behind the para ?

[@akash5251]

Love and respect from India 🇮🇳🇮🇳

[@entertainme6146]

Hi was wondering what happened to part 10? The playlist just goes to an old video?

[@rabinpd3175]

Notification squad☝☝

[@kenditchy]

What is the program that you are using like the thing you are Actully tying all of this in

[@mjelumba2545]

Can i ask, what tool do you used ?

[@Live4Life110]

Hi guys. I am wondering and I can t find answer anywhere. Can you in HTML change something else then -s name ? Like change font-family or color and if you can t , why is that ?

[@abdullahanjum5775]

Hy sir how can we create dashboard like online study database and how can we access this dashboard? Can u tell me in details?

[@amirnaimzada3049]

what if we have 2 ? how do u specify it??

[@PamelaMarizGSulit]

Hi what's your text editor?

[@arnabgoswami8919]

Which software are you using for coding?

[@grayson3274]

What's the name of the app you're using?

[@bluebell3304]

Sir May i know how to change the font-color

[@katlosenkang7907]

How do I make a paragraph appear only on the left Not using text align

[@mahir_360]

how do u change to a different font if u had more than one title. So each title has a different font

[@rwapasta]

How do I open a css format in word on ipad? I needs help

[@alishakhurana8893]

I am having an issue, letter-spacing is not working for chrome as well as Microsoft edge.

[@seeranimate4363]

Helped me 100% u got a sub from me

[@seeranimate4363]

And a like

[@arjunm.r8641]

is there any css property to covert normal text box into password format?. I need all your help,if you know its answer don't hesistate to give reply?

[@al-aminhossain6824]

Is any kind of website or software exist where I can learn typing and codding together?

[@Hamzawilayat]

free code camp could help you

[@MazenBaddad]

BTW guys hexadecimal value is RGB let's say i have 0xFFA134 on hex or #FFA134 FF = red A1 = green 34 = blue so color:#FFA134 ; is the same as color: rgb(255,161,52); that's why the biggest number you can pass on RGB value is 255 or FF

[@lekhrajkasotiya9360]

from india

[@p_rker8649]

For so many years i thought something wrong was with me that, I ACTUALLY DIDN'T KNOW WHAT CSS MEANT (If i understand CSS is a style code!)

[@sharphd9122]

p_rker wtf man that’s the first thing u need to learn

[@p_rker8649]

@@sharphd9122 xd ik

[@danielstewart8095]

Kan du måske hjælpe lidt med et login system? ved godt du har lavet en video... har fulgt den og det virkede ikke rigtigt... jeg har prøvet alt muligt... mine oplysninger vil ikke gå ind til min database...

[@maryahwyatt6564]

Does anyone else's file save as /* style.css ???

[@PS-cf9lc]

What if i want to have multiple different fonts on links in one page

[@BobbyBundlez]

look up how to use tags. he talks about them in the previous video

[@shrinalpatel7868]

so my html has lots of h1-2-3 and li and dt - dd. i need to the background color and change all the font without including headers how do I do that ? also I'M using brackets in apple mac. thank you in advance

[@faicthegamer1362]

Yes,i am having the same problem please help.

[@FinAnime1]

Please provide the link to download the editor you are using.

[@mdazim4061]

www.google.com/search?sxsrf=ALeKk03LtesQdpj9044WFK_p41TuIDvMLw%3A1599644656384&ei=8KNYX_LxFtvgz7sP0daLuAs&q=atom&oq=atom&gs_lcp=CgZwc3ktYWIQAzIHCAAQsQMQQzIECAAQQzIECAAQQzIECAAQQzIICAAQkQIQiwMyCAgAEJECEIsDMgcIABCxAxBDMgQIABBDMgIIADIFCAAQiwM6BAgAEEc6BAgjECc6BAguEEM6BQgAELEDOgUIABCRAjoICC4QsQMQgwE6BwgAEBQQhwI6BQguELEDOgoILhDHARCjAhBDUOG7DVjvwg1gyYgOaABwA3gAgAGLAogBvweSAQMyLTSYAQCgAQGqAQdnd3Mtd2l6uAEDwAEB&sclient=psy-ab&ved=0ahUKEwjyqYrc5NvrAhVb8HMBHVHrArcQ4dUDCA0&uact=5

[@gammacreeper1234]

Can you pls pls pls tell me The Name of the Editor that you use? We are going to write a classtest in HTML/CSS. So pls tell me :)

[@shesoldmychicken7241]

atom

[@DavidNasr]

i am using photoshop to get the color codes

[@HumbleFishStix]

How do you change the color of individual lines of text within a paragraph?

[@Dani_Krossing]

[@davidlourenco4662]

Atom for HTML and which program do you use for CSS

[@Dani_Krossing]

I use Atom for everything web related.

[@theredpill7897]

couldn't you just do .index-h1 { color: #ff0066; font-family: cooper black, arial, "times new roman", sans-serif; font-size: 90px; font-style: normal; font-weight: 100; text-align: center; } in style.css? Thanks!!

[@TechnicalDhruva]

Better teach hear radar than going to IIT for 7 hours a day

[@lourdthebluefoxie]

Y is no working? It did not work in the phone it did not look like cersive, what did i do wrong?

[@Sportslive683]

How can i type text in 2 different colors. Please help me. Thanks

[@armenian9922]

you should add different classes for each p

[@kalyan_kama]

Why don't you start videos on javascript and python also

[@ZuElVenado]

Yo i was freaked out because my text was WAY too separated when using the text-height, then i noticed i didnt put the "px" on the number, so note to everyone including me, remember to write 20px, instead of 20.

[@bunnybunsartscrafts2834]

I need help TwT In my Dreamweaver it says " 'style.css' is not on the loacl disk. " please idk how to put it and i want to script on style.css :(

[@veljko100able]

style.css needs to be in the same directory as index.html. Otherwise you will need to specify full directory address.