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

today we're gonna learn up style text inside a website and the reason I want to do this today is because for the past couple episodes we talked about how to use CSS inside the website so since most websites have a lot of text inside of it it's very important that we know exactly how to change the text to make it look exactly the way 1 or 2 inside our website basically we're going to do today is I'm going to show you guys some examples of stylings the views inside text in order to change the look of the text so as you guys can see inside my index file I have nothing going on inside the file here except for the basic setup that we need to have in order to have a basic website inside my stylesheet I deleted everything including the reset styling to make sure we only have our code inside the stylesheet so what I'm going to do inside my index file is I'm going to go ahead and create a ate tag I'm going to create a h1 tag and inside the h1 tag I'm going to say this is a typo because we need to have some text inside the website and all taxi change it now underneath the h1 tag I'm going to write a paragraph tag I'm going to say this is a paragraph just so we have some text going on inside the paragraph now we haven't talked about links yet and I'm not going to get too much into links today because I want to have a separate episode on it but just to have a link inside this example here because the link does actually have some default styling to it I'm going to go and create a link now a link we create the same way as we do with paragraphs except for we add a attribute inside the opening tag called href which stands for Hyper reference and then for today's purpose we're just gonna set the value of this hyper reference to hash tag so inside the link I'm going to say this is a link so now we should have some different text going on inside the website so if I were to go inside my browser refresh you guys can see we have a title a paragraph and a link that we can't actually click on because it does absolutely nothing inside the website so now what I want to do is I want to go inside my stylesheet and I want to start styling these elements here so what I'm going to do to start with is I'm going to target the h1 tag inside the website or at least all the h1 tags they might have inside the website and we do that by saying h1 space the brackets and then inside the curly brackets we can add the styling that we want to apply to the h1 tags now when it comes to styling text inside a website we have different properties that we can use inside the curly brackets no text get some sort of styling going on inside the website now to begin with I'm going to show you some properties that has font - something inside of its name in order to focus on these ones first so the first one is going to be called font - family and this one is going to be the one that decides which font you want to use inside the website so if we were to say Ariel close it off here and refresh my browser you guys consider my title here is going to change into Arial and now you guys can see we're using a different font inside the title then we do down in the paragraph and inside the link now the link and the paragraph down here has the default styling that the browser is going to give it so unless we actually write something specific inside our style sheet the browser is going to apply default styling to our elements so right now we applied Arial but what if we're using a browser that does not have Arial as a font programmed into the browser what we can do is we can go inside our fun family we can say comma space then we can add another font in here by adding another font we basically tell the browser that if you do not have the first one which is Ariel then you should jump to the next one and see if you have that font instead so right here we could actually say Times New Roman and one thing I want to point out here since we're using multiple words inside the font family here since Times New Roman has three words in it we need to use double quotes around it so we need to do it like this now as you guys can see I did actually write time - Roman in capitalized letters as well you could also do that with Ariel but as you guys could see inside the web site it doesn't really matter if you use it with Kevin's last letters or non capitalized now the next one we're going to focus on is the font size so I'm going to say fonts - size we're going to set this one equal to something like 22 pixels now we do have different measurements when it comes to the font size and if you guys are interested in seeing some two other different measurements we can use I'm going to leave a link in the description so you guys can check them out so were to save this go inside my browser refresh you guys considered the Fantine sighs now the next one is called font - style and the font style basically allow for us to make the text italic normal oblique just like it says some SAP metal - here so if I were to choose italic save it go inside my browser refresh you guys can see we get a italic text style now the next tiling is going to be something called font weight and right now if we were to go inside the browser you may notice that the paragraph has a much thinner text compared to the header tag up here so the header tag has very thick letters and what we can do is we can actually go and set our styling save font - weight and change it to something between a hundred to nine hundred so we can actually say 100 without anything behind it go inside the browser refresh and now you guys can see we get a different thickness of the letters in here now the next tilings we're gonna move into other ones that doesn't start with fun tests but instead text - so underneath here we're going to say we have something called text align and what this one does is that allow force to align the text to either the left the center the right all could justify it so what I can do is I can say right and if I were to save it go inside my browser refresh you guys will notice that the text goes to the right side of the screen we can also go and center it and as you guys may guess it goes to the center of the screen now we have something called justify if I were to use it I'm sorry guys you guys can see that nothing happens to the text but if it were to have to text inside a box of some sort inside the website it would actually stretch the text to make sure that we have the equal amount of spacing in between each letter for the entire line to cover the entire width that the box is inside of sort of like when you read a newspaper so I'm just going to change this one back to left since we don't want to have this inside the website and the next one on one Oh sir gasps is text decoration now right now for were to actually write this inside my stylesheet here you guys will notice that if I were to set this one to none to make sure we don't have any text-decoration nothing happens inside the browser when i refresh and that's because right now the text doesn't actually have any kind of decoration applied to it but as you guys can see the link down here does actually have an underline underneath it if we were to go back inside my stylesheet instead we want to style all the links inside the website and set text decoration to none you guys can see that we do actually not have a underline anymore underneath the link in here we could also go inside our text decoration up here and say they want to have a line through over line underline if you wanted to which basically just applies one of these stylings to the text so if I were to say underline save it go inside my browser you guys consider we now have an underline underneath the header in here now the next one I want to sir gasps is something called text indent so were to say text - indent what we can do here is if we were to have a huge chunk of text inside my website you guys may have seen inside some web sites or inside newspapers when you have a huge chunk of text then the first line inside the paragraph is going to be moved out slightly so this is basically what we're doing here so if we were to say we want to have 30 pixels as a text indent if we were to go inside the browser because this line here's the first line insert this header tag it's going to move out the text 30 pixels okay if you had a huge chunk of text that would go on multiple lines then it would only be the first line that gets moved out 30 pixels now the next one I'm gonna look at is the one called text transform so we're going to say text - transform and this is the one I usually use if I want to capitalize the entire header or the entire paragraph or if I want it all to be lowercase over were to say capitalize save it then you guys can see that every word inside the header here has been capitalized we can also capitalized everything by saying uppercase instead so we can say uppercase go back inside the browser refresh and now everything has been capitalized and this of course goes with lowercase as well if you want to do that save it refresh the browser and now everything has been lower cased even though inside my index file I did actually uppercase the first letter inside the so now we talked a bit about the ones that has text - something in front of it let's go and talk about some of the ones that don't have anything in front of it but just has a property name that doesn't start with anything so what to change to color up the text we actually talked about this one a couple episodes ago I can say color and set this want to read for example refresh the browser and as you guys can see now the head of turned red now of course we can't really say red when it comes to tints and the color of different elements so what we can do is we can use something called a hex color or RGB colors so if we were to go inside the color and change the to hash tag and then write the hex color code for some sort of red color I could say ff0000 and as you guys can see we do actually have six different letters or numbers inside the hex color code in order for to have some kind of value that actually counts now if you do actually use something like a black color which is just zero zero zero six times then we can use just three of them and it will still count as black but you can only do this if the color code has the same number or letter inside of it all the way through so if we were to save this and go inside my browser so you guys can see that we still have red inside the browser because this color code here is red now I can actually go ahead and use something called the Adobe color wheel I will leave a link in the description in case you guys want to get the color code for someone different colors that in my own time inside the website and as you guys can see with this tool here can actually go and adjust some of these colors inside my browser so I can actually say we want to have monochromatic or complimentary colors which means that we have opposites so I'm go ahead and say if I want to have something like this blue down here I can actually get the RGB or the hex color code for it and just simply copy it and paste it inside my code and then we have a new color going on inside the browser and the color wheel here is absolutely free you don't have to pay anything inside Adobe's website to get it is just colored dot a TOCOM if you want to use it otherwise I usually use Photoshop or illustrator which is Adobe programs in order to get the correct hex code that I want to use inside the website so this is how we can use hex colors but if I want to use RGB colors we can also go ahead and use that inside the stylesheet here so I can say parentheses and then I just need to add three different values inside the parentheses and again we can use the Adobe color wheel in order to get the color so let's say I want to have this yellow down here which is 255 244 and 96 so we can say 255 , 244 comma 96 if that was correct I go inside my browser refresh and as you guys can see we now get a yellow color now you might be asking once you've used hex colors versus RGB colors inside our website now personally I only use RGB colors if I want the text to be transparent or if I want a background color to be transparent because when it comes to RGB colors we can actually go ahead and add a fourth value inside the parentheses which is going to be the Alpha value now the Alpha value we can set to something between 0 and 1 depending on how transparent we want the background color to be so I could actually go ahead and say we don't have our TP but we have RGB a and then I can insert a fourth parameter which is going to be something like 0.5 and I do want you guys to notice that that exit seems to text to blue just to illustrate this better than the yellow color we had before and if we were to refresh the browser became slightly transparent so I usually use hex colors unless I want to make something transparent then I do actually use our TP a colors now before we continue I would like to actually make this an entire blue color just so we can see what's going on so I'm just going to say 1 and as you guys can see it's not transparent anymore and the next one we're going to focus on is the one called letter spacing so we're gonna say letter - spacing and then we're gonna set this one to some kind of value and again we can set this one to different types of values I'm just going to focus on pixels here so I can set this one to maybe 10 pixels if I were to go back inside my browser refresh you guys consider we change the letter spacing to make sure that's at least 10 pixels of space in between each letter inside this sentence here we can also go back and change the to a minus so we can say minus 10 which might look slightly weird but as you guys can see we now have a minus spacing in between the letters this also takes me to the point that you can also write instead of letter spacing we can say word spacing so what changed it went back to 10 refresh the browser you guys can see that each word has a spacing of 10 pixels in between them now the last one I'm gonna sir guys this one that I use all the time inside my own websites because it's very important that used to styling inside your text otherwise the text might not look as pretty as it could be which is the one called line height so if we were to say line des height we can actually just hide in between the lines inside a paragraph so just to show you guys an actual paragraph that doesn't just have this is a paragraph inside of it because we need more text I'm going to go inside lip zoom calm and I'm going to generate some random gibberish text that I can actually use for this example I'm gonna copy it paste it inside my paragraph here and by the way if you're using atom and you see that this is going way beyond the view here you can actually go and change this but go inside view and say toggle soft wrap and then you guys can see it doesn't go beyond what we can actually see inside the editor if it were to save it go and set my browser refresh you guys can see that way more text inside the browser here so I can go back inside my stylesheet and set the line height to something like 40 pixels and again you can change the different values you don't have to use pixels but in this case I'm going to be using pixels since my font size also takes those as well so if we were to go inside my browser refresh whoops um I do actually need to style the paragraph not the header tag so I'm going to say we have a paragraph and say we want to change the line height to 40 pixels and the font size to 20 to pixels just to make sure we have something inside the website now you guys can see we have larger text that also has a lot of spacing in between the lines you avoid you change the line height to something like 20 to refresh the browser you guys can see changes to line height and does a huge difference to the readability via text when you use line height so you probably shouldn't be using 22 for a 22 font size some quantities just want to maybe 30 like so much better and now just to show gasa did actually include the text indent inside the paragraph just to show Casta we could actually indent the first line inside the paragraph so this is how we can style text inside a website now we haven't talked about how to import new fonts inside your website because right now like I said some process do not have all fonts inside of them and if you want to use the special fonts that you can't really find on a standard computer then you need to import a font into your website in order to actually use it we're going to talk about that in the next episode so I hope you guys enjoyed and I'll see you guys next time

Channel: Dani Krossing

Views: 304,766

Keywords: learn to style text, learn to style text using css, css text styling tutorial, text styling lesson using css, text styling tutorial using css, text styling using css, using css to style text, how to style text using css, how to style text with css, style text with css, style text using css, text style using css3, style paragraphs using css, change text using css, html, using css to change text, html tutorial, css tutorial, style headers with css, style headers using css, css

Id: azZCW24XtT4

Length: 16min 1sec (961 seconds)

Published: Thu Sep 14 2017