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

Поділитися
Вставка
  • Опубліковано 9 лис 2024

КОМЕНТАРІ • 148

  • @Dani_Krossing
    @Dani_Krossing  Рік тому +2

    NEW UPDATED 2023 COURSE AVAILABLE! 🙂
    You can find it here: ua-cam.com/video/v8jDnBYc0bs/v-deo.html&ab_channel=DaniKrossing

  • @zakgraham1283
    @zakgraham1283 6 років тому +72

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

  • @someone.8.15
    @someone.8.15 2 роки тому +22

    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
      @bc2536 Рік тому

      thanks champ

  • @rahxephon76
    @rahxephon76 6 років тому +130

    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
      @Dani_Krossing  6 років тому +18

      I will go ahead and pin your comment ;)

    • @raz2763
      @raz2763 5 років тому +4

      Not all heroes wear capes...

    • @alexanderschmidt2543
      @alexanderschmidt2543 5 років тому +1

      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
      @kelvincuevas7699 5 років тому +2

      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
      @pm_shaw 5 років тому

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

  • @Keano9766
    @Keano9766 2 роки тому +1

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

  • @ericisaiahperez5324
    @ericisaiahperez5324 6 років тому +23

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

  • @kiams7811
    @kiams7811 4 роки тому +5

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

  • @brythm5465
    @brythm5465 3 роки тому +1

    This was great!! Thank you!

  • @mrsdhuha
    @mrsdhuha 4 роки тому +1

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

  • @Niko_Dola
    @Niko_Dola 3 роки тому +1

    I love you for doing this tutorial!

  • @taynay75
    @taynay75 6 років тому +2

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

  • @CarolNankinga
    @CarolNankinga 2 роки тому +1

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

  • @miazeng7752
    @miazeng7752 5 років тому +1

    YOU ARE AWESOME!!!!!

  • @Travelised
    @Travelised 4 роки тому +1

    Well explanation thank u

  • @reegliss93
    @reegliss93 6 років тому +5

    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-sx9dx
    @pianoLee-sx9dx 6 років тому +3

    I am really enjoying all of your tutorials!

  • @ismaeldaif4014
    @ismaeldaif4014 4 роки тому +1

    That was very useful thank you so much !

  • @branimirnovakovic6928
    @branimirnovakovic6928 5 років тому +3

    Thank you for making these tutorials, kind sir.

  • @aoogaaoogaaoogaaoogaaoogaaaa
    @aoogaaoogaaoogaaoogaaoogaaaa 3 роки тому +2

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

  • @techexpert2010
    @techexpert2010 6 років тому +4

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

  • @muzzammilowais1347
    @muzzammilowais1347 4 роки тому +1

    I am following your series, incredible stuff!

  • @davescorneroftheworld1147
    @davescorneroftheworld1147 5 років тому +1

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

  • @kavyarayidi1839
    @kavyarayidi1839 4 роки тому

    you are the best teacher ever

  • @umajitendra2213
    @umajitendra2213 4 роки тому

    your voice is very good. Way of teaching is awesome

  • @dllm3tommy741
    @dllm3tommy741 Рік тому

    Thanks for the video

  • @argenisaguilar9045
    @argenisaguilar9045 3 роки тому

    Great..thaks so much...👍

  • @moenesma9415
    @moenesma9415 4 роки тому +1

    Thanks for this good Turtorial

  • @TCTFounder
    @TCTFounder 4 роки тому +2

    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!

  • @ioannisme7495
    @ioannisme7495 5 років тому +1

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

  • @inspirationalworld5610
    @inspirationalworld5610 5 років тому

    Brilliant job

  • @salemxd4563
    @salemxd4563 3 роки тому

    this is a very clean lesson thanks

  • @Beast80001
    @Beast80001 5 років тому +1

    Thanks, this is exacly what i needed!

  • @theblackelephant
    @theblackelephant 3 роки тому

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

  • @johnmichaellagrana6158
    @johnmichaellagrana6158 4 роки тому

    Thank you!

  • @JohnKelvin098
    @JohnKelvin098 6 років тому +1

    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.

  • @akash5251
    @akash5251 2 роки тому

    Love and respect from India 🇮🇳🇮🇳

  • @yasirjune69
    @yasirjune69 5 років тому +1

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

  • @jaimepalomera1967
    @jaimepalomera1967 6 років тому +2

    thank you so much! this definitely helped a lot

  • @MilanB
    @MilanB 7 років тому +15

    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
      @Dani_Krossing  7 років тому +5

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

    • @jamesbrandon8582
      @jamesbrandon8582 5 років тому +1

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

    • @nvlel
      @nvlel 3 роки тому +1

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

  • @aaryanthakur8952
    @aaryanthakur8952 3 роки тому

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

  • @thestarr5844
    @thestarr5844 Рік тому

    thank you

  • @alifiaputri9455
    @alifiaputri9455 3 роки тому

    thanks !!

  • @ahnafbataineh8319
    @ahnafbataineh8319 5 років тому +1

    ty for video what the program the u used

  • @SanDex-V-Felix
    @SanDex-V-Felix 4 роки тому

    Wow ur are amazing .. thank u 💕💕

  • @stefanenyedi1900
    @stefanenyedi1900 7 років тому +1

    good job, bro!

  • @split3278
    @split3278 5 років тому

    thank you this is very helpful

  • @mohanadalhiti9168
    @mohanadalhiti9168 5 років тому

    Thank you for this

  • @darlenelopez5632
    @darlenelopez5632 6 років тому

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

  • @zakariehaji
    @zakariehaji 5 років тому

    I would love to have you as a teacher

  • @someshsharma708
    @someshsharma708 5 років тому

    thank you so much sir

  • @ishaqkhan4508
    @ishaqkhan4508 5 років тому

    brilliant

  • @progress2171
    @progress2171 7 років тому +1

    Thank you for that!!!!!!

  • @JalalKhan-br3ld
    @JalalKhan-br3ld 5 років тому +1

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

  • @Esra-mm6yk
    @Esra-mm6yk 6 років тому

    Thanks

  • @apporvaarya
    @apporvaarya 6 років тому

    nice tutorial Sir :)

  • @grayson3274
    @grayson3274 5 років тому +2

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

  • @aci25tv
    @aci25tv 6 років тому +1

    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
      @Dani_Krossing  6 років тому

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

  • @MazenBaddad
    @MazenBaddad 5 років тому

    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

  • @tamimabdullah4638
    @tamimabdullah4638 4 роки тому

    14:00
    Thanks man

  • @p_rker8649
    @p_rker8649 5 років тому +1

    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
      @sharphd9122 4 роки тому

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

    • @p_rker8649
      @p_rker8649 4 роки тому

      @@sharphd9122 xd ik

  • @arnabgoswami8919
    @arnabgoswami8919 3 роки тому

    Which software are you using for coding?

  • @rabinpd3175
    @rabinpd3175 7 років тому +2

    Notification squad☝☝

  • @mjelumba2545
    @mjelumba2545 6 років тому +1

    Can i ask, what tool do you used ?

  • @buntoeunsoun6262
    @buntoeunsoun6262 7 років тому +1

    I like it

  • @vangelova7443
    @vangelova7443 6 років тому

    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!

  • @PamelaMarizGSulit
    @PamelaMarizGSulit 3 роки тому

    Hi what's your text editor?

  • @kenditchy
    @kenditchy 4 роки тому

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

  • @lekhrajkasotiya9360
    @lekhrajkasotiya9360 3 роки тому

    from india

  • @Live4Life110
    @Live4Life110 3 роки тому

    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
    @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?

  • @bluebell3304
    @bluebell3304 3 роки тому

    Sir May i know how to change the font-color

  • @TechnicalDhruva
    @TechnicalDhruva 5 років тому +1

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

  • @seeranimate4363
    @seeranimate4363 3 роки тому +1

    Helped me 100% u got a sub from me

  • @HexBeatz
    @HexBeatz 5 років тому +1

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

  • @entertainme6146
    @entertainme6146 7 років тому

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

  • @al-aminhossain6824
    @al-aminhossain6824 7 років тому +1

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

    • @Hamzawilayat
      @Hamzawilayat 6 років тому

      free code camp could help you

  • @amirnaimzada3049
    @amirnaimzada3049 3 роки тому

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

  • @FinAnime1
    @FinAnime1 4 роки тому

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

    • @mdazim4061
      @mdazim4061 4 роки тому

      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

  • @katlosenkang7907
    @katlosenkang7907 3 роки тому

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

  • @netherisinyt
    @netherisinyt 3 місяці тому

    how to code a text with a different font next to the heading?

  • @kalyan_kama
    @kalyan_kama Рік тому

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

  • @manshitayadav5095
    @manshitayadav5095 4 роки тому

    H1 is not a title it is a heading

  • @gammacreeper1234
    @gammacreeper1234 5 років тому

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

  • @alishakhurana8893
    @alishakhurana8893 3 роки тому

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

  • @davidlourenco4662
    @davidlourenco4662 5 років тому

    Atom for HTML and which program do you use for CSS

    • @Dani_Krossing
      @Dani_Krossing  5 років тому

      I use Atom for everything web related.

  • @Sportslive683
    @Sportslive683 3 роки тому

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

    • @armenian9922
      @armenian9922 2 роки тому

      you should add different classes for each p

  • @HumbleFishStix
    @HumbleFishStix 5 років тому

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

  • @mahir_360
    @mahir_360 3 роки тому

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

  • @rwapasta
    @rwapasta 4 роки тому

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

  • @ZuElVenado
    @ZuElVenado 3 роки тому

    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.

  • @PS-cf9lc
    @PS-cf9lc 5 років тому +1

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

    • @BobbyBundlez
      @BobbyBundlez 5 років тому

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

  • @arjunm.r8641
    @arjunm.r8641 4 роки тому

    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?

  • @theredpill7897
    @theredpill7897 4 роки тому

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

  • @MaximumBloop
    @MaximumBloop 2 роки тому

    I tried this and font-weight, font-size, and color did absolutely nothing

  • @bigmancozmo
    @bigmancozmo 4 роки тому

    When I do the CSS linking correctly, why won't it link the HTML and CSS?

    • @TCTFounder
      @TCTFounder 4 роки тому

      Make sure the html and the css saved pages are in the same directory/folder.

  • @maryahwyatt6564
    @maryahwyatt6564 5 років тому +1

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

  • @DavidNasr
    @DavidNasr 6 років тому

    i am using photoshop to get the color codes

  • @shrinalpatel7868
    @shrinalpatel7868 5 років тому

    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

  • @abdulkahar4431
    @abdulkahar4431 3 роки тому

    i recomend online color picker for you guys who want to see code od the color and alsow rgb color

  • @MixedBeauT
    @MixedBeauT 5 років тому

    what app is this to write the code?