Styling with CSS - Part 5 - CSS Text Video Lecture - IT & Software

welcome to the w3schools CSS text
tutorial you can use CSS to format text
in many different ways
let's go through the most common ways to
format text first how to set text color
you can set the color of the text with
the color property in CSS a color is
usually specified by either a hex value
like we said for this header or an RGB
value like we set for this paragraph or
a color name like we set for the body
element by setting the color for the
body element we set the default color of
the page so if we remove the styles for
the other elements all elements will
have the default color reset for body
let's try changing it now all the
elements are blue let's try to set the
text alignment you can set the
horizontal alignment of a text using the
text align property text can be centered
like this h1 element with the text
aligned properly set to center or left
or right aligned like this date let's
try changing it from right to left or
the text aligned property can be set to
justify when text aligned is set to
justify each line is stretched so that
each line has equal width and the left
and right margins are straight like in
magazines or newspaper
let's try resizing the browser window
now the size of the space between words
are changing as the browser is trying to
keep the same width for all the lines
you can set or remove decoration from
text using the text decoration property
this is mostly used to remove underlines
from links for design purposes see this
is a normal link and when we set text
declaration none the line underneath it
disappears but the link still works you
can also be used to decorate text let's
try to decorate h1 element
see see here is a normal h1 element
let's try adding line through now the
text has a line through or we can add an
over line
now insert a line over the text or an
underline in general it's not a good
idea to add underlines text that is not
links as it might confuse users the text
transform property can be used to
transform text you can turn everything
into uppercase or lowercase letters or
capitalize the first letter of each word
these P elements all have the same text
in third style differently the first one
has text transform uppercase so the text
is shown in all uppercase letters the
second one has text transform lowercase
so the text is shown in all lowercase
letters the last one has text transform
capitalized so the first letter of each
word is capitalized let's remove the
style from this paragraph and see what
happens
see the text is the same as it was
originally now text indentation you can
use the text indent property to specify
the indentation of the first line of a
text see the first line in this text has
been given more space or been indented
you can change the text in that property
to change the indentation you see that's
just the first line that's indented
let's see how we can specify the space
between characters we use the letter
spacing property to set the space
between characters this heading as the
letter spacing 3 pixels which means
there are three pixels more than usual
between the characters let's try to give
it some more space now this heading is
the letter spacing of minus three pixels
which means there are three pixels less
than usual between characters if we set
it to minus ten the characters will
overlap
on the w3schools tutorial page there are
more examples and we list on the CSS
text properties there's a link for each
property it goes to our CSS reference
where I can find information for any CSS
property that this concludes our
tutorial for CSS text thank you for
watching