Hello and welcome once again.
So far we have covered different ways of fighting CSS assess different selectors as well as class and I.D. and with all that we can now select any element to apply different style properties.
So let us now take a look at different census properties to apply different styles to the HTML elements and these properties can be grouped into text properties color properties background properties and so on.
And in this lesson I’m going to start with text properties to make changes to the text on the web page.
And these are the different properties that I’m going to cover so let’s get started and begin with the font-size property value we already have quite an idea about this property as I’ve used it earlier as well.
So as the name suggests we can use the phone-sized property to control the size of the text on the screen.
Now while I’m explaining these different properties let’s actually use them in the same as well and play with different values to get a better idea.
So here’s our Caesars file and for practice let’s try on this b element and apply and see these different styles.
And it’s the element type selector that I’m using.
And let’s first remove the existing properties also let me tell you that by default the browsers have predefined properties for different elements like the default font size is 16 pixels so in the
absence of any font-size property defined the browser will be applying the default size which is 16 pixels and
when I add the phone size property with let’s say 20 pixels have the value then now the browser will apply the font size of twenty pixels.
So I save and refresh the font size has now increased from 16 pixels to 20 pixels.
Now if I change the value to let’s say toady pixels and then see it again on the Web page it has now become even bigger.
So using the font size is simple. Next, we have the text the line property,
and using this property we can modify the text alignment to center-left or right and the default value is left.
So if I had the text the line property and set it to center then the text now becomes aligned to the center of the page.
Likewise, if I change the value to write then this now shifts that text to the right next we have the text declaration, and this property is commonly used for underlining or overlaying the text by default.
This value set to None which means no underline or overlying.
And if I add the text-decoration property and set it to underline then this will add an underline to the text if I change it to over line and
the line goes on the top and we can add a couple of more values as well in fact to this text-decoration the property we can pass three different types of values and they are optional.
First is the text-decoration value which could be underlined over line or line through then we can add the color of the line which could be any color and as the third value we can add the line style.
That could be solid double dotted etc. and these initial and inherited properties are available for all the properties including the font size.
This option initially means the default browser style and setting the value as initial will follow the initial on original browser setting whereas this option inherits means that it will inherit the style of the parent element.
So if the parent element has text declarations set to underline then this will also apply the same underline value menu selecting inherit as the value.
So let’s now try these different options.
And currently I have specified the text declaration as underline.
But let’s try other values as well.
I press space and then let’s add the color say blue then again space and then let’s add the line style as solid and the text now has a solid blue underline.
If I change this line style to let’s say Doe did then it will become my dotted line likewise I can make it doubles or dashes and so on.
And then I can also replace the underline option with the Overland and then see it again this time it is over the line.
And in case you want both underline and overline then you can add both underlying and overlying as well.
This will add the lines both under and over the text.
And in the same manner, you can also add a line through and now we have all of them.
Let me change it back to underline only to keep it simple.
Now it’s important to note that the current version of Internet Explorer or Edge does not support the line color or line style property and therefore this will not work on Internet Explorer or edge but will work on Chrome Mozilla and other browsers.
Having said that if we leave this up till here only without the color or line style then it will work fine on explorer or edge.
Next we have the text-transform option that lets us change the text to uppercase lowercase or capitalize.
So if I had the text-transform option and set it to let’s say uppercase to Texas now transform to uppercase.
Likewise, the lowercase option converts the text into lowercase
and the third option that is capitalized makes the first letter of each word in uppercase so these are the three options we get.
And you can also select a value as none which anyways is the default value.
Even when you don’t add the text-transform property and the other two values we get are the same which is initial and inherit.
After this we have the text in the property which is evident from its name provides indentation and just like the font size we can provide the land like if I mentioned 20 pixels and save it and then refresh and the text shifts 20 pixels to the right.
Currently, we have set the text line property to write so it’s not visible but if I change it back to left and then see it now we can see that the text is not completely on the left.
It has shifted 20 pixels to the right.
If I make it more let’s say 50 pixels then it shifts even further.
Also, we can provide negative values like a value of negative 50 pixels will shift the text 50 pixels to the left after this, we have the letter-spacing property that lets us specify the space between characters in the text.
So if I add letters space property and set it to let’s say 5 pixels then this will add 5 pixels of spacing between the characters.
So if I save and then refresh and there is now more space between these characters and just like the text and then the property you can provide negative values as well.
And the negative values will reduce the spacing.
So if I change the value to negative 5 pixels and you can see that this time the space between the characters has reduced so you can use the negative values when you think there’s more space.
And this might sometimes be the case with some font styles having more default spaces.
But for now let me change it back to five pixels now after the letter spacing.
Another similar property we get is the word spacing while the letter-spacing option modifies the space between characters.
The word-spacing property modifies the space between the words so fire the word spacing property and sell it to let’s say 20 pixels and then save it.
Now when I rephrase the page the space between the two words will increase to 20 pixels slightly fresh.
And there we go.
And we can add negative values as well which will reduce the space.
You can also use initial and inherit values as well as move on.
Let’s now talk about the line-height property and this property is also about space.
But this time between two lines.
So if I had the line-height property and set the value to let’s say 50 pixels then the vertical space will increase between the lines to 50 pixels so I save and then refresh.
Now the space between these lines of text has now increased.
Now apart from the land and pixels we can also provide other values like just a number without any pixels mentioned.
And what happens, in this case, is that the CSS multiplies this number with the font size.
So currently our phone size is 30 pixels.
So it will multiply this value for 30.
Let’s see how it looks.
I save and then refresh.
And clearly space has increased a lot.
Cause 25 multiplied by 30 is a big number.
Sweating just a number without any pixels generally adds a lot of space as it gets multiplied by the font size.
So let me change it back to fifty pixels Additionally you can use initial and inherit options as well.
And the default value for this one is normal.
So if I change it to normal then space will be as much as we saw by default.
Next, we have to phone paid property for specifying the thickness of the decks too bold or bolder or even lighter.
So these are the values we get setting the value to normal gifts that text the original or default fund rate the later value makes the character lighter whereas the bold value makes the text bold.
If you want the text to be even bolder than you can die bolder as the value.
Alternatively, you can also provide a number on a scale of hundred and nine hundred but those would be a hundred two hundred three hundred and so on.
And lastly, we also get initial and inherit options so let’s try this property as well with different values.
I go back to the document and then add the phone made property and set the value to bold I save and refresh.
The text has now become bold and if I change the value to Boulder and check again then this time the text becomes even bolder.
Next let’s make this value lighter and then see again and this time the text is not bold.
It’s much lighter.
And lastly, let’s try a number, and let’s try six hundred as the value I check again and the text has now gone bold let’s now move on to the next property which is text-shadow.
This one can be used to add some shadow effects on the text and change its feel on the Web site.
And for the value we can add a couple of parameters.
So let’s take a look.
First we can add the value for the H shadow which means the horizontal shadow.
And we can provide negative values as well.
Then we can add space and add the second value for the vertical shadow.
And this also allows negative values.
Then comes the blow radius to specify how much blurry the text should appear.
And this is an optional parameter which means we can skip this as well and the default value is zero.
But we can add it if we want to change this value of zero.
However the horizontal and vertical shadows are not optional.
Then the next one is also optional which is the color.
And here you can specify the shadow color.
So let’s try it out on the document.
I add the text-shadow property and then let’s add the first value for the shadow and let me make it five pixels in space and then add the vertical shadow.
And let’s make it 10 pixels.
I’m just adding random values now to this point.
It will still work because the rest two values are optional.
So if I save and then refresh the browser then it looks like this.
So the vertical shadows here and the horizontal shadow is here.
And as we specify the vertical shadow is more let us make the value slightly less to two pixels for example and then I check again.
Now the shadow is not that deep but it’s very sharp because we didn’t blur it and therefore it doesn’t really look like a shadow.
So let’s try the total value for the blow radius.
So I had space and then type let’s say five pixels for blur radius I say again and then reload and this time the shadow actually looks like a shadow which is a bit blurred.
And lastly let me add the fourth value which is color and let me try the colors.
Let’s say yellow and now slave again and then refresh.
And now we have the color as well.
It works fine.
Our text now looks more elegant now after this.
We have to color property that we have already seen before and this changes the text color.
So it’s simple I can add color and let’s add red for color and this will change the text from color to red.
There are other types of color values as well that I’m going to talk about in the next lesson.
Besides, we also get the initial and the inherent values as the option the word-wrap comes into play when there is a long text on the page like this one.
So this tax breaks into a new line so that it doesn’t go out of the visible area which is within the boundaries of the browser.
And as a result the user doesn’t have to scroll to read the entire text but if you want to even decide whether there should be a word map or not then you can try the next property which is whitespace.
So this property lets you control the whitespace in the text.
Let me show you how.
So I add the whitespace property and the first value we get is normally this one allows the text to break as normal or in other words the verge works with this one.
The second option we get is the No wrap option that disables the word trap option other than this.
We have to pre option the option shows that text exactly as we have typed in the HTML.
Now the word trap doesn’t work.
Let’s go to the HTML undocumented and then here we can see that we have not broken any word to the next
line but it’s a continuous piece of text and a preview option shows the text as it is on the HTML.
Now if I break the line from here here and here and then see it on the website then the line breaks as it is in the HTML.
It’s similar to the pre element that I talked about in the earlier lessons.
Next we have to play wrap option.
This one is a combination of pre and wrap.
That means that it will read the text but it will also preserve the line breaks and extra spaces as we have represented in the HTML.
So let me go back to the steam and document and let’s change it back to the continuous text for demonstrating purpose and let’s add some extra spaces here.
Now I see him again and sees on the website now it allows wardrobe and at the same time preserves extra spaces that we provided inside the HTML so these are the different properties we get and
CSS and I would recommend you to try these different properties with different values on some piece of text in the next lesson.
Also, Read –