Outline styles – Basic CSS3 Fast

Outline styles – Basic CSS3 Fast


Hi everybody, welcome to the CSS3 course.
In this video, I’m going to talk about the settings of outlines. So before I
discuss this issue, I would like to show you my web page on the right hand side
and the HTML file that corresponds to this web page. So on the HTML file, I just
have a heading. And after the heading, I have two paragraphs. And the first
paragraph has an ID called ID1. And the second one has no ID. So let me go to
the CSS file. So what is an outline? An outline is something placed outside the
element. So it is very different from a similar concept called borders. And we
are going to discuss the difference between the border and the outline in
the course of our discussion. And the first important distinction is that
individual outlines are not allowed to be set up. So an outline is simply
regarded as an entity rather than four lines surrounding an element joined
together. So how about setting an outline? Let me show you a way. So I would like to
put an outline on the first paragraph Okay. You can see that the outline is
shown on the first paragraph with ID called ID1. An outline seems to be
quite similar to a border. But we will see the differences later. And another
difference between an outline and the border is that an outline does not count
to the element size. So what does it mean by this idea? So let me give the width of
the outline Okay. When you see the outline right now,
you’re able to see that the width is quite thick as compared to the paragraph
element size, okay. And you can also see that the outline width has nothing to do
with the dimension of the element. So it means that the outline doesn’t really
count to the element dimensions. So we can treat outlines as something outside
of the element. And we can also see that the outline is able to overlap other
elements. So we can see that my second paragraph is overlapped by the outline
coming from the first paragraph, okay? So this is an important difference between
an outline and a border. I can also set up the color for my outline Okay, so we
have set up the three basic components of an outline. In order to distinguish
between the border and the outline, I would like to also set a border on this first
paragraph So a border is quite easy to set up I just set up the border style first before I can do anything else. So you can
see that the border style has changed. In order to visualize the style a bit
easier, I would like to increase the width first Okay. Now the width is increased so
that you’re able to see the border a bit easier Okay, now you can also see that
the left border has changed its color to green. So I’m able to show you the
difference between a border and an outline. We say that a border is included
inside the element, while an outline is not included in the element, okay. So it
is treated as something outside the element. And we can also see that we
cannot have a way to set part of the outlines to other settings. So an outline
has to be treated as an entity, as opposed to the border in which you can
set up the appearance of each of the borders, okay. So if you want to give a
better visual effect between the border and outline, I can simply set up some
separation between them. How can we do that? We have an attribute to do so Okay, we can now see that the offset
between the border and outline has increased to 20 pixels. So we can see
that the outline coming from the first paragraph will try to cover more of my
second paragraph, which is just below the first paragraph, okay. So this idea can
let us know that an outline is not counted as the element component. It is
something outside the element. If you want to do the outline set up a bit
easier, you can simply use the shorthand form, which is just combining all the
three outline settings to one line Okay I’m simply changing the outline
appearance of my second paragraph. And you can see that the outline has turned to
a double style. And the outline width becomes 30 pixels. And the outline is
pink in color. So you can also see that the second paragraph has an outline that
overlaps the first paragraph, which is just above it. Okay, so we can use three
values on the outline attribute to do the setup on just one line, okay. So this
completes the discussion of the outline in this video. And when we look back to
the CSS file, we are able to see that the outline can be changed by three main
attributes, which are outline style, outline width, and outline color. And we
have to notice that an outline is not equal to a border. And in order to do the
separation between the outline and the border, we can simply set up and offset
between the outline and the border In addition to the previous set up, we
are also able to do the shorthand form of the outline set up on just one line.
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

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

Advanced selectors – Basic CSS3 Fast

Advanced selectors – Basic CSS3 Fast


Hello everybody, welcome to the css3
course. This video is going to talk about many advanced selectors. For example, I
can specify the descendant selectors together with the direct child
selector, and the sibling selector I’m also able to specify the adjacent
sibling selectors. And before I talk about all these selectors, I would like
to talk about the the two important identifiers in HTML. The first one is
known as a division, which is having div as the element name. A division here
simply means a block-level element for setting up the styles. So a div element
doesn’t give any semantic meaning to the webpage. If we want to simply change the
style of a certain part of your web page, you can enclose the parts with a pair
of div tags. The elements inside the div tags will be having other kinds of
treatment as specified by your CSS file So I’m going to set up a division, which
would cover a lot of elements. I have about more than 10 lines being included
in my division tags. And inside the division, I have another important
identifier to discuss now. I have a span element. Here a span element is pretty
similar to a division element. A span element means an inline element inside a
paragraph for setting of the styles. So a span element takes up the necessary space
only. It is not really treated as a block- level element as a division element
does, okay So it is usually used in a portion of a
certain element So what does it mean by that? We can see
the situation on the right-hand side of the screen. So for this part,
this part is actually enclosed by the span element. And I’m going to change the
effects of this element on the CSS file But we have to remember that this span
element is really inside the paragraph element shown here, okay. So how can I
really specify this span element? I have to really understand one thing.
This span element is inside a paragraph So we can treat the span element as the
descendant of the paragraph element. So how can I really specify this span
element? Let me go to the CSS file Okay, when I want to specify the span element
which is inside a paragraph element, I can do something like this Okay, I can
just use a space to separate two elements. So in this case, I’m able to
specify the span element, which is inside the paragraph element. So we can
say that the span element is a descendant of the paragraph element. So
if I want to really do this kind of descendant selectors, we just need a
space in between the parent element together with a descendant element. S we
can see that the font size is altered by the CSS file. And we have to notice one
important property that the descendant selector would affect all the children
and their grandsons. So what … what does it mean by that? We can see an example like
this one Okay, we can see that the blockquote
specified by the division.class1 element will be turned to a yellow green
background. So why is it important to understand this property? Because when we
look at the webpage on the right hand side of the screen, we can see that two
blockquotes would have the same background color. And what’s the reason
for that? We can take a look at the HTML file The HTML file has a division
called class1, which is simply the style that I’m going to handle. And
inside this division element, I really have one blockquote followed by
another blockquote, which is actually inside another division. And this
division is really nested in the outer division element. So we can see that the
descendant selector affects all of the children. Why? Because when I just want to
change the first blockquote background color, I’m also able to change the
background of the second blockquote, which is inside another division element,
which is a nested division element of the outer division element. So in this
case, when I just want to change the blockquote specified by division.
class1, I’m also able to affect the children and the grandsons of the
original blockquote element that is ins … just inside the outer division element,
okay. So even though the blockquote element which is inside the inner
division element is regarded as the children of the original outer division
element. Its color is also affected by the instructions set to the parent elements.
So you can see that the second block quote is also turned to yellow green
background. So there’s an important property of descendant selectors. It
really affects all the children and the grandsons, even though they are enclosed
by another level of the division element, okay And then I’m going to talk
about the direct child combinator in view of this troublesome situation of
selecting all the children and the grandsons when I just want to specify one
particular element. So how can we make use of the direct child combinator to
avoid this kind of possible problem with the styling issue? I can do
something like this Okay. We can simply use the closing angle
bracket as the direct child combinator So in this case, I’m just going to locate
the block quote, which is the direct child of my class1 division. So I … when I
look back to the HTML file, I’m just going to locate the blockquote element,
which is this one, which is the one just inside the outer division element. And
the one which is another level of the division element, which is known as the
nested division element, will not be chosen, okay. So I’m going to just locate
a very direct child of the div element inside the outer division
element, okay. So I’m going to avoid the effect on another blockquote, which is
not the direct child of my current division element, okay And then I’d like
to show the multi-level child combinator So what does it mean by that? As we
create our webpages, we will see that there are so many levels of elements by
using the spaces as the indicator. So when we want to drill very deep to some
particular elements to apply our styles, how can we do that. We can consider using
the multi-level child selector. So let me show you an example here Okay, what does it mean by the multi-level
child selector? We can see on the webpage on the right-hand side that the
background color of a certain list item has turned to yellow. So what does it
mean by that? We can go to the division with class name called class2. And
inside this division, we have so many levels of elements. For this case, I have
the outer ordered list, which has an inner ordered list. So when I want to really
locate the list item inside the inner ordered list, I’m able to do so by using
so many closing angle brackets as the directions to guided me towards the
required elements. So we can go over the flow like this. Division with named
class2, and then we go to the ordered list. And we go to the ordered
list, which is inside the outer ordered list. And inside the inner ordered
list, I’m going to locate the “li” element here. So by means of the angle
brackets, I mean the closing angle brackets in this way, we are able to
locate the multi-level child very precisely. So after that, I would like to
talk about general siblings combinator So what does it mean by this word
siblings? We can see an example on my web page. So let me go to this section and
the code corresponding to this section is here
suppose I focus on h2 element here. The elements following this h2 element are
known as the siblings of the h2 element So this paragraph and this paragraph are
known as the siblings of the h2 element Okay. And the element above the h2
element is not regarded as the sibling of the h2 element. So this line is above
the element h2. So this paragraph is not regarded as a sibling of h2. So only the
elements below the particular element in focus are regarded as the siblings. And we
have to notice something as well If I have a division followed by my
paragraph which is a sibling of the h2 element, the elements inside this division are
not regard as the direct siblings of the h2 element, which is this one, okay. So
as long as we have another division inside my previous division, the contents
inside this inner division are not regarded as the direct siblings of the h2
element. So in this case, only these two paragraphs will be regarded as
the siblings of the h2 element. So when I want to really specify these two general
siblings of the h2 element, how can I do that? I can do something like this and …
on the CSS file Ok, class3 is simply the division
encloses the h2 heading. And in this way with the tilde character, I am able to
specify the paragraphs which are the siblings of the h2 element. So we go to
the division which has a name called class3. And in this division, I look for
the h2 element. And when I have the tilde character, I’m able to locate
the siblings of h2 element. So I would be able to locate this paragraph
and that paragraph. And you can see on the right hand side that the two
paragraphs have changed their font to monospace. And we can see that the
paragraph following the two direct siblings will not be changed to the
monospace font, because they are not regarded as the direct siblings of the
h2 element. Okay, so this is the way we can control the general siblings by
means of the tilde character being the combinator that joins the parent
element h2, okay. And finally I would like to say something about the adjacent
siblings combinator. So what is the meaning of an adjacent sibling
combinator? I would like to simply select the adjacent sibling of a certain
element without changing the styles of other siblings. So the adjacent sibling
simply means the first sibling just after the element before the plus sign.
So I will demonstrate the usage of this sibling combinator. So when I go to the
part that corresponds to adjacent sibling, I have two blockquotes. And if I
focus on h2, I would have two siblings One is the first blockquote,
the other one is the next blockquote. And the adjacent sibling simply means the
first blockquote element. So this is the first
sibling of the h2 element, while the second blockquote is not the adjacent
sibling corresponding to the h2 element. So in order to only change the style
of the first blockquote which is the adjacent sibling of h2, how can I do so?
I can do something like this on the CSS file Okay, I have a typo. So it should be blockquote. So we can see that the blockquote, which is the
adjacent sibling of the h2 element, has turned the background color to orange.
And I’m not able to affect the background color of the other sibling,
which is not the adjacent one, because of the + combinator here. I’m able to
just control the background color of the adjacent sibling instead of all the
siblings that follows h2 element. So this is the general idea of making use of the
combinators, as well as the descendant selector. So we are able to pretty
precisely locate the elements in addition to the original selectors
that we know already. For example, the class selector, ID selectors and so
on. 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

Selector, Class and ID – Basic CSS3 Fast

Selector, Class and ID – Basic CSS3 Fast


Hello everybody, welcome to the css3
course. This video is going to talk about the selectors that can help us identify
the elements that are going to be decorated by means of the CSS format. Sso
suppose I have such an HTML file that outputs this kind of web page. So now I
would like to demonstrate many types of selectors by using this web page. So I
would like to demonstrate the selectors in a number of categories. For example,
the element selectors, ID selectors, class selectors and attribute selectors.
And before I demonstrate these selectors, I would like to introduce one selector called universal
selector Okay, what does it mean by an universal selector? It just means that
the selector is going to choose every single element that is shown on the HTML
file. So how can I do that? I can do something like this as a demonstration Okay, when I set the text color to be
blue, I’m able to see all the characters on the web page to be turned to blue. So
it means that when I simply put an asterisk before the opening curly brace,
I’m able to select every single element that is present in the body
element, okay. So you can see the all the letters are turned to blue by means
of the universal selector. And then I’m going to show you the element selector So I would have one example Okay, so what does it mean by the element
selector here? When I just input the element which is h1, I’m going to set the
font size of each h1 element inside my HTML file to be having 48 pixels as the
font size. So for my HTML file, I have one h1 heading. So I would have one
heading to be set as 48 pixels. And it does not affect other elements
because this effect is only applicable to h1 elements, okay. When we want to
change the outlook of some elements, we don’t always need to set up the
selectors element by element. Actually we can also group multiple element
selectors to apply the same style. So how can we do that? I can do something like
this here Okay, here I would like to set up both h1 and P elements to have the font color
being magenta. So we can check the webpage on the right-hand side. So you
can see the P elements together with h1 elements are now turned to magenta. And
other parts being not h1 or P elements will still remain to be blue, because
this is the setting provided by the universal selector. So we can see one
important property by means of this example. We can see that the latest style
present in a CSS file would override the previous style. So for the font color
example here, magenta will be able to override um blue if these two elements
are required to set to another color. And these lines of code appear later than
the universal selector, so we can say that the latest style mentioned on the CSS
file is able to override the previous style on the earlier part of the CSS
file. S I can show you one more example for this situation Okay, you can see that
the font color for the paragraph elements are now turned to tomato. That
means the tomato color is even able to override the magenta colors set
previously in these lines of code. So this example also demonstrates the
latest styles are able to override the previous styles mentioned on the same
CSS file. After that I would like to identify the ID selectors to you. An ID
selector is something like this. When we want to set up an ID for your HTML file,
you have to notice that the ID is unique throughout the entire HTML file. It
cannot be shared among other elements of the same HTML document. So suppose I
would like to set up the unordered list like this. And I would like to set up the
ID for this unordered list element. And if I want to change the outlook of my
unordered list, I would like to specify the ID on my CSS file. How can I do that?
I can do something on the CSS file as follows Okay,
I’m able to identify the ID by using the hash character, followed by the ID name,
okay. So now I’m able to set the list-style-type from solid circle to
hollow circle, okay And after the ID, I would like to set up
another identifier called class, okay. So what is the meaning of a class? It is
pretty similar to an ID, but we can apply the same class
mentioned on this stylesheet to many other parts of the same HTML file. So a
class can be designated to multiple elements. And I’m going to show you this
property very soon. And before that, I would like to identify part of the ordered list shown here as class1. class equals class1. And if I want to specify
the outlook for this class, how can I do that
I can simply go to the CSS file and type something like this Okay, you can see that I just use a dot
followed by the class name to declare or to specify the class to do the change in
the outlook. So now you can see that the ordered list here will be
having a color of light green as the background color. And as I told you, a
class can be designated to multiple elements. Since my next paragraph is also
having class name called class1, you can see that on the paragraph here just
after the the ordered list will also have the light green color as the
background color. And more than that, an element can be assigned to multiple
classes. So when I set the blockquote to be having class1 here, I’m also
able to change the outlook according to the styles specified for class1.
So we can see that the blockquote also has the background color being light
green. And then I’m going to show you an … another property of class selectors. And
this property is quite useful for us And you can see from the blockquote opening tag
that I have two classes being included as the value of the class attribute. So I
just use a space to separate two class names. Now I would have another class
called class2 just after class1, separated by a space. And what does it mean
by that? I can simply assign another style specified by class2 to the same
element Okay, when I apply class2 to the
blockquote, I’m able to set the alignment of the text to be the justified mode,
okay So you can see that the letters are
aligned on the right hand side. So this is a very important property of the
classes. The multiple classes can be applied to a single element, okay. And I
can also apply the same style to another element. For example, this one. So I just
now apply the the same class called class2 to another element. So you … you
can see that another paragraph is also right justified, okay. So this is an
important property again. We can apply the class to different portions of your
webpage when we want to be more specific about the element to style, we can do
something like this which is known as an element-specific class. So there are so
many paragraphs in this HTML file, as you can see from the webpage on the
right-hand side. If you want you just specify one paragraph to have a
certain style, how can you do that? I can do something like this here Okay, what does it mean by this dot here?
This dot is going to link the elements together with the class. So this selector
means that you need to locate the element as follows. We need to specify
the paragraph that has a class called class2. So the monospace font family
does not affect other parts of the webpage. It just affects the portion
specified by the paragraph that has a class name called class2, okay. So this
is known as the element-specific class So we have finished the class selectors.
The other thing to talk about is the attribute selectors shown here. So what
does it mean by that? An attribute selector means that we really need to
specify the attribute when we want to locate the element correctly. So now I
have a … I have some input elements. And if I want to specify the input elements
correctly, I need to take care of the attribute selectors issue Okay, let me
show you an example on the input elements on the right hand side of the
screen Okay, you can see that the name textbox has turned to lawn green. I mean
that the background color of the box has turned to lawn green. Why? When we look
at the input element on the HTML file, I’m actually doing something like this.
The input element is specified by the input keyword here. And for my CSS file,
I’m going to locate the input element that has an attribute called ID. So this
element has an attribute called ID. But the input
element next to the name textbox does not really have the ID attribute. So
we can see that this selector is just able to help me locate the element which
has the ID attribute. So only the first text box will be turned to lawn green.
But the second text box will still remain unchanged. In addition to
specifying an attribute, we can also specify the attribute-value pair if we
want to locate the element very precisely. So we can see an example like
this Ok, I’m able to make this link a larger font. The reason is that when I
simply go to this link which is here, this link has an attribute-value pair
called target equals blank. But the other hyperlink on top of it does not really
have this attribute-value pair. So I’m able to locate the anchor element with …
with this attribute-value pair indicated. So I’m going to locate the
link shown here very precisely without affecting the anchor
element that does not have this attribute-value pair. And then I can also
specify the elements by using the value selector. What does I mean by
that? We can see an example here Okay, you can see that this checkbox has a very
large area So what does it mean by this large area?
I just change the checkbox size by specifying the height and the width of
the checkbox. So what does it mean by this selector? input value tilde equals
graduate? We can just go to the check box here. I just want to change the size of
the checkbox when the value is equal to graduate. So this tilde equals means that
I’m able to select the value very accurately. I’m not going to select
post-doc, college, below college, or no schooling, because I have to really find
out the value component of an attribute- value pair being graduate exactly. And in
other input elements, I’m not able to find out this pattern exactly graduate.
So only this element with this pattern called graduate will be turned to a big
check box size, okay. And after that, I’m going to show you the element selector
with the value starting with some word Okay, what does it mean by this selector?
input value vertical line equals below just shows that we have to find out the
value component of an attribute-value pair with the word “below” at the
beginning. So when we check the input elements, I’m able to see that only this
one can satisfy this condition, below-average. And other
input elements don’t have this pattern as the beginning of the value component
of an attribute-value pair. And then I’m going to show you another element selector with the value starting with some characters. So let me show you
an example now Okay, we can see that the checkbox corresponding to college will
be set to another checkbox size. So what does it mean by this kind of element
selector? I’m going to look at the value which starts with “col”. So when I check
the input boxes, I’m only able to find out this one being started with “col”. So
I’m able to locate this one and I’m not going to locate other input elements
because none of these input elements would have some value starting with the
“col”. Only this one will be chosen, okay And I’m also able to denote the element
selector with the value end with some characters. So how can I do that? Okay, we
can see that the checkbox corresponding to “no schooling” has turned
to another checkbox size. The reason is that we can see that only the checkbox
corresponding to “no schooling” would end with “g”, okay. And no other values would
end with “g” when we check the other input elements, okay.
Only this one will end with “g”. So we can simply locate the element very
precisely, without affecting any other unrelated
elements. Finally I’m going to show you the element selector with the value
having some characters inside. So we don’t need to specify the beginning
characters or the ending characters. We can just specify the characters in
between some words Okay. What does it mean by that? When I simply say value
star equals “ost”, I’m able to locate the postdoctorate level checkbox. The reason
is that I am able to find out “ost” here. And this pattern is not at the
beginning of the value or it is not a the far end of a certain value. So when
we use the star or asterisk equals operator, I’m able to locate the value
which has “ost” inside. So this is another way of helping me locate the elements
very precisely. So we can see that there are so many selectors allowed in CSS: the
element selector, ID selector, class selector, and attribute selector, together with the
universal selector at the very beginning of my illustration. 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

Pseudo-class and pseudo-element – Basic CSS3 Fast

Pseudo-class and pseudo-element – Basic CSS3 Fast


Hi everyone, welcome to the css3 course.
This video is going to talk about the pseudo classes and the pseudo elements.
So pseudo classes can help us specify the style that is put to some states of
an element. And the pseudo elements would help me locate a portion of the elements.
So before I discuss these things, I’m going to show you my webpage on the
right-hand side. And the code that corresponds to it this webpage is shown
on the left-hand side of the screen. So I have the head first, which shows the
title on the tab. And then I have some elements inside the body. I have some
headings together with some links. I also have some other headings together with
some paragraphs. And then I have an unordered list. And then I have two text
boxes. And after that, I have another paragraph. Before that, I have a heading.
So I’m going to make use of the web page here to demonstrate the pseudo classes
and the pseudo elements. So let me go back to the beginning. And then I would
like to open my CSS file Okay, I would like to introduce pseudo classes first.
The pseudo class can help me specify the states of an element. So I would like to
demonstrate it with an example I want to change the state of a hyperlink Okay, so what does it mean by this
statement? “a” means the anchor element and for this anchor element, when the mouse
cursor is put on top of it, I would like to change the color of the hyperlink to cyan.
So when I simply put my cursor on top of the hyperlink, the color will be turned
to cyan. Okay, so this is the meaning of hover. Hover means that I just put
the cursor on top of the link. And the color corresponding to this state will be
changed according to my CSS file specification. Okay, so this is the
meaning of “a colon hover”. So we can see that a pseudo class is mentioned after
the colon character, okay. So when we specify the element, we need a colon
together with the pseudo class which is simply a state of the element. In
addition to the hover state, a hyperlink can also have other states. So
let me elaborate on it now Okay, what does it mean by the word “active”? The word
“active” means that when I simply click on the link by holding on my left button of
my mouse, I’m able to change the hyperlink to lime-green color. So you can
see that when I simply press the hyperlink, the color has turned to
another one specified on my style sheet So here “active” means I press the
hyperlink So the word “active” simply means that I’m
going to activate the link by pressing it And after that, I would like to introduce
other types of pseudo classes. For example, I would like to specify the
first appearance of the type of element Okay, when I do so, I’m able to change the
background color of the first paragraph element inside my HTML document. So the
first paragraph is this one which is from this to that. So I’m going to change
the background color of the first appearance of the paragraphs inside my
HTML file. So you can see that other paragraphs are not affected, because I
just choose the first appearance of my of the paragraph element. Okay, so this is
known as the first-of-type pseudo-class In addition to choosing the first
appearance, I’m also able to choose the n-th appearance. How can I do that? I can
have a similar way as the one shown above Okay, I have another pseudo class called
nth-of-type. And the number inside the parentheses is simply telling me to
choose the number of elements. So I would like to choose the third element which
is of paragraph type. So paragraph one is here which has turned to cyan
background color. And the second paragraph is here. And the third one is
below the second one. So I’m going to change the background color of the third
paragraph to another color called Navajo white. Okay so we can see that only this
paragraph has changed to another color Okay, I’m not going to affect other
paragraphs by means of this pseudo class selector, okay. And a pseudo class is also
able to help us find out the first child of a parent element. So what does it mean
by that? We can see an example on my webpage. So let me go to class1 first.
I’m going to demonstrate this property with this division Okay, now I’m able to change the font of
the first element of my unordered list to be monospace. So when we follow this
selector ,we can see that I’m going to choose the division which has a class
name called class1. And inside this particular division, I’m going to look
for the unordered list inside this particular division. And in this
unordered list, I’m going to find out the “ii” element. And there are three elements.
So I’m just going to find out the first child of the parent element. So the
parent element is simply the unordered list. And these three list items are
actually the children of this “ul” parent element. So I’m just going to find out
the first child of the “ul” element. So I’m just going to pick up this list element.
So you can see on the webpage that only the first item has changed to monospace
font. And I’m not going to affect other children of the unordered list element.
So in addition to choosing the first child, can I just choose other children?
Yes, we have a such way to do so in CSS Okay, I can use the nth-child pseudo
class. And the number corresponds to the element number of your children. So I’m
going to choose the second child inside the
“ul” parent element. So I’m going to change the font family of the second item to
sans-serif. Okay, so this selector is quite similar to the pseudo-class that I used
for the first child. And then I’m going to demonstrate the ways to choose a
certain element more precisely. So let me go to the text boxes. So I have two text
boxes. The first one has the required key word. That means we need to really
fill in something before I can submit the form. And the second one is not a
required entry. So if I want to really choose this particular input element, how
can I do so in the CSS file? I can have one way by means of this pseudo class Okay, you can see that the background
color of the first text box has changed to orchid. So what does it mean by this
pseudo class? Input element here is simply representing these two elements.
And I don’t want to change the background color of both input elements.
I just want to change the background color of the one that has the word
“required” inside the declaration on the HTML file. So it means that the
required pattern is going to help me just choose the input element that has
the “required” keyword. So I’m just going to change the background color of the
first element out of the two input elements. Okay.
And after that, I’m going to introduce some pseudo elements that can specify a
portion of an element. Sso before doing so, I would like to go to class2 first. I’m
going to use class2 to demonstrate the pseudo elements The first one to demonstrate is
something like this Okay, a pseudo element is simply a portion of an element.
So what does mean by this sentence? We can see an example here. I’m going to
locate the paragraph with the class name called class2. And in this particular
class, I’m going to just locate the first letter which is simply the capital L
here. So I just want to change the cap … first capital L to 48 pixels font size.
So the first letter is simply a pseudo element provided by the CSS
documentation. And we really want to make use of a pseudo element. We need two
colons before mentioning the pseudo element, okay. So this is one of the
examples of the pseudo elements. I have one more to show you now Okay, this
statement is going to help me change the background color of the first line of
the paragraph with the name called class2 So the background color has turned to
orange. And this background color is dependent on the first line only. So what
does mean by the first line? When I enlarge the window, the first time just
becomes that long, okay. So the first line refers to the viewport that you can see
on the browser. So when I reduce the size, I’m just able to show the first line for
such a number of words only, okay. So the first line refers to what you see on the
viewport The viewport is simply the area that you
can see on your browser. And also I have one more example of the pseudo elements So what does it mean by the word
“selection”? “selection” simply means the text that I’m going to choose by means
of my cursor. So when I highlight these words, I’m able to see that the color of
the words had turned to yellow. And the background color of my selection becomes
the chocolate color. So when I simply move my cursor, I’m able to change both
the color and the background color of the selection. So the selection means
that I’m going to choose some words by means of my cursor. If you want to learn
more about the possible pseudo selectors and pseudo classes, we can go to this
webpage. Pseudo classes and pseudo elements. And this webpage is part of the
Mozilla developer Network. And at the end of this page, you will be able to see a
lot of pseudo classes together with the pseudo elements. So you can see that the
possible ways to edit your web page will be ever-increasing. So you can see that
there are some pseudo classes that are still under development. So after this
video, you are able to make use of the pseudo classes and the pseudo elements
to help you specify the portions of the webpage that you are
going to style more precisely. 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

Cascading, specificity and inheritance – Basic CSS3 Fast

Cascading, specificity and inheritance – Basic CSS3 Fast


Hello everyone, welcome to the css3
course. In this video, I’m going to talk about three important concepts of CSS,
which are cascading, specificity, and inheritance. Before I discuss these three
important properties, I would like to show the webpage, together with the HTML
file that corresponds to this webpage. So in this HTML file, I would have a
paragraph followed by a blockquote. And after the blockquote, I would have
an unordered list. And you can see that I have already mentioned the classes and
IDs that would help me introduce these three concepts later. So I’d like to
demonstrate the CSS code that can demonstrate these three important
properties Okay, you can see that my web page has turned to blue font color,
because I have already applied a universal selector by this asterisk
selector. So you can see that the words have turned to blue already. And
I would like to show some important properties after the change of
the font color. Okay, so let me go to the first part which is called cascading.
Cascading is quite easy to understand When you have some elements whose styles
are in conflict, the styles that are placed at a later part of your CSS file
will prevail. So I will show you this example by means of the paragraph here Suppose I already turn the paragraph
font to monospace. If I have a similar declaration after the monospace
declaration, the later one will win the battle Okay, you can see that I have
turned the font-family to San serif because I put the San Serif font after
the declaration corresponding to the monospace font family. So we have to
remember that this is known as cascading When we have conflicting styles,
the one at the later part will override the settings on the previous part. And
then after cascading, I would like to talk about specificity. Specificity is simply
the competition among multiple declarations for a single element. In
this case, we would give more weight to a certain declaration according to the
following order. When we have multiple declarations for a single element, a
class is more specific than an element Also an ID is even more specific than a
class. And even more, an inline style is even more specific than an ID. So I would
like to demonstrate these three properties now. I would like to
demonstrate it by means of the block quote here. We can see that I have already
given a class name to the blockquote together, with an ID name for the blockquote So now let me style the block code by
specifying the element directly Okay, I can simply change the background
color of the block quote by means of the element selector. And I’d like to
demonstrate that the class declaration is even more powerful than
the element alone. So I can show you this property by the following code Okay, you
can see that the block quote has turned its background color to light blue
instead of the original color. So what does it mean by that? When I simply
specify the element by means of the class identifier, the class identifier is
even able to override the styles that by using the element selector alone. So we
can verify this property: A class is more specific than an element. So the class
declaration corresponding to a particular element wins the battle
against the declaration by means of the element alone. Okay? And the second thing
to talk about is the battle between a class and an ID, okay Okay, you can see that the background
color has changed to orange, because I used the ID to specify the element. So we
can see that an ID would win the battle against the class when we talk about
specificity, okay. So an ID is more … even more specific than a class. So if we have
a class identifier to a specified element, it would win the war against the
class declaration, okay. And one more important thing is that, we have to
notice that an inline style is even more specific than an ID. So if I just
declare an inline style inside the opening tag of the blockquote element,
we will see the change in the background color very quickly Okay, when I simply
add the inline style, you can see that the color of the background for my block
quote has changed to the color specified inside the inline code, which is lime, okay.
So this is the important property: An inline style is even more important than
or even more specific than an ID. So we have to remember the order like this.
The element selector alone is the weakest. And the class identifier is
stronger, the ID identifier is even stronger. But the strongest one is the inline
style mentioned inside the opening tag, okay. After talking about specificity, we
would like to talk about inheritance. So let me go to the unordered list.
What does it mean by inheritance? We can see an example already on the webpage.
When I want to set up the unordered list, we will see that the font color of
the unordered list has already inherited from the body styles. So you can see that
for my body, every single character has turned to blue font color due to the
universal selector shown above, okay And this is known as inheritance. Even though
the unordered list elements are inside the unordered list tag, the list elements
would inherit the color coming from its parent element, okay. So if we really want
to change the color explicitly, we need to do so by using the code like this way Okay, you can see that I really do the
changing of the color explicitly by using the CSS declaration as follows. I
specify the element which is “li”. And then I turn the characters inside the
unordered list into red. So in this case, my setup is able to override the
inherited colors from the body styles. Okay? If you really want to change the
pattern coming from the inheritance effect, you can do so by overriding the
inheritance using the styles of your parent element. What does it mean by the
overriding action? Now the list elements have turned to red color. If you want the
list elements to inherit the color coming from the body styles, which is
blue, we can do so right here so that the parent element properties
and styles can be brought to the descendants. Okay? Okay, by using the
“inherit” keyword, you can just inherit the color coming from the parent element. So
you can see that the first list item has changed its font color to the color that
comes from its parent element, which is the unordered list. And actually the
unordered list is simply controlled by the universal selector, which is here. So
when I do the “inherit” action, I just turn the font color from red to blue.
Okay? In addition to the “inherit” keyword, I want to introduce one more keyword to
you. Actually we can override inheritance by retaining the initial styles of your
parent element. Remember that our font color has turned to blue at the very
beginning by means of the universal selector. If you don’t apply the
universal selector here, we can expect that every single character has black
color. So if you just want to retain the initial color of the font, you can do so
by means of the “initial” keyword. So let me demonstrate it to you now Okay, you can see that the element
corresponding to id2 would be turned to black, which is the initial color of
your parent element which is your unordered list.
So the “initial” keyword is even able to override the universal selector
shown at the very beginning of the CSS file. So you can see that by means of the
“inherit” keyword and the “initial” keyword, you are able to override inheritance
quite easily. And remember, the “initial” keyword is even able to override the
universal selector settings. So after this video, I hope you are able to understand
the basics of cascading, specificity, and inheritance. So you are able to notice
the change in the styles when you apply these styles properly. And for
specificity, you need to remember these few lines to understand the weight to
different declarations of your elements And for the inheritance, you can override
inheritance by means of the “inherit” keyword and the “initial” keyword properly.
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

Height/width and box model in css- css lecture 3-how to do this

Height/width and box model in css- css lecture 3-how to do this


Asslam-o-allaikum Learners. I hope you are all fine and seen previous Lectures and This is the third Lecture of HTML in which we ‘ll see that what is height and width . We have seen previously in HTML about height and width. Today we ‘ll discuss these in detail Lets start video without wasting time I am writing the title: ‘CSS Lecture 3’ Make a div block. In which i am going to write this Lecture going to tell you about height and width. OK. I am going to use internal CSS use “style” tag OK. first of all i am going to give it background color that we have seen in previous lecture. background color to be light blue Now i am going to set its width width:500px and height: 600px Open in browser as you can see I have set the width to 500px and height to 600px. and background color is light blue There are also some properties such as max-width Save the document and refresh the page you can see no difference, but there is one difference. let me tell you when i make the screen small then there is no scroll in the bottom as in the right side. because it become the size of mobile screen and you can make it large and small. but you will see no scroll bar in the bottom. May be you are thinking that it is because it is because the width is small but i am now increasing the width. Changing the width to 900px and refreshing the page but there is no difference. but as i change its ‘max-width’ to ‘width’ Save the document And refreshing the page but now you can see the scroll bar in the bottom but if you don’t want to add the scroll bar in the bottom then change ‘width’ attribute to ‘max-width’ and simply it would remove the bottom scroll bar Like this if you want to remove the right side scroll bar then simply change ‘height’ attribute to ‘max-height’. and it removes the right scrollbar we use max height when we wants the height of box equal to the height of text e:g usingtag and writing blah blah blah Now you can see the height increases I hope you understand the concept. we have done max-width and max-height and next is box-model we use box-model when make website design or layout let me show you Go to any web page Right click on page and click on inspect when you will click on inspect there will open a code in which i will show you box model It is taking some time wait! See A code is opened which google used to design this page here you can see a box and this box is box-model and in box model there is margin in the top and below of it you can see border below of it there is padding and in all of these we write our content First of all ‘margin’ then follows ‘border’ and ‘padding’ lets implement it to see how it works. Make a div copy above code and paste it inside the div I am going to style the div. and removing the upper div make the new div’s background color to lightblue all remaining attribute same First discuss about margin. I have told you about margin in previous Lecture Declare its margin to 70px then declare its border to 9px solid green OK. Then padding. padding to 10px Now lets write the paragraph Save all Document Refreshing the browser. Now see The space between the paragraph and this div is called margin and the green color is the border of paragraph and there you can see the content in blue color box And the space between border and content is ‘Padding’ This is the Model-Box concept and by inspecting My browser is taking little bit time please bear this technical problem. Now you see the div. And there is box-model You can see the values of Margin,border and padding in this BoxModel that i gave the values Margin:70px, border: 9px and padding:10px This is the box-Model Concept We have Learnt the BoxModel. Now the Next is Outline Out line is same as we use border in border we use border-style, border-color etc. And i have send you slides about this in FB group. And the outline is same as border. its style, color and all the properties resembles with border. what is outline? The line we draw outside of border is called Outline Let me show you.As i have wrote borer:9px Solid green I will write outline as outline:4px solid blue Save the document and refresh the page look here…. you can see outline this is outline outside the border and this is called outline this also can use to make your page beautify this outline is same as that i told you before about border so that i dont wanna waste my time all these things are same only one thing that make different from each other that is outline-offset the purpose of this outline-offset to make space between border and outline alright make space between border and outline that’s way we use that i write 5px alright this value make space between them i will refresh here look here…space between border and outline so for this purpose we use outline-offset we have done that if you have get better understanding about about border then you dont need to much focus on outline just different of name but functionality is same and next thing is CSS text we have also discussed little bit before about text but today we will discuss in detail that what is text and how can we design in css so first one is color you already know about color just like if i want to change color of p tag then i will write ‘p’ here and color in styling we have discussed in detail about color and i will assign red simply and i will refresh browser then we will see the red color of text as we discussed already before that and now we are discussing how can we change color of text and second one is direction means that what you wanna set direction of text just like here direction of ‘p’ is straight and here i write pre tag and here i write “this is direction” alright and i will go in styling… pre in ‘pre’ i will write ‘direction’…. alright and there are two types of direction right to left and left to right but this one is left to right and here i will write ‘rtl’ means right to left direction save it with ctrl+S and refresh here now look here so this is direction that i wrote so this is right to left direction so this is the thing that i have change if i wrote something after that for example i write css and save it and now look here this is right to left direction and second is left to right this is another direction now notice the different now look here this starts for here so these are two direction and next thing is letter spacing meaning of letting spacing is that how much will be space between two letters like ‘t’ and ‘h’ alright so this one is letter spacing here i will write letter-spacing how much you want to make space between that. you can also give in points and i want to keep 2px there will be 2px size spacing between every each letter and here i will refresh now look here in every letter, it added 2px spacing between every letter and this is called letter spacing you can also increase this size of spacing as you want i have increased to 5px and here i will refresh it added 5px size between every letter and this is letter spacing dont worry about that… i will send you this file as i also sent you slides of previous lecture as well and this one i will also and next thing is line height meaning of line height is that i write two p tag here sorry no… i just copy this box copy and here i will use
tag and paste here alright… now look notice that you can see that the space between these is very short so line-height is used to make space between lines and i want to set space 0.8px 0.8px here i will refresh it…. and look here these are got matched and 0.8 is very short it seems that these are got matched as i increase it and i write 4px i assigned 4px to line-height now look here… here i will refresh it now you can see that space between lines space between tow lines as i will extend it… i write 40px now look here now space will be increased between lines from top it will also increased space and between lines as well this is called line spacing and next thing is text align there are three kind of text aligns for example… you maybe have worked on MS word there we use text align same as that we will also text align here you can align to center now text will be aligned to center… look here and you can align to right side right alright right now text will move to right side same as that you can also align to left side so this one is text-align and next thing is text decoration now we will see that how it will work first i create a link usingtag here i will assign ‘#’ ‘#’ means that i will be on current page it will not redirect to other page here i will write text decoration alright…. save it and here i will refresh it now you can see that there is underline under the link text later on we will also discuss in detail while clicking the color of text will change you just focus that this is text decoration that underlined if you want to remove underline here you will write we have ‘a’ tag here we will use text-decoration and we will set to none in value means that we need nothing to do as i assigned to none and refresh it and you can see that now underline is removed save as that you can also use bold as if you want to make it bold and here we will refresh it now look here now it is bold we can also use in other format and how we will work on link next thing is text indent means that how much you want to make space from text to left border slowly slowly you will understand… maybe i cannot teach you on that level but you will understand slowly slowly and i just change to sorry this one i just change text align to left and look here.. i will use text-indent text-indent and assign value to 6px and here i will refresh it here you can see text-indent here this second line ‘T’ is closed to border and first line ‘T’ is far from border i just extend it so that you get better understand i change to 60px and here i will refresh it now look here… now text indent is increased so this is called text-indent… alright you can also use this so all properties that i am discussing… you can use in your website while designing and purpose of this teaching is that you just know what are these thing and how can we use next thing is text-shadow so what is text-shadow for example if you want to change the shadow of text simple i will write text-shadow and it have two properties that is horizontal and next is vertical in first horizontal i will assign 2px and in vertical value i assign 3px now next we need to assign the color of shadow and i want blue color of shadow of text… so this is shadow of text so first one need to assign value of horizontal then vertical then we need to assign color of shadow here i will refresh it and now look here you can see the shadow of text ok… so this is text-shadow so next is text-transform alright control the capitalization of text so there are three types of text-transform two are main i.e first one is lowercase and other is uppercase so text-transform first of all i use uppercase so it will convert every letter to capital so look here so all these letters changed to uppercase so from here i am going to remove text-shadow because it is disturbing us you cannot see clearly so now look here… it will change all letter to capital so same as that you can also change to lowercase in text-transform as well alright lowercase so all these thing that i am discussing and you no need to remember that whenever you are going to design your website then it will comes to you automatically alright so next thing is text-overflow specifies how overflowed content that is not displayed should be signaled to the user we will discuss later and Unicode binding also discuss later vertical align, white space, word spacing so we discuss word spacing… what is this alright word spacing is that if you have words like this, is between that how much you want to make space between that so this is word spacing and i assign value to 6px alright… here i will refresh it now look here.. space between words is increased now as i extend its value here i assign 16px 16px value save it and refresh here… now look here space between words is increased now so this is text document that how can we style our text and i will share slides of lecture you need to take a look for a once so this was our last topic of this lecture and we will meet in next lecture i have made shorter video so that you can understand better and complete task as well we can make many videos but my time is very short and your as well so that i am trying to wind up quickly our front-end then we will move back-end Allah Hafiz…. And in the end you must watch your task and submit as well Allah Hafiz so this is very simple task in this task, i have made simple box model just use padding to top and left side as well alright… i have also use outline and then a border i have added content in box and i have assigned margin between that i have written in div and also i have created a link ‘how to do this’ this one and i have changed its text decoration this is very simple task if you face any issue then you can discuss ok we will meet in next lecture… Allah Hafiz

3 ways to add CSS to HTML – Basic CSS3 Fast

3 ways to add CSS to HTML – Basic CSS3 Fast


Hello everybody, welcome to the CSS3
course. Actually, when we want to join the CSS file to the HTML file, We have three
ways to do so. The first one is known as the external stylesheet. So suppose I
have such an HTML file. And for this HTML file, I’m able to get this output. If I
want to decorate the web page, I can simply open a CSS file. And then I can
put the styles onto the CSS style sheet And then I can simply link this CSS file
to the HTML file. So I can do something like this in order to decorate the web
page So I would like to say that in order to comment the code in a CSS file, you need
to use this pattern: slash, asterisk, and the content. And then we end the comment
with an asterisk followed by a forward slash, okay So I can change the body font size
to 48 pixels. So in order to see the effects, I can go to the view menu.
And I choose horizontal split. And then I click on index on HTML file, and I’m able
to show both CSS and HTML files together on the same page, okay. So the body is
referring to this element shown here. So the characters inside the body will be
having this font size: 48 pixels. So suppose I want to see the effects
directly, how can I do that? I can simply import the CSS
file to the HTML file in external manner. So how can I do that? I can simply set up a
link to the CSS file, which is having this file name: style dot CSS Okay, when
I simply enter the link that corresponds to the style sheet,
by using the link element, I’m able to see that the words are already changed
to a larger font size, okay. Okay, in addition to the font size, I can change
some of the things shown on the web page as well I can change the paragraph I can
just change the color of the font to blue violet I can also change the
heading color to this one. I mean the font color for the heading to be another
color I can also give the background color of
the heading to dark gray. And the font color would stand out a bit easier when
I use the dark gray background color for the heading I also want to change the
outlook of the unordered list So I can also change the numbers for my list into
the lower Roman style. So I will see Roman numbers 1 & 2 here, okay So I can
have a look at the list again. So the numbers are turned to lower Roman format.
So this is one of the ways by using the external stylesheet indicated by the
link element inside the head of your HTML file. So this is one way. And the
other way is by means of the internal stylesheet. How can I do that? I can do
something like this I can go to the head again. And inside the head element, I can
set up at the style directly So suppose I want to show you an example
about the color of the paragraph Okay, when I add the style inside the head
directly, I’m able to change the color of the text to coral color. And you can see
that at the beginning, the color of the font is blue violet. But when I apply the
internal stylesheet, I’m able to change the color to coral. It means that the
internal stylesheet is able to override the external stylesheet So the thing
inside the style element is known as the internal stylesheet. And the thing by
means of the link element is known as the external stylesheet. So we can see
that the color has changed according to the requirements mentioned in the
internal style sheet. And the third way of applying CSS rules to your web page
is by means of the inline style sheet. So what does it mean by that? I can simply
say something to the elements directly So if I want to change the paragraph
text to another color, I can do something like this on the opening tag of the
paragraph element Okay, you can see that the paragraph
corresponding to this text is changed to cornflower blue. We can see that um
the inline style sheet is even able to override the instructions mentioned
inside the internal style sheet. So this is an important property of the
application of your styles to the webpage So the important message is that
inline style sheets mentioned inside the opening tag of an element can override
both external and internal style sheets So we can see that the external style
sheet has the lowest priority when we apply the style sheets Okay so this is the important message of
my video. The external stylesheet has the lowest priority. And the second-largest
priority comes to the internal stylesheet shown here. And the most
powerful styles comes from the inline style sheet. S we have to remember this
order in order to understand the mechanism of applying the styles. But
if we really have the chances to access the CSS file, we are suggested to simply
change everything inside the external stylesheet. So external stylesheet is the
most recommended approach. The reason is that people would like to maintain these
HTML file to just putting the elements onto a web page. If you want to change
their appearances, you can just concentrate on your declaration of your
web pages by using the external stylesheet. So this is an … another
important message If we have the privileges to access the
external CSS file, please use an external stylesheet as much as possible. Sso this
is the end of the video. We are able to see the ways to apply the CSS files in
all the three ways. 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