Transcripts
1. 0 CSS quickstart Introduction: Hey there, welcome to the QuickStart guide
to applying CSS. Styling your webpages
for beginners. My name is Lawrence.
I'm gonna be your instructor for this course. I come to with many years of
web development experience. I really enjoyed working
with CSS because it really gives you an opportunity to design and bring your
webpages to life. We're gonna be covering all
of the common syntax of CSS. How to add CSS and create a style sheet into
your HTML page, selecting page elements
and then applying different styling properties
to those page elements. Setting backgrounds of colors, background images,
what the box model is, setting up the different
margins, padding, borders for the page elements
that you've selected, how you can update the
text and fought styles, including different
font families using Google Fonts and
importing fonts from external sites using
the display property and how you can display
the page elements, positioned page elements,
floating the page elements, pseudo-classes work
and pseudo elements, and how you can apply
those within your design. We're also going to be
covering how you can create basic website templates
using CSS floats, CSS Flexbox as well as CSS grid. So all the modern
techniques that you need to know in order to create
websites from scratch. That's all coming up in
the upcoming lessons. There's also a downloadable
resource guide that's going to include the source
code as well as Handy Links, tips, and resources to help you along as you go through
the lessons of the course. One of the best
ways to learn is to try the code out for yourself. Don't be afraid to
give it a shot. Try it within your own
editor and see what happens. I know you're excited
to get started. Let's get started with
CSS in the next lesson.
2. 1 Adding CSS to Page: It to be covering how to add CSS styling into your HTML page. Also how you can select
elements and apply some simple properties values to those elements in order to have them rendered it
within the web page. Css is not a programming
language like JavaScript and it's not a markup language
either like HTML. Css is a style sheet
language and the purpose of CSS is to take a plain
HTML structured page, select the page elements and apply styling to the elements. I've got a basic HTML
page and we're gonna be adding some styling
into the page elements. There are several different
ways that you can add styling into the page, so you can add it directly
within the style tags. Select the element
with a tag of header. I would specify
the element first. So this is the selection of the element that we wanted
to apply the styling to. Then apply the styling
properties that we wanted to set the color of the text
within the header element, we would specify color to red. Then we satisfy a value, which is going to
be a value of red. So what that did is that transformed text within
the header made it red. Styling can also be applied
directly within the element, within the style attribute, specifying the style attribute. And here we're going
to set a background. Color. Styling properties
are going to be the same and then we just
assign a value to it. So I'm going to
assign a value of black to the styling properties. So we're setting
for this element the style property of
background color black. What that does is that transforms the background
color to black. What are the main
disadvantages of placing it within your HTML is
that it's hard to find, hard to update, and you need
to go through the elements. And what happens is when you
set it as a style attribute, then this is
actually going to be overriding the other styling properties because this is going to be coming to the
closest part of the element as it's directly
within the attribute. So if we were to
update this to black, what happens is it's actually
going to be overriding the style header whenever
we change this to, it doesn't matter because we're adding another style
property to it. In order to be adding it directly within
the page elements, you should avoid adding it as a style attribute
directly within the page element and make
a selection with it, either using within
the style tags or within the style sheet, which is the best practices as when you are adding
it with the style sheet. There's a lot of advantages of making it really easy to update, share the same styling across multiple HTML pages and
what a style sheet, a separate file that's
going to contain the styling for the HTML page. And this is a file
that gets linked to from within the HTML text. We've set up a link tag
and then using the HRF, linking it over to where
the style sheet is located. And then using the REL attribute in order to assist is
going to be a style sheet. Let's go ahead and
we're going to create a brand new file. I'm going to keep it
within the same directory. And that's where we're
gonna be applying the style sheets and the style properties to the page elements
of the HTML file. I've saved it as style CSS. And then let's link to
this CSS the same header. And then we're gonna apply
a color to that header. So let's update that and set the color to the
text to be read. So now that we've selected the element applied
using the style sheet, updating the page element
with a tag of header. And that's changing it to be red because we're gonna be working
off of the style sheet. And this is gonna be
the separate file that's going to
contain all the CSS. If we were to create
a second HTML file, we can link to the
same style sheet. If we create a second one
that's called index two, and we go over to
the second page. I'll make an update to
it so that one will say two and the original
one will still say one. Now if we want to select and update the header on both pages, all we have to do is
make an update to the stylesheet that they're
both gonna be linked to. And now that's going
to be applying the blue color to both of the headers across
both of the pages because they're both linking
to the same style sheet. That's the benefit of using a separate style sheet
in order to make updates to the styling
that you can really easily linked to it and
make updates to it, which is going to go across
all of the files that all the HTML files that are linking
to that particular CSS file. The CSS starts by
setting up a selector. So this is going to be the element and the
element that you want to apply that
particular rule set to. This can also apply to multiple elements
so that the same. So if we're selecting all of the elements that
are list items, this will apply it to
all of the list items. When we select the list item, we see that the bullet
points now are all blue on all of the list items. You can also apply it
to all the anchor tags. And now that's updating
the text on both of the files to be blue
for the anchor tags. And that's the selector. The selection processes
what's known as the selector. And then once you
made the selection, the next is you select the
property that you want to use. In this case, we're using
the property of color and we're setting the
property value to be blue. So changing the property
value will apply different value to
that color property. And both of these
together are gonna be what's known as
the Declaration. We're declaring the color
property to be set as red within the anchor tags selected from the
webpage HTML file, you can add multiple
property values into the rule-set
within the selection, within the curly brackets. Just adding in a second line, I'm going to set the
background color and I'll update the
background color of these to be black. It's going to get
applied to all of the matching elements that
are matching that selection, where we're using the
semi-colons in order to make a separation of those
different statements. Even if we were not to
have separate lines, this will still work as long as we've got the semicolon that's separating out those property
values to separate it out. So it is more readable within the CSS file where we're
setting it to a new line, the CSS property, name and
value separated by the colon. So go ahead and
create an HTML file. You can add in a number
of HTML elements. Apply styling, create
a new CSS file, select some elements on the
page and apply some styling to those elements and you get ready to move on to
the next lesson.
3. 2 Element Selection CSS: It'd be exploring how
we can make selection. So selection is
key to picking out the page element that you
want to apply the styling to. You can use either the
tags, the ID's classes. You can also do a
combination where you've got the elements ends specifying
the class selector. There's also a wildcard, so this gets applied to
all of the page elements. You can also group the selection process by selecting multiple
page elements, various selectors and comma
separating out the selectors. In order to apply styling, you need to make a
selection of the elements. We've got a number
of different page elements on the page, and we're gonna be making
selections of those elements. So first off, you can
select it using the tag. So whether it's the div, the header, the nav, the unordered list
or the list item. We can select it using the tag, and this will select all of the page elements that are
matching that selection. So for instance, if we
want to select the nav, Let's go ahead and work
to make a selection and then apply the
properties to that. I'm going to update the
background color property of, of the page elements
that have a nav. And we'll set the
background to be yellow. Within the visual
area of the web page, HTML page, we can see that the background goes
yellow to the nav. Let's select the list
items and we'll also apply a background color
to the list items. I'll select it and set
it to a blue background. What we can see happened here is that the knob which
is the parent of the unordered list
and as well as the list items gets a
background of yellow. But because we've
applied the background specifically to the list items which are nested
within the parent. We see that we get a blue background being
applied to those elements. You can also select
elements using their IDs. So let's go ahead and we're
going to add in an ID. We've got several
divs on the page. And this is another
way that we can distinguish block of code that we want to apply styling
to want an ID of one. So we can select
that element using the hash and specifying
the ID name. And I'm going to apply
a background color to this one as well. And we'll set this
one to be red. We see that this
particular div now has the property of
background-color being read, being applied to it. If we were to select all
of the divs and apply a background color of
Bij to all of the divs. The one that has
the selection of the element with the ID
of one still is red. If we move this
property down below, we see that it's still red
because we're more specific on the IED and applying the
background color of red. And if we were to
remove this div is also getting a
background color of beige being applied to it. Another way to make a
selection is using the class. We do have a div with
a class of wrapper. If we want to select that
element with a class of wrapper and set a background
color to that element. And this is gonna be the
parent of all of the elements. Select this and set
it to be purple. So now all of the
elements are going to get a background
color of purple. The ones that are nested
inside of the wrapper are gonna have different
styling background color is being applied to them. And that's going to result in this type of effect where we've got the parent getting
the original color, the children within, also setting different
colors for them. And that's affecting
how it's being output. You should only have one
element with a particular ID. So this is a unique
way of making a selection of the page element. When you're selecting it
with classes or the tags, There's possibility that there's more than one element that's
gonna be represented. If you want to be really
specific with the page element, you can select it
using its properties. And we've got an unordered
list with the list items, and they've all got
anchor tags inside. So if we want to focus
in and list item, I'll give it a
class of highlight, and I'll also give the second
one a class of highlight. We want to select all
of the list items by adding the highlight
class allows us to make the selection of those
elements that we can do when we're
selecting the list items, join it together with
a class of highlight. Set the background
color for these, set the background
color to be green. Now we've selected
these page elements and apply to a background
color of green to them. So these are the list items with the class of highlight this styling us to 0 in on those elements and apply
the styling to it. We can also select
using the wildcard. And this is gonna be
something that can get applied to all of
the page elements. If we want to set a color
of pink to the text, the wildcard selects all
of the page elements. In addition, we can group selections together
by commas separating. So let's go ahead and
we're gonna go back in and add several different IDs, and we'll add one more
element with an ID of three. And if we want to select all of these matching
elements on the page, we can comma separated out. So selecting the element
with an ID of one, ID of two, ID of three. And then also let's select the element with a
class of highlight. All of the matching
elements are going to get this property
applied to it. This is how you can
group the selection, selected elements
with an ID of 123, and also the elements with
a class of highlight and apply a color of red
to those elements. Soul of the matching ones
now have a color of red. The rest of them are pink. And I'll actually
update this to be white because we've got background colors
for all of them. And that's how you can group
the selection process, select multiple page elements and apply the properties
to all of them. So go ahead and try
to create your HTML and make a selection
using the tags, the IDs, and the classes. And you can be ready to
move on to the next lesson.
4. 3 Setting Colors and Backgrounds with CSS: This lesson is all about
colors and the different units of colors that we can
add to the background. And that's the background of the page element
that we've selected, as well as the color which
is going to be affecting the text color of the page
element that's been selected. And then how you can add
images to the background, the shorthand for the images, and then the different types of color values that we can use, such as the RGB, the hex value, the RGBA, or just the named
values for the colors. That's all coming
up in this lesson. Let's go ahead and
make a selection of some of the page elements. So we'll select the element with the tag of article within the selection and then apply some properties to that element. So selecting that element
that we're gonna be applying a background color in order
to set a background color, we use the property
background color. Then from there we can
select the various colors. Colors can be added using the color names and most of
the typical color names. So just being listed
within the editor. And these are the commonly
used color names and you can specify the background
using the color name. Let's select another page, elements and we'll select the element with
the ID of three. And there's a lot of
different options for setting the color values. You can use the RGB values, so that's the red,
green, blue values. This is done by
indicating the RGB. Then the parentheses,
setting a value from 0 to 2550 being the side 0 would be representing
the amount of the color that
we want to apply. So 0 is the lowest. If want to apply as much as
possible to the red RGB, we would set it to
255, which is the max. We're going to set 0 green and 0 blue to the element
with the background, with the ID of three. That results in a red color like the element
with an ID of one. And do a background color, use a hex color value. So hex values are six character values
within a hex format, indicated with the
hash in an order to indicate the hex value
that we're gonna be using. Similar to what we saw with RGB. The first two characters in the heck's going to represent
the amount of red. So starting at a value of 0 is 0, which
would be the lowest. And ending at a value of ff, which would be the highest
value for the hex. We're gonna do the same
as we're replying 0 green and 0 blue to
the background color, which has also going to result in the red background color. There's also an
option for a RGBA. Rgba allows us to set
a transparent color. I've created another element
with the ID of four. And we'll select that, apply background color to the element with the ID of four. And this time
instead of the RGB, will use the RGBA. And that's gonna be
indicated with RGBA. And the last value within
the RGBA parentheses is going to indicate
the amount of transparency that we're
gonna be applying to it. So 0 would be applying 0 of
that color, the element. We see that this is the
element with the ID of four. So there's no color that we visibly see that's
being applied to it. We can go all the
way from 0 to one. If we do a 0.5, that's 50% of the content being applied to the alpha of the color block. And that's where we get
this lighter shade of red. And this is actually gonna
be transparent by 50%. So if we had an element
or content underneath, we would get that
value being shown. If we were to set a background
color for the body, and I'll set the background
color to be blue. The results for
the RGBA is going to be resulting
in a purple color because it's shading the 50% of the color using the background, which is blue, and using 50% of the RGB
color, which is red. And that's gonna be
resulting in a purple shade. If you update the RGB a21, that's gonna be no transparency, and that's gonna be
the full color value. And that's where we're
getting a value of red being applied to it. So when you are using the RGBA, what's underneath and the
colors underneath are gonna be, gonna matter as to what the colors are
that are being used. There's also where we can
set the color of the font. So let's select the color of the font using the
color property. For this, we can apply a
color value to it as well. This can be either the
named color values, RGB, RGBA, an addition to the
hex values for the colors. There's also a property
that you can use to add opacity to
the page element. Much like what we saw with RGBA, where this is all within
the one statement and set a value for that. And if we set the opacity
value for the element, what happened is that
we did get the opacity, but that was applied to both the font and the
background color. So that's where the
font is gonna be. Slightly blue because the
font is also getting that 0.5 opacity applied to it as the background has the
0.5 OPC applied to it. That's going to now match with
what we've got with RGBA. So you can use the opacity to apply opacity
to the background. For backgrounds, you can
also add and use images. And then we need to specify
the URL of the image within the parentheses do have an image located directly within
the same folder. And that image is going to be
called local one dot JPEG. And when we apply the
background image, we see that what
happened is that now the background of the body has the image
contained within it. That because the image
is going to be smaller, then what we've got to
cover the full background. That's where we get this effect, where we've got the repeat on the vertical as well
as the horizontal. If you set a image that's
gonna be transparent. So this is a transparent
version of the image. We see that now we've
got the background is showing because the image is being placed on
top and we still have the background color of
blue showing beneath it. So if we were to
make any updates to the background color, setting it to a grayish color that's going to result in the background is still showing. But because we're
using a PNG file, That's going to be
transparent and we can see through the image
to the background. You can also control
the background for the repeat of the
background image that up if you don't want a repeat
or a feeling you want to repeat on the horizontal
or the vertical. Let's shrink down
our view to 100. And this way we can see the repeat within
the display area. Using the background repeat, we have an opportunity to set
how we want it to repeat. So we can set it to repeat x. And what that will do
is that's going to repeat it on the x-axis. If we set it to repeat why? That's going to repeat
it only on the y-axis. So only you just have
the one image and that's being repeated all the way down within
the page element. There's a number of other
options for the repeat, so that as repeat and that's gonna be what
the default is, where we're setting it and
it's repeating as cross the entire page. No, repeat. So that's not going to
repeat it both on the vertical or the x axis,
the horizontal or the x. So it'll only show
the one image. So let's say you can
control how the image is being repeated within
the background. If you are only
using just the one, you can also set a
background position. And the background position
is a property that's used to specify the position of where the background
image will be set. So we can position
that from the left. We can also do left, bottom. There's also right and top. That's gonna be positioned
in the left bottom. This is gonna move it over to the right bottom and then
there's the right top. And because we don't have a
lot of content in there and the top are gonna be the
same if we make it larger. And if we move this
down to the bottom, that we're gonna
be able to see the actual positioning
of the bottom. So now it's positioned at
the bottom part of the page. So it sets the starting position of where we're
setting that image. There's also an
attachment value. So if we set it up at
the top of the page, the background
attachment and what this will do is this
is going to set the property that's
going to specify whether the image should
scroll or be fixed. So that's the attachment
and there's a fixed or a scroll position. So at the fixed will do is
it's going to fix it in place. So even if we're scrolling, it's going to keep the background
image in the same spot. So it's not going
to be scrolling where we're scrolling
with the page content. If we set it to be Scroll, which is the other option. Now as we scroll, the image will move up as we
have less space on the page. And if I was to make
it even smaller, would see that as
we're scrolling down, that image moves
with the scroll bar. There's also a shorthand
format for all of this that out when we can set
all of these individually, but we can also set
this as a group. And what I'm gonna do is
I'm going to comment out the properties
here, removing it. And you can make comments within style sheets by using the
forward slash OS strikes. And then when you've
completed the comment, you just do the asterisks
and the forward slash and that will break back into and break out of the commenting. So let's go back to
the backgrounds. And we're going to set this all within the shorthand format, setting up the color, the image, the repeat, the attachment,
and the position. This is all done within the
one background property. You can also use just the background and
set a background color. This will also work. You don't have to add all
the other property values. If you want just a
background color, you can use the
shorthand instead of writing out background color. From here, you can add in additional values
into that property. You can set the URL just as we did with the background image. There's the image being set. The next option is the repeat. So if we don't
want it repeating, we can specify no repeat on it. Same as these three
lines of code. We can also set the
right top position, can set the scroll, and by default it's
going to be Scroll. So let's set that to be fixed. So we're fixing it in the right
top where scrolling down, that image is now fixed to the right top
position of the page, not moving with the scroll, which is the default action. And this is just a shorthand
method that you can use in order to set all of these properties and
values within one line. So go ahead and try it out. Update the colors of the font, as well as the background
colors of the page elements. Try at the RGB, the hex, as well as the RGBA, and then set an image to the background and
you'll be ready to move on to the next lesson.
5. 4 Box Model Border Margin Padding: So let's just gonna be covering the box models as
different parts, being the border, the padding, the margin, and the width and
the height of the elements. So the dimensions of the
element for the content, and as we can see in
the right-hand side within the browser, they do have a computed
representation of the box model as well as the visual within the
webpage at the top, we're gonna be making
adjustments to the padding, the border, the margin, and
the content dimensions. So let's say we're gonna be
focusing on the box model. So the box model is a term
that's used when we're talking about the design and the layout of the page elements. So every single
element on the page, it will have a representation
of the content. So the height and the
width of the content, the padding of that content, There's a border that's
going to wrap around it. And then the margin is
going to be outside. And that's going to represent
all of those elements, different parts
that are going to continue within the box model. If you are using
a Chrome browser, you can select an
element, do an inspect. And then within the Inspect, if you scroll down
to where we've got the styles and the
computed styles, it will give you a
representation of that particular
element's box model. So we've got the margin, the border of the padding, and the default width
and the height. So there are additional margins that are added because
of the block content. Let's take a look and we'll
make some adjustments. First off, we're select the page element that we want
to apply the styling too. And that's gonna be the
element with an ID of two. And we'll set a border
so that we can see the boundaries with
the inner content. The border can be set
using the border width. There's also a border color
that we need to sort. And then the border
style property. This can also be done as
one shorthand for this afterwards that allows us to apply the border around
the page element. Now within the box model, we've got a border of one. I'll make this slightly smaller, so we do have it
zoomed in fairly big. So I'll make it smaller so it's easier to see it
within the screen. And then that way
we can also see the box model that's
associated with it. There is a way to write
this as shorthand. I going to afford
slash and comment out this and you can
just do it as a border. So most commonly you
will see it written as border because
without all of these, you're not gonna see
anything for the boarder. Set the width of the border and set the style of the border
and the color of the border. It's going to allow
us to apply that. We can update these values. So if we do a five
picks for the border, that's also going to update
within the box model. And we noticed that within
the element itself, within the border, the
padding is contained there. So let's add some padding
to that page element. You can set the padding
just as we saw before, where we can do a
padding top and set a number of units that
we want to do the plotting. You can also do padding bottom, and that's applying the
different paddings to it. There's also the
padding left and right. Set the padding left to 15
picks and set the padding. Great. So that's supplied the padding. The padding is on the
inside of the border and outside of the content
area for the content itself. Let's set a width of 200 PECS, and we'll set a height
of 200 picks that will change the dimensions
of the main container. And I'm actually going
to set this to be 100 so that we can still
see it visibly on the page. Now that has updated. Whereas when it was just
the default styling for the element that was taking
the properties of the div. So as we resized, it was taking the entire width across the available
width of cross. Now we've got a set
height and width. Just as we saw with the border. We can set the border
padding properties within the shorthand format. That's gonna be all done
within the one line. When we're setting the padding, the first set of padding. If we set a padding of five pix, That's going to apply five
picks all the way around. We see that it gets
applied to the top, the bottom, and the
right and the left. If we can set a
another value there, this is going to be
setting the top and the bottom is going
to remain at five. And the left and the right are going to be getting ten pics. So if you have two values within the shorthand
for the padding, it's going to apply
it to top and bottom first and then right
and left next. If you add in three values
within the padding, it's going to use a
clockwise type format where the first value
is applied to the top. The second value is gonna
be applied to the right. The third value is
applied to the bottom. And because there's
no fourth value yet, then it's gonna be applying the left and the right position. So that's gonna be
applying the left and the right padding the same. So it's gonna be ten
padding for both of those. Then lastly, we can add
in a fourth value there. And that's going to allow us
to apply padding to the top, the right, the left, bottom, and then the left side. And you can see that being
represented here and rendered within the box model. Let's also look at what we
can do with the margin. So just as we saw with
the margin, margin, top bottom value, was her gonna be added
into the box model. The take place within the page. And we also have the shorthand method that
we can use on those. Let's set a background
color for the elements. So setting a background color, I'll set it as read. This way we can see where the boundaries are
of the page element. Notice that the red color
is going to be contained within the padding as well and everything up
until the border. But then outside of the
border for using the margin, that's not gonna be
added to the element. That red color is not gonna
be added to that element. Setting up the margin. And just as we saw
with the padding, and we'll start
with the 20 picks. That's going to add a
margin for the top, bottom, and all the way around. If we do ten picks as the next value that's going to be for the left and
the right values. So just as we saw with padding, the margins are going
to work the same way. Then I'll add in the
other two options. And now we've got
separate padding and separate margins for all of the sides of
the page element. Typically we do use the shorthand methods
for the padding, for the border and
for the margin. In order to apply the styling
to this page elements, go ahead and try to
make a selection of a page element and apply updating the box model property
values to that element. And you can be ready to
move on to the next lesson.
6. 5 Text and Fonts CSS: We're gonna be covering
the various ways that you can update the font. So that includes updating the capitalizing
using the transform, updating the decoration, so underlining and removing
the underlying, adding a shadow indenting,
line spacing, line-height, updating the font size using the shorthand method for the font size and
the font family. Also how you can select from Google Fonts and bring
those fonts families into your web page using the line-height to center
the content vertically, as well as using the
text align and aligning it either to the left,
right, or center. And all of the commonly
used font properties that you would encounter with CSS are coming up
in this lesson. Let's go into our HTML. We're gonna select the
element with an ID of two, and then we're going to add
a border around it and apply some updates to the properties
and the styling of that. Set the border. And I'm going to set a pick, one pick border and make a red border around it so
that we can see the page, the content on the page, zoom in so it's slightly larger. Let's make some
updates to the text. In know with the text, we can set a color. The color is set using
the color value, and that can update
the text color. There's also other
properties for texts, such as the text align. And that allows us
to either to center, to justify left, right. So there's a number
of different options. If we set it to right, what happens to the text is
that it aligns to the right. And by default it's
aligning to the left. You can also center
align the text and that will center align that
text content within there. I'm also going to be
adding in some margins. So it's not exactly directly
right on the border. And I'll make it
slightly larger. So do a padding of
the page element. We can also add in some
margins if needed, that can highlight it a little bit better where we're
seeing where it's aligning. Notice that the
alignment is taking place to the end of
where the padding is. If we were to set it up as left, we still have the padding
on the left-hand side. Bring it back to
center and save that. There's also a justify. What they're justify
it will do is it's going to spread that
out more equally. So it'll look like
the text's content is spread equally from
the left to the right. In this case, because the second part of
the sentence ends, it's not able to adjust text for the equal width for the left and the
right and margins. But if we were to add in
additional text into it, I'll just duplicate
the text content that justify now is
trying to equally spread out the content
between the left and the right side text decoration. And there's a number
of options for this. So there's an underlying,
there's an overlying, a solid none is the default says no
decoration on the text. Although if you are
using an anchor tag by default that there are
decorations on those. Let's do the underlined
for the text content. Then we'll select
the anchor text and do the text decoration. If you want to remove out the default text decoration
of the anchor. And you could set those to none. And that's gonna remove out those default text
decorations line through that you can do this. We'll do the line through
the selected text. There's an overlying option
that will place the, if the underlying
it'll overline it. So place the line
over top of the text, can transform the text using
the text transform option. If you want to capitalize the texts which it probably
already is capitalized, you can convert it
all to lowercase. You can also convert
it all to uppercase. Select the anchor tags, and update these all to be uppercase text that will
uppercase everything. I'm going to select
the header content. And we'll capitalize
the header element, selecting the text transform, and then capitalize and
update that to be lowercase. And then the display
is going to be showing it as capitalized texts. Such as you can do a text shadow and that
provides a shadow effect. Need to specify where you're
positioning the shadow. So setting it up as four pics for Pix over and then
four peaks down. So that gives us
the shadow effect. And then the green
is the shadow color and the text indent. And then specifying how much
you want to indent the text, which will indent the text. Starting out what the
first character is. Within the selection
letter spacing can be used to identify the space
between the letters. So that's the letter
spacing property. And this is expecting
a unit value. Setting up the letter spacing of ten picks will space
out the letters using the values there for the ten peaks
between the letters. And also select the line height. And the line-height
sets the height of that particular line of content. Beat up. By default, it is set to whatever
the font sizes. So you can set it to a
different line height that will space out
the spacing even more. You can set a font size
and the font size can be either an increment or
it can be set as a value, either the picks, points, EMs. So any one of the units
that you can use, I'm going to just use the pics and set this to be 20 picks, which will make the
font size larger. And if you don't have
the line-height, the default line height will
be set to the 20 picks. Also use the line-height
to vertically center. So if you just have the one
sentence within the wrapper, we've got the header, the div. So let's make a
selection of elements. So header div, setup a height
for this element and that's gonna be set to 100 picks
horizontally center the text a lot in a border. And if we set the line
height to 100 picks, now that will now vertically center the text
within the element. You can also set
the font to use. So that can be set using the font family and that
will update the font. These are the default
fonts that are showing up within the editor. So you can select from those, and those are default fonts. You can also get fonts
from external sources. I typically will use Google fonts in order
to select a font. And this is a website
that you can go to select fonts and bring
them into your project. Going down and there's over 1400 fonts right now at the moment that
you can select from. So you'd go through here and select the font that
you wanted to use. And I'll select this one, make a selection of the font. It's going to give you an example of the
way it's gonna look. Select the view selected fonts. And now you can suck, get the code to bring
it into the font. There's the CSS for the font. We can go and apply that to our web content setting,
the font family. They also need to
bring the font in. And it shows you how
you can do that, where you can link
to the style sheet. The best way to do it
if you want to do it directly within your CSS file, is you can do the import. Import will allow you to
bring it in to your CSS file. Any of your HTML
that's linking to the CSS file will then have access in order to use dot font. Now when we look at
the company name, it's set within this font that we've selected
from the Google fonts. Let's update the font size. I'll make it really big, 23 EM. You'll also have
an option to set the different styles,
different font styles. Gonna go ahead and select the font styles within
the anchor text. And there's options by default, you're gonna be
using the normal. You can set it to italic, which is going to angle it slightly over to the
right-hand side. You can also set a font-weight and there's a
number of increments there. You can set it to
bold, bold Earth, and that will just
bowled the font content that has been selected. You can also do this
as a font shorthand. I'm going to go ahead and select another page element where
we've got the ID of one. So select that page element
and then we'll apply some different
properties to those. Set that up and I'll add
in a border so that we can see where the location
of this page element is. So that's the one that
we've selected down there. Let's add some padding to it. Also update the font size. It's a really big font there. The font shorthand. We can apply some different
sizing properties to it. So instead of using
the font size, can bring that into
just under the font. Because you do need to
have two properties, which is the font size
and the font family. So if we wanted to
update this and include the font family that we
brought in from Google. Could do it within
this type of format. And now that's
going to be applied and we've done it within
a shorthand format. You do need to have the size
and also the font family. And you can add in
additional ones, such as the italic. So that will italicize the font. Adopters provides a simpler way that you can write out
that font content. These are some of
the commonly used font properties within styling. So go ahead and try to
make some selection of the page elements and apply the various styling
properties to the elements. And you could be ready to
move on to the next lesson.
7. 6 CSS element Display: This lesson is
going to cover what to display property does and the different values
so commonly used or block inline and inline-block, as well as display none. So how they're going
to affect the page elements and then the difference between visibility
hidden and display none, and how they're gonna
show up on the webpage. The display property is one of the most important
CSS properties that you can use in order
to control the layout. So by default, some
of the page elements, such as divs, already
have a property to it. And that's the display property, whether it's gonna be
a block or inline, when you are creating
at page elements. And I'm going to
create a couple here where we've got a div. And then within the div, I'll add in some spans. Spans, what they do is
they're inline and that means that the not gonna take
up a new line of code. So by default the
spans are gonna be inline and the divs are the ones that are
gonna be taking up the full block of code. If I was to update and
to wrap that first word, mine with the new
line with the div, it's going to move it over
and set it to a new line, whereas the spans are
going to be inline. Let's make a selection
of those elements and we'll make some updates
of those page elements. Selecting the header that has
the div that's immediately underneath it that you can use using the greater than sign. I'm going to select a border. So ADA, one pick
solid black border to that selection of
the div and then the contents that are
contained within that div. I'm going to update the spans, selecting the spans that are
contained within the div. And this is going
to apply to all of the spans that are
contained within this parent element and set the display
property to be blocked. What happened is that the spans now got the same display
property as the div, where they're going
to take a new line, add in a border. Now they're gonna be
going on a new line, setting the display
property to be inline. And because we don't have another element
that's inline to it, that's why it's not setting
it next to each other. So let's go ahead and we're
going to update the HTML. And we'll have the
two values there. And these are both
going to be divs. And now these are divs
that are gonna be inline. I'm going to also add a border
around them so that we can distinguish them in the
visual area of the page. So set them up as blue. So now that the divs are inline, the spans are blocked. We can see the
difference between the two block-level
elements start with a new line and they will take the full available width
from the container. If we were to update the width that's available
within the header, which is the parent container. And we set a width of that. And I'm going to set
that to 200 picks. The blocked containers, that block display elements are going to take the
full width of that. There's also a display, none. So I'm going to select
the nav element and update that
display property. So that's gonna
be the hyperlinks that we have on the page. And I'll set that
to display none. So what happened is that
that actually disappeared from the page and it's still
within the source code, but the display, none
simply hides it from view. This is actually
going to be different than visibility none. So let me bring that one
back and I'm going to select the element with the
one to hide that one. And then we'll select the
element with an ID of two and use visibility and set
the visibility to hidden. And the difference between the display none and
the visibility hidden is that the hidden is still going to take up
the space on the page, whereas the display
none completely removed that page element
from the display area, the background color of it. So it's more visible. Then we'll hide it once again
using the display none. So when I update this
to say display none, it's going to disappear that yellow block from the
visible area of the page. Let's go ahead and
we're going to select the list items on the page will update
some of the properties of the list items on the page. So unordered list, list items. And what we wanna do apply to
the list items are going to update the display
and I'm going to set the display to be inline block. When we do that, what
happened is that it still retains the properties
from the unordered list. There are some
default properties. That's why it's indented. But with the display none, display inline block, those allowed us to align
those horizontally. And that's how typically the navigation menus are created, where we've got an
unordered list and we clear out the items from
the unordered list, the default properties such
as the margin and padding. So removing that will bring
that directly in line. I'll also set the
border so we can see the entire unordered list and set the border one
pixel solid green. That's taking up the
full block space. But we've removed out the margin and the padding that allowed the list items to align
to the left inline block is gonna be slightly different
than what we have with inline color for them so that we can see where the boundaries
are of those elements. So that's gonna be
the inline block. And if I switch it to inline, see there's a little bit of extra padding that's going to
be around with the blocks. So a little bit of extra spacing between the inline,
inline-block. So there is a slight
difference between the two, and there's gonna be a
bigger difference if we take the padding and if we add
padding to the elements. Once we add the padding to that, which it to just inline. Inline elements are not going
to take the parent sizing. So you see that when we're
just using the inline, although we're able to apply the same padding looking at the parent of
the unordered list. Now that's gonna be smaller than what we've got
for the sizing. So we do need to get those block properties
using the inline block. So it's a combination of between the inline
and the block. And it allows us to take the full height of
the parent-child, the display, none inline block, inline-block display
property value. You can be ready to move
on to the next lesson.
8. 7 CSS Element Position: Positions specifies the type of positioning for the element. So we're gonna be looking at the commonly used ones such
as the relative, the fixed, the absolute sticky,
and how you can use those to position
page content. And then as the page content
scrolls see a difference in the behavior between
the various elements that have the
different positioning properties applied to them. With that position property
were able to select an element and set its
position on the page. So let's go ahead
and we're gonna make a selection of some
of the page elements. It will select the
navigation bar. For the navigation bar
allowed a background color so that we can distinguish where it starts
and where it ends. So it's gonna be
their navigation bar. And within the nav, we also have some
unordered lists and a bunch of list items, and then some anchor tags that are contained within there. Let's go ahead and
we're gonna update the position of this element. Set the position, and I'll
set the position to static. What static is
static positioned? It's not that it's
positioned in a special way. It ****** persons that according to the normal
flow of the page. So setting it to a
static position. And I'll make the
text a little bit bigger so that we can console. I'll also update
some of the content. So the article element
and I'll update the height on not that we are able to have
some scrolling for the page content with
the static position, that's gonna be the
default position. So there's no special
positioning for that element. We can use the
position relative. And the position
relative allows us to update the position
from its normal position. When you set it as just
position relative, it's still gonna be in line with the normal flow of the page. But using position
relative allows us to update the left
and the top position. So if I wanted to move
the entire element over to the right by 36, then this can be done
using the position relative with the
position static. It's going to ignore
that second property. So it doesn't allow you to
do the left or the top. So you need to set
position relative, which allows you to set
the other properties and position that element making adjustments to where it's
sitting on the page. There's also a bottom
position for that. If you set it to bottom 40 pics. So it's coming off
a bottom of 40, and that's coming off the bottom of the parent element off of wherever the
original position was of that containing element. I'm going to add in
to the wrapper class. And I'll set a height of
this to be 400 picks. And then we'll also do
a border around it. So one pick, solid block. There's our wrapper
so that we can see the top and the
bottom for the wrapper. If we select an element and
if we use the fixed position, this is going to
fix the element in the same place even if
the page is scrolled. We're going to go
ahead and we'll select the header element and set its position as fixed. And I'll also add a background
color for the settlement. Just set it up as a block. So that's gonna be the fixed
position of the element. And generally when you are
using the various positioning, also update the
color to be white. With the fixed position, typically you would set a width, so give it a width
and do a 50% width. Once we save that, we see
that we've got a 50% width. There's also a left
that you can set. Just as we saw
with the relative. The fixed allows us to position it in a particular
part of the page. This is going to be relative to where the screen is located. If we have a largest
size screen, then that's still
gonna be sitting within the Twenty-five percent. Twenty-five percent off
the top of the page size. So as we move it up, that element will
move up as well. I got to update this to be RGBA so that we can actually see the content that's underneath setting up at as
an Alpha version. And I'll give it
50% transparency. So we can see the content that's underneath the fixed
position element. Also going back to where
we set the bottom. If we set it to be 0, this could actually be the same. So zeroed bottom and 0 top is going to be wherever
the default position was. So as it was static, it would be still sitting
within that default position. Although we're not moving
it over left by 30, but the top position would
have been still the same. If we move it back to
relative and we update it, That's gonna be
updating where it was originally supposed
to be positioned at, and that's gonna be updating
that position value. There's also a
position absolute. This is the absolute
position and its relative to the position
of the ancestor. So it's not relative
to the viewpoint. So such as fixed as
relative to the viewpoint. The absolute is going to
be relative to the parent. Let's go ahead and
we're gonna select page elements and we'll select the one with
the ID of two. Actually select the
one with the ID of one and update that. We've got a whole
block of text there. I'll set a background color so that we can see
it on the page. To yellow. So it's going
to set that block of text to be yellow and
set its position. Set the position to be absolute. And I'll use the same positioning values
that we had there. Now it's being set as absolute. But the difference is
that as I'm scrolling, that fixed positions
still stays the same, but the absolute only starts
out to be in the same spot. I'll update the display
to be none of the NEF. And so when we default and we start that this
is going to be positioned at relative
to where the parent is. If we were to update the wrapper and if we
were to the margin, to the top of the
wrapper of 40 picks, that will also move it down and update where we're
fixed positioning it. As we scroll it, it's going to still
be in relation to wherever the main
page content was. Also update this to be taught and we'll set
it at 100 picks. And as well for the
top of the header, it would be a 100 picks. And I use an RGBA for
this one as well. And so we can see
how that one is moving differently than what we've got for the
fixed position. Because once again
it's positioned. And if the positioned
element has no positioned ancestors that uses the whole document body. So let's add in some
positioning to this. So if we set a position of
relative to the wrapper, from here we do a ten picks. This is now affecting where the absolute position
is being set. Because the Absolute
does set in relation. If one of the ancestors
does have a fixed position, then it will set it to where it's located within
the ancestor. There's also a sticky position. So select the element with an ID of two and set this to
be sticky position. Also set a background
color for this element. And it'll set this background
color to be green. Set the top 0 picks. And that element is
going to be sticky. And the sticky we'll
toggle between the relative and fixed depending on where the scroll position is. Let's reduce the size of the article and I'll
increase the size. So as I'm scrolling, we see the sticky is
gonna be switching. So for depending on
where the scroll is, the position is set, It's going to update
in the view area. So as I'm scrolling down, it stays sticky there. And then as I
continue to scroll, then it goes up to using the relative position
shift between the sticky, using both fixed
and the relative. Sure that you do
have enough content so that you are able to scroll. So you can see the
differences between the positioning and the
positioning properties. Values.
9. 8 CSS Element Float: The float allows you
to position content on the page so you can build
different columns on your page. What you can do with that, where you can position
it to the right or to the left-hand
clear the float for the following page
elements using the clear how overflow works with the float and
the floated elements, align them within the
rest of the page content. And how the float effects
the following elements that are siblings
of the elements that have the float
applied to them. So that's all coming
up in this lesson. Float is used for
positioning and formatting content, particularly
for images, as well as previously
used more for creating the page
layout and structure. Now we've got the CSS
grid as well as Flex, which we're gonna be covering
a little bit later on. Now we want to
select the image on, within the element
with the ID of one. So go through and make a selection and select the
element with the image tag. Let's go ahead and
we're going to apply some properties to that. I'm going to set a
width of 100 picks and actually I'm going
to use the max-width. So if the page
size gets smaller, and the way that max-width
will work is that the maximum width
that we're gonna see for this image is
going to be 400 picks, even if the page size allocates
and as allowed for more, and we're going to be sticking
with the maximum width. I'm going to reduce this to a 100 picks so that
we can better see the way that the floats
are going to work if one afloat this in line. So right now we see that
the image is going to be inline directly
with the content. But we're positioning
the content. We're not positioning
the content directly around the image. You can use floats in
order to fix this. So setting up a float if we want to float the
image to the right, That's going to wrap the
text around the image. Let's add in a border
for the image. So on pick solid and allowed in a red border so that we can easily see where the
image border is. That allows us to
add and half the text wrapping around the image. We can also float it over
to the left-hand side. That will do the same effect, but position it on
the left-hand side. You can also select the
list items within the knob. And let's apply a
float to those. Setup, a float of left
for the list items. And what happened now is that
we've got the list items, they're floating right
next to each other. And with the floats, you do need to apply a clear, otherwise the float property will still be applied
to the next element. And that's where we've
got this type of effect, where we're not clearing out the list items and where
we should be clearing out and having a clear in order to prevent it moving
on to the next element, we can set up a span. And within the span, Let's give it a class. I'll just call it clear float. And that way we can select the clear float for
the unordered list. I'll add a border around the unordered list so
that we can easily identify where the
unordered list ends in stops and
where are floating. We noticed that within
the unordered list, we're not getting the height of the unordered list.
The background. If we were to apply
a background color to the unordered list, and I'll just apply a background
color of black to it. It just comes across as a line because of the float that were floating it over to the left. If I was to remove the float, dot would cover the
entire elements. But as soon as we
float it to the left, that's gonna be taking
those property values and applying the float. I want to add in
the float clear. What this is gonna
do is it's going to allow us to clear the floats. We can clear the float left, we can clear the float right? And then we can clear
float and both. Usually, typically you're
going to use the Clear to float the declared
the both the floats. I'm also going to select the article and apply a
border around the article. And we're also going
to apply the class of clear fix to the a site. As you can see that
what's happening here is as we're floating
it over to the left, this element is still retrieving that styling to it to
float it over to the left. So it's if we do the clear float that will then
move the next line within the a site back to its default position over
to the left-hand side. If we update the overflow
of the unordered list. So if we set the
overflow to be auto, That's going to then
set the height and the dimensions of the parent
as we're floating it. So that's where we got
the full coverage for the black part that we're
allowed to select that element. And now it's taking
the properties of the float and prevent the element from overflowing it's outside of the container. So we can as well set
that to the element with the ID of one and do the same where we
can set the overflow. That way it will provide enough spacing for the element as we're floating the content over and still allow us to move to the next
part of the of the page elements can
use the floats in order to create columns
within your webpage content. So let's go ahead and
we're gonna create a main column area and set
up a few different divs. I'll just give them a class of col for column and
then give them different values
contained within the content so that we
can distinguish them. So these are gonna be three columns that we're gonna set up. They're all going to have
the class of CO L. And we're going to use floats in order to create a free
column good design. Going over to the style sheet, select the element with the CLL class and
add in a border. So that way we can
distinguish between them. Then apply a float. Lets flip them over to
the left-hand side. And notice that we don't
have the clear fix. That's why that content
is still being, The following content
is still being floated. We need to apply the clear
of the following element. So that's gonna be for
the one that will realign that as we're clearing out
the floats for the elements. Let's set the width for these, and I'll set it at 33.3%. The reason that we're
not able to do the full 100% is because the border, if we were to remove
the border than they would stock right
next to each other. There's also another
way to fix that where we can apply
the box sizing. And what box-sizing property
allows us to do is to include the padding and the border in the
boxes total width. So let's apply the
box-sizing property to all the page elements
and set the box sizing to border-box count
for the full padding as well, the border for the elements. And this is giving us the
ability to align them. I got to add in some padding for these elements and we'll also set a height for the elements. So that gives us some more
spacing around the elements. And that's how you can
create a three-column using the float. And as long as you're clearing the float from the
next sibling element. And also if you
have content that's overflowing the
floated elements. If we have the images contained
within each one of these, there's gonna be an overflow. So you can set the
overflow to hidden. That will hide any
overflow of the content. Or if you set it to auto, that will automatically readjust the height and allow us to scroll in order to see the full contents of the
element has been floated. So there are two
options that you can do with the overflow in order to fit the page
content in properly. So go ahead and try
it on your page and get more familiar with
what you can do with the float property and the different values that
are associated with it.
10. 9 CSS Pseudo classes: It's gonna be a fun
lesson where we're gonna be focusing on
the pseudo-classes. And what pseudo-classes do
is they allow us to make selections as well as defined
the state of an element. So typically used on anchor tags where
they've got the link, the visited, the
hover and active. You can update those
styling properties. It's not limited to
only those elements, the anchor tags,
you can place it on any element where
we've got the hover. So in case where hovering over, we're getting a red
border for the images. The other elements that were hovering over are
going light blue. There's also a can
make a selection. So first and lost child, you can do the nth child, which allows you
to do even or odd. You can do alternating
styling for the siblings. Also specifying the checkbox, checking to see if
it's checked and applying styling
when it is checked. And there's also the
focus pseudo-class, which updates the
styling properties when the focus is
applied to the elements. Pseudo-classes, you can define
the state of the element. So if the element, and this is typically done
when we're using hyperlinks. Let's make a selection of the anchor tags
and we're going to update some of the pseudo-class
properties for that. So typically we do have a
value for the link itself. And these will change depending on if it's
already been clicked. So this is a default
property of the hyperlinks. And if you want to change those, so all of these links
that we currently have, if we set them up as
a brand new link. So that means that the
Link hasn't been visited. We can set the property for the link and let's
update the color. That's going to mean
that if we have a hyperlink that
hasn't been visited, that will go red. And I'll update this to
have a different value. So now we see that the ones that haven't been visited go read. We also have links that
have been visited. So let's set a default
brand new value for the visited state of the link and update that and the ones that
have been visited. Let's set that to be green. That goes for all of the
other links that we have. You can also set a hover effect whenever you hover
over the link. So right now by default there
is no hover effect to it. So sometimes they're
going to do that. You've got the text decoration
and set that to none. So as we hover over it,
the underlying disappears. You can also update the
background color of the elements. So as we hover over them, Let's set them to read. And we'll set the color
of the text to be white. So that gives you this
type of effect that you commonly see within
the navigation menus. There's also an active state. So let's select the
elements and update its active state. And active. Let's set this as this type
of color for the active. What active means that
whenever it's clicked down as I'm hovering over it, if I press it, then
that's gonna go green. So that's going to
give us the active. Let's also update
the font size so it's a little bit more
visible as I'm pressing it. When it is clicked, it gets big. And then when I release it, it goes back to the
default sizing. So that's the active state. And those are typical
pseudo-classes that you might have, that you have for
the anchor tags. So it doesn't have to
be just on anchor tags. You can set it up on
other page elements. So for instance, I got
to select the images, are going to set the width of
the images to be 100 picks. And it'll set the height of
the images to be 100 picks. That will make them
a lot smaller. Let's apply a
pseudo-class to them. Whenever we hover
over the images, I'm going to select the border. And we'll set up a
border of three pecks. And it'll go read when
we hover over it. By default, let's add in a border for the
images to be block. Otherwise the images will
shift in their position. Whenever I hover over them. Now they're getting
the red background. It's also odd for the div
and a sudo for the div. So whenever it
gets hovered over, let's update the
background color and set this as the
background color. Actually, let's not set
that to the main div, but we'll set it to the elements that are contained
within the main. Selecting the element with
the class of wrapper. So it's gonna be
the main element and apply that to all of the elements that
are within there. So all of the child
elements within wrapper that immediately
within wrapper. Now we're going to
have that hover effect being applied to them. So that's all of
the main sections that we had within the webpage. You can also use the pseudo in order to specify
one of the child. So if you wanted to get the
first child of wrapper, you can specify the
first child element. So this is another
way that you can fine tune the selection process. Let's update the
background color for the first child
and set it to red. It's going to be the first
child of the wrapper. I'm actually going to go down
to where I have the divs. And I'll give this
a class of row, will select the first
child that's within row. It's gonna be a little
bit better to use. Within the row, we want to
select the first column. So we can do that by selecting the class and then selecting the first
child of the element. So it's going to return back the matching first-child within the list that are all going
to be on the same level. So all of the columns
are on the same level. That's where we're able to
select the first child. You can also do the
last child as well. So selecting within the row will update and set the
last child property. We can set that to blue. It can also be specific, so using the nth child. So that will be the
number of children. So if you want to set it
for every second element, and then we specify the number
that we want to skip too. So this is going to
be applying it to every other element for
every second element. And I'll update the color
of the font to be read. Right now it's only going
within the element. And let's copy these and
we'll duplicate them out. That way we can set to
multiple elements that are the child elements when we're specifying using
its index value. So that's gonna relate
to the second one. Let's update and set a background color and set the
background color to green. So again, it's gonna
be the second one. We can update this to select all of the matching
ones that are odd. We can also update this to select all of the matching
ones that are even, that we'll be applying it to all of the
alternating elements. Let's go ahead and add in a
checkbox within our page. Serves our checkbox
with a check me. Give it a class of Checker, and we'll do a few of these. So we've got the check me one, Check Me too, check me
three and check me for. So that gives us some
checkboxes on the page. And now let's select the
elements that are the input. With the type of checkbox. We can be more specific
with the input types by using the square brackets and
then specifying the type. So this is gonna be one of the
attributes of the element. We want to apply the
checked option to it. So checking to see if it's checked and then apply
some styling to it. What we want to do, let's
set a height of 50 pixels and a width of 50 pix to
this checked element. When they're checked, they're
gonna get really big. There's also a focus
pseudo-selector so that can be applied if we're
focusing on an input. And let's update the
background color of it. So set that to yellow. And I'm actually going
to update and add in some additional just
regular inputs. Now these inputs,
whenever they're selected and the
focus is on them, they get the selector of
yellow and the checkboxes. They're still gonna be
updating as they're checked, just as we did
with the checkbox, selecting the input and then also selecting the type as text. That will apply that property. And some of the properties
they're not gonna be available to all of the page elements are
those are just being set as the default
background colors for them. Try it out and see what you can do with the
pseudo-classes. Try out the different
pseudo-classes on various page elements. It can be ready to move
on to the next lesson.
11. 10 Pseudo elements CSS: This lesson we're
gonna be updating the part of the selection,
selected element. So updating the first
line, first letter, adding in content after and before the
elements selection. And this is all gonna be
done with pseudo elements, where we're using
the two colon's in order to indicate
the pseudo element and apply styles to part of the element
that has been selected. Pseudo elements are
allowed us to create and select specific
parts of an element. We're gonna go ahead
and we're gonna make a selection of the page content. We've got a number of page elements that
we've already got. I'm going to select the
one with an ID of one. And then we're gonna apply
a pseudo element to that, selecting the element
with the ID of one. And I'll update the font
size of the element, make the font size
relatively big. We can also update the image
size as images rather big. So let's update the width
of the image, 200 PECS. So it's a whole lot smaller. So now let's apply
a pseudo element. So if we wanted to apply
it to the first line, we can specify that within one. And this is using
the two Colin's that allows us to
indicate the pseudo, selecting the first line. And let's update the
first line and add in a red color to
the first line. That's going to be to the
first line of the content. As the line shrinks, it's still only getting
applied to the first line. This is an interesting
way that you can apply different effects to
parts of the element. Let's update the
background color and we'll set the background
color to be black. The color of the font will
set that all to be white. And I'll set that as
beach. Let's update. And it will make a selection
of the first letter. Within that element. Selecting the first letter. And I'll update the font
size of the first letter, will make that for EM. It's the way that he can
update the first letter, make it really large. You can also set content after the selection
of the element. So you can select
the element and using After allows you to add content after the element
that you've selected. We can specify the content. Adding in the content
of HelloWorld. There's the content
being added in. I know it's a little
bit hard to see. So let's update the color to
be blue for the background. So there's the content that
set after within the one. And if you go to inspect the page content of the
element, there's the after. And we don't see the
hello world being written as that's being
done with the styling. So whatever is in that police is gonna be what the
content is that got added. You can also do a
before as well. That will place the
content before. That actually added it into the first line and
updated the content. So applying even the first
letter to that first part of the page content as
pseudo elements allow you to select part of the element
and make updates to it. There are limited to the different properties
that can be applied. So go ahead and try to get more familiar with what you can
do as pseudo elements.
12. 11 Float Layout CSS: We're gonna be setting up a
basic website with floats. So we've got the typical
header navigation, the menu, and the footer. And we're gonna be
using the floats. So it floats for both
the three-column design as well as the Navigation
Bar links applying the different pseudo-classes and the pseudo elements in
order to clear the floats. And then applying various
styling properties in order to make it
look like a website. We're going to update
this typical webpage LEO to tap a
three-column design. So we've got a
header navigation, the main content area, and a footer area. It's making a
selection of these. And then we're gonna be
adding these using a float. So first off, let's go ahead
and we're going to open up the styling and clear out a styling that we had
there previously and apply the border box because we are going to be
using the floats. So that's going to be done
to all of the page elements. Selecting all of
the page elements, and set the box sizing for those page elements
to be border-box. So that way when we
set up the columns, which is the next one that
we're going to be selecting. We can set a width
for those to be 33%. And that way we can have them
fit properly on the page. I'm going to set them to be 33%. Also add in a border
for them so that we can clearly see all
the different columns. So that can be one pixel,
solid black border. There's our columns. Let's set a default
height for them. And the height can be 200 picks. Then using the float, we can float them to the left. So set them up as float. And I'll float them to the left. That sets up the basic
for the three column. I'll also do a text align to center align
the text that we have. Set that as center
aligned for the text. We've got the three
columns there. We want to set the footer. I've added in classes for the
footer and for the header. So selecting the
footer and the header. Then I'll set them up both just comma separated both
of those selections. I'll set the text align, center align the text. We'll set the background
of both of them. They both could be matching. And so there was a
black background. The color of the
font can be white. So there's our footers there. It's actually being applied to the columns because we
didn't clear afterwards. So we want to clear after the selection of
the main content. It, I'll give this one
a class of mean so that we can select it
within the styling. We want to apply the clear
fix for that main element, selecting it, and then
using the pseudo, set it. Afterwards, we're going to
set some content there. And this will allow us to do the clear fix on both of those. And the content can just
be some blank content. Set the display as
a table display, and then using a clear
to clear both of them. So book clearing all of the floats and do
a clear of both. That will once again allow us to have the header and
the footer separated. And because these columns,
because of the float, they were floating on top
of the header and footer. Let's set a height for this. This can be 120, picks the line-height for them so
that we can center align, vertically align the text. And of course, if you're
adding in more text, then you'd need to update
what the line-height is. Right now I'm not going to be adding any additional texts, so I'm just setting it up as the line-height also
for the navigation bar. So it's gonna be the navbar. I'm going to give it
a class of nav in case we want to reuse the tags, different parts of the page. I'm going to select
it as a class of nav. For the enough negation bar. We can align the text
to center aligned. Let's do a background color for the content and set
that up as red. Let's also go ahead
and we're going to add in some divs in there. Then we'll use these
divs and we're going to align them using
the floats as well. Selecting within
the nav, the divs. We can also do the divs that are immediately
within the NADPH. Set that up to float. To the left. Add some padding
for the devs, ten pics. We also want to do the clear fix for afterwards, comma separate. And that's also where
we've got the floats. And this should also
be set to after. I'm going to set this
one as well too, after. We're setting that div
to clear afterwards. For the devs, set
a width of 25 pix. Set a width of 25 pix. Also center align the
text because we do have the four items there
within the list. It'll set a background
color for each of them. Set the background
color to be red, and the font color can be white. For those, There's our links. Whenever we hover over them. They're not links yet, but we'd have to add in links. We're going to update
the background color whenever they're hovered over. And I'll set the background
color to be black. The color can go to red. That's how you can set up a
basic website with floats.
13. 12 Flex Layout CSS: We're gonna be creating
a CSS template using Flexbox and setting up saying
our typical HTML template. We've got the header, the nav, the main and footer, but three-column website,
Flexbox provides us a way to create a web layout. This is also gonna
be responsive so as we resize it and
make it larger, those columns are going to stay creating
responsive elements within a container that are really easy to range using flex, this lesson we're gonna
be making and using flex box in order to make a
three-column website design. So we will be
selecting the elements from the page and updating them. So let's go ahead and
we're gonna select all of the elements that are columns. This is where we've got
the three-column design. I'm also going to
apply to all of the elements across and
add in the box sizing. So that way that we
can set the default sizing of each of the cells. And that will also include the padding and any
of the borders. Box-sizing will
allow us to include the borders and the padding for the width of the element cells. So we're selecting
all of the columns. I'm going to add in a
border to the columns. So one pick solid, and I'll do a blue
border for the columns. There's our three columns
that we want to apply. I'm also going to be adding in some padding to the columns. So setup the padding and I'll do just ten pixels
of padding to it. And I'll set a default height
for it to be 200 picks. So there's our three columns. Do a text align so we can align the text to centre for them. And now we want to stock
them using the flex. Let's set the flex
width and that we can set using the
flex property of one. So it's gonna be
the width of each one of those containers. We need to select
the parent and apply the flex property to the parent. So that's the columns
are contained within the mean element, within the main element. Update and set the display
property to be flex. That will allow for the children of the main container to
get that display property. And that's where we get
the three-column design. We can also update that
and set the navigation. We've got an element
with a class of nav, just comma separate them and we want to apply the
flex property to both of them immediately that's
going to stock those. So we want to apply
different properties to the navigation elements. These are the ones that are the divs within
the nav class. So selecting the nav class and then the divs that are
contained within them. Let's go ahead and set
up a border for those. I'll set up a green
border for them. So that way we get some
borders around them, adding some padding for those. And let's sort some five
pixels of padding for them. Then using flex,
we're going to set the flex value for one
and also do a text align to align the
text to center align the text gives us
the link elements. Setting up a background. I'll set up a background
color for the page elements, and I'll set them up as block. And then the color can be blue, are actually going to set
the color to be white. And adding in the
hover effect to those elements whenever
the elements are hovered. To give them the field that
they're gonna be links. We can apply the
linking afterwards, either with JavaScript
or we can do it within the HTML as anchor tags. Whenever we hover on an
update, the background color. We'll set that to be blue. As we hover over. It gives us a new background
color for those elements. Now let's select the
header and the footer. Elements with a class of header and the element
with a class of footer, apply some properties to that. Once again, background
color for those, background color for those. I'll set the
overflow to be auto. So that will take up all
of the available space. Text align, center,
align the text. And we'll set up a minimum
height for it to be 100 PECS. That gives us the header
and the footer and also do the
line-height for these. It actually for the footer, we'll select it the
element separately. We've got the div
within that element. Selecting the div where
we've got the content for the footer for this weekend, set a margin, then also
some padding around it. In this way we can add
additional lines of content. That's how you can use
flex in order to set up a default website template
with three columns.
14. 13 CSS Grid Layout CSS: We're gonna be applying
the display grid. So the CSS grid, in order to create a basic
template three-column design with a navigation bar, this could be fully responsive. Using the CSS grid gives you ability to create
responsive page elements. I'm going to showing
you how you can create a basic starter template
that you can use for your websites to
develop them out further as you add additional content on
elements into them. Starting out with a
basic, very basic layout, we're going to have a
header, nav main area, and a footer for the content. This lesson we're
gonna be setting up the website design and the
layout using the grid. It's gonna be a
three-column website. So first off, let's select
the main container, and that's going to
be the container mean I've already added
in the box sizing. So this is gonna be the
parent that's gonna be displayed the children, the immediate children
with it as a grid format, using the display and set
it up as display grid. Then for the grid, we're going to set
them up as one FR, FR and one FR. That right away set those columns in that
type of structure. Let's update the columns, selecting the elements
with the columns, setup the, grabbing the border. Setup the width of them. And they're gonna be
set within the grid. So we want to make it dynamic so we don't actually
have to set the width, but we will set the
height for those cells. And also I'll set the text-align to center align the text
content within them. So there's those four columns. You can also shorten this
by using the repeat. So if they're all
gonna be the same size that we can use the repeat. And setting up a repeat of four with one FR for
each one of those. And actually this
should be three because we do have the
three columns there. We're also gonna do this
for the navigation. We've got a elements
with a class of nav. So that's gonna be the
parent for the grid. And then the
navigation items are gonna be contained within there as a grid items
setting up the grid. And this one has going to have four items for
children within there. And we'll select the nav
and the divs that are immediately within the
enough with a class. And then the diffs. These are going to be links. We can text align. Also set up a background color, and I'll set up a
background color of green. For those. I'll update
the font size to 1.2 EM. We'll set a color of
white for the links. And we'll add in the option
whenever we hover over them, that will update the color. So the pseudo. And
we can set this. So setting this. How about we set
this to be block? Whenever they're hovered over, There's our links and
the grid is gonna be responsive by default. So that gives us the basic
structure that we needed. Now we can apply some additional
styling to the header, as well as to the footer. And set up a background
color for those. I'm going to set up just a
default black background. And the color of the
font can be white. Let's select the font size. Make it really big. And
then the text align, center align the text for those. So that gives us our
basic webpage structure where we've got the header, the footer, and also set
the overflow for these. So that way they will
go down all the way to the navbar default spacing. Let's needed within the
structure of the page. Then as you resize it
and shrink it down. These are going to also be fully responsive page elements. Let's say you can use the
grid in order to set up a default website
template that you can use as a starting point for
developing your webpage.
Laurence Svekis, Best Selling Course Instructor
