Text styles – Basic CSS3 Fast

Text styles – Basic CSS3 Fast


Hi everybody, welcome to the CSS3 course.
In this video, I’m going to discuss some of the ways to set up the text on
your web page. So before I do the demonstration, I would like to show the
web page on the right-hand side, and together with the HTML file
corresponding to this web page. So I just set up some headings. And I also set
up some paragraphs. And I’m going to demonstrate the text set up for the web
pages by using these three paragraphs, okay So let us go to the first paragraph.
There are so many ways to set up our text. So let me demonstrate some of them
to you Okay. When I simply use color attribute, I just need to type the color
to help me change the font color in this way. So the entire paragraph has changed
to blue I’m also able to set up the font size by using the font-size attribute.
And the value here is 1.5 em. So 1.5 em simply means that I’m going to change
the font size to 1.5 times the parent element. So the parent element is simply
the body element. So for my body, generally I will have this font size. So
1.5 em is simply calculated from the font size shown by this amount of size,
okay. In addition to using em, we can also use pixels or rem So we have many other ways to indicate
the size of the fonts We can also set up the font-style. Suppose I want to
change it to italic. I simply use font-style:italic as the attribute-value
pair. So we can see that the font style has changed Okay. I’m also able to
set up the letter spacing. So what does it mean by the letter spacing? We can see
that um two characters are separated by a larger
distance than before, so that the spacing corresponds to the separation between
two characters Okay. I can also set up the line height. So we can see that the
line height has changed to one point five times the font size Okay. So this is the meaning of a
multiple being the value of the line- height attribute, okay. In addition to
using a multiple, we can also use pixels or em as the unit of the value of the
line-height attribute We can also set up the indent of the first line of your
paragraph. So 30 pixels means that I simply put the first line to be 30
pixels away from the left border, okay I’m also able to set up the decoration
of my text. So for example, if I set line- through as the value, I will simply see
line passing through all the characters If I set up other decorations, I will
have another kind of output. If I set underline as the value, the lines
will simply be under the characters Okay, we can also set up the color of the
decoration of the text. So now the underline color has become light gray We can also do the alignment of the
entire paragraph. So we can see that the text are justified. So we can see that the
right border will be having all letters getting close to it. So the justification
here is relative to your viewport. When I just enlarge my browser, I’m able to
see that the justification is also varied according to the viewpot size,
okay I’m also able to transform the text in a number of ways.
One way is to capitalize every single word in my paragraph. So you can see that
every single word has the first character being a capital letter. So that
is the way of the transformation. After introducing the change in the text
appearance, I would like to show you the ways to set up the font of your
paragraphs. So let me go to the second paragraph right here In addition to
setting up the appearances, we can also set up the font. So let me introduce an
important concept of font settings of CSS, which is called web-safe fonts. We
have to notice that the browsers might not be able to support every
single font that you want. As a bottom line, the browser will simply allow us
to have some web-safe fonts, so that some fonts are able to be shown, no matter
how old or how new your web browser is So let me show you one example of the
web-safe fonts Okay, we simply use the font-family attribute to indicate
the font to use. So sans-serif is one of the web-safe fonts. The meaning of web-
safe is that almost all browsers, new or old, are able to support this kind of
font. So when we say sans-serif, we are able to see the font has changed to
another format rather than the original one. In addition to san-serif, we have a
few more web-safe fonts For example, the monospace font is also a kind of
web-safe fonts. So we can be pretty safe to say that every single browser is able
to support this font. If we want to set up some specific fonts rather than those
basic web-safe fonts, it is better to include the web safe fonts a backup
plan for your font display. So how can we do that? We can rely on a font stack,
which is a topic about the third paragraph here So when we want to set up
our own font, we are not really sure whether the browser is able to support
it or not. So in this case, we can simply try our desired font first. And then we
simply put more forms which are safer than the previous ones. So let us try
this example now Okay.
In the value component of the font-family attribute, I have set up
three fonts. So the first one I would like to use is this one, gentium basic. If
gentium basic is not supported by the browser, I would like to show noto sans
as the second font. But if even the noto sans font is not supported by the
browser, at least I’m able to show that monospace font, which is regarded as
a web-safe font. So it is customary for us to provide a web-safe font as
the last resort of the font family. So even the the previous ones fail to be
shown on your browser, we are still able to show your content by using a web-
safe font. So we have to remember the font family in this particular order: the
font you like to show, followed by some safer font that you think a browser
is able to support. So this completes the text set up. We can simply change the
font size, font style, letter spacing, and so on for the text content. And we have
also learned to set up the font family for your text. Most importantly, we can
simply set up our font stack in order to provide some backup plans for your font
that is to be shown on your browser, okay This is the end of the video. If you have
any questions about my video, please leave your questions on the comment
section below the video. If you like this video, please give me a like and please
subscribe to my channel Thank you for watching

Leave a Reply

Your email address will not be published. Required fields are marked *