okay so this little video we're gonna just be going over the CSS box model
mostly. we're also gonna be reviewing some HTML and then a little bit of CSS
styling, but mainly just focused around how the CSS box and model operates and
how you can manipulate it and how it is essentially the entire model for any
HTML web page. checking out this diagram we got here you've got it
broken down into four separate parts and you've got the margin the border the
padding and then the content and the content represented what the user is
going to see in addition to being able to add more HTML tags within the content,
which won't show up as HTML tags but the content within it will show up.
the best way to go over this is to just code out a little demo. so I'm
just gonna walk through that process real quick, & I'm gonna create a folder on
my desktop here.
now I don't have anything in this folder
right now but I'm just gonna use it as the launch off point to open vs code.
to open vs code on Mac I can just do command spacebar and launch the vs code from
there. you see right now I don't have any folders in my workspace and I'm gonna
clear this little welcome screen so there are a few ways to add this folder. one, you can
go to > file > add folder to workspace. like that, we'll go ahead and do it that way
CSS box model I'll add it there and first thing you
want to do is add our initial index dot HTML file and again a few ways to do that.
you can right click > new file. Or click this little file icon
right here which is quick and easy so click it index.html. Now, I've got
this handy-dandy little shortcut tool or in VS code you type in an exclamation mark
and there's an autocomplete it's called a snippet then you press Enter you just
got the base code that we need to get our HTML file up and running since we're
talking about something specific we don't need to go through that right now
what we really want to focus on is the body right here. this is everything that
we're gonna be working on. it's gonna get displayed on the actual browser.
Remember every time you see the white little dot up
here you want to make sure to save it get in the habit of doing command+s
which will automatically save every page you're on so I got some notes here then
I'm gonna keep going for these shortcuts and I'll add these now with this video
as well link to it or something and so what knows command is equal to control
right so exclamation mark press ENTER auto fills base HTML code command s go
save so remember the important things are knowing where your code is where the
files are we're just gonna keep it here for now we might move it later but we
can see that the index file has been created so now we can mostly just work
out of our index.html on our vs code okay but if we lose where it is always
remember where it is I'm saving on your computer you can right-click and reveal
and finder okay and it will pull upward we've located it
so if you lose it that's a quick way to do it now we want to open this in a
browser so again we can reveal the finder here double click and it should
open in a browser looks like an external monitor right now and want it to open up
over there so we got it there you can also right-click in copy path same
location now there's nothing showing up here because we haven't wrote any code
for the user yet I so every tag in HTML follows this box model so the body
follows the box model so if we didn't write something in here okay hello and
save it and then refresh our page right you can see okay hello within the body
now if we wanted to add another element within the body element like a div okay
I'm from refresh the page here and we can see that that content was also added
to the HTML page but we had okay hello and then we wrote a div but it didn't
display the div because the browser recognizes that as a tool to tell it
what to do rather than to show it so these don't get shown only the content
within it I'm gonna remove this and I'm going to be working from this one div to
kind of represent our box model going forward so what I need to do now is I
need to add some CSS to it and I could write to see us that's on the same page
but I'm actually going to add a CSS stylesheet to the header here and write
it on a separate Paige so the shortcut for that and BS
codes you just type in link and you can see it pops up right
Emmit abbreviation lets us know that that's gonna be an abbreviation for a
link and these will usually autofill with what we need now remember always do
the path written in the href not the arielle that's telling us what type of
document this is and so we haven't actually created this sheet yet but
we're gonna call it what we reference it here so let's just call it style about
CSS okay now it doesn't exist yet so let's save this go back up here click
our new file to create new file we'll call this style dot CSS now remember if
you put this inside of a folder you would need to reference it within that
folder here so I'm actually gonna do that to illustrate that point let's add
the folder to the workspace but did not mean to do that I meant to do is new
folder okay so we'll just call this CSS because we're gonna put all of our CSS
in there now I can just click the CSS dragging it in its gonna make sure I
want to do this so yeah okay so now it's actually in the CSS folder so since I
did that I need to tell this HTML file to look into the CSS folder before
grabbing this CSS file okay so let's add some CSS code I'm just
gonna keep this as a Dib right now we might change the way that we selected it
let's just open it as a div so all the divs at this point will follow the CSS
rules that we write going forward so the first way we can illustrate what the yes
s box model really looks like is my adding a background color
you know white is default but since it's white on white we can't tell where the
actual margins and the background-color are
located so we'll just do the screen here remember it's very sensitive you want to
have your semicolon after or your CSS property then you have your property
value followed by colon and then remember this is our selector or we've
got an open and closed braces which contain all of our CSS properties that
we're declaring in here so we could also add a margin to our div selector and
like this ten pixels so kind of want this to be big so what that means is
that left right top bottom they're all going to be ten pixels so let's save it
refresh this page okay so remember in our HTML we removed that initial content
so now you can see the entirety of this div represented by the background color
and then the content within it and you can also see that there's space
around the edge about 10 pixels or so that was created when we change the
margin to 10 pixels so if we change this margin to 20 pixels not W pixels away
you're gonna get even more space around here now you actually do command B
so command-b will hide your project folder and if you
do it again ill on hide it so talk about back and forth just give us a little bit
more room to work with on this screen so you can't see what we're dealing with I
also want to give this div font size just one make it bigger so you can see
the text so we'll make the font size 30 pixels save it
refresh it okay you see a little better now let's make the color of the font
which is just in CSS representatives color so that's real easy let make it
white so it stands out on that green a little better okay so we've got our
white text on our green background there and as you can see we have space around
the margin I want to do is copy this div remember when we first made it it did
not look like much it's just normal text so this is Dib to call this one good to
know on the div one and then we got dipped to down here so you can see that
this selector is selecting all of the divs so if we change this from div to
body it would be selecting the body then you can see it was applied to the body
so the background is green and because font sizes are carried to the children
our font size remains 30 pixels let's go back to just doing this as I did so
again make it the padding more we can see it push it more now let's talk about
the margin Mars already how about patty patty we've
behaved similar to the way the margin does except the padding is within the
element itself so if I had 30 pixels here it's not gonna add it to the
outside it's gonna add it to the inside before the content so you need content
here and now this area 30 pixels around is represented by the padding what's the
background color occupies and then the area on the outside represents margin so
again if we keep making this bigger we're gonna get more padding more more
padding so we have our content which is our font size and our actual text that
we wrote into the div itself represented at this level and then we have the
padding at the next level and then the margin on the outside so you kind of
take a mental shot up this right here let's go back to the we can kind of see
this model being played out in our example code one thing we're missing is
the border the border is the border between the padding and the margin see
how we do this okay border now border takes a couple more values than most of
the CSS properties do you first want to tell it what type of border it is and
there's a lot of different borders so I'm gonna go to is border CSS just
search that simply and the CSS borders and w3schools is a good resource and we
can see here is a lot of information about different types of borders you can
use you've got dollar corners - border solid borders double doors group holders
ridge borders so if you mess with those and change them you'll see the different
types so that's the first value that you need
to put when you have a border property so we'll do solid see what that looks
like I'll save it or refresh it okay so what happened there is we saw a little
shift but we didn't actually tell the border what size to be or what color to
be so let's go back to our little helpful resource here at w3 schools
let's see if they have an example I'll show us I can implement size and color
so here's the examples of the borders now those are black so we don't have
that yet let's see if we got some so border style is representing a solid
border width is represented as five pixels so here we see we just did border
we didn't necessarily specify what about the border we wanted to change so I'm
gonna note that out because I want to save that for later but let's just copy
border style style itself all and then order with five pixels paste that into
here save that go back to our document refresh it again we saw a little shift
but we didn't see any changes we might have gone from that one default maybe
one pixel and then it shipped a little bit more there so it looks like maybe we
need something in addition to or style and border width okay so now there's a
different color okay so border color that's what we need
let's copy that guy we'll paste it in here we'll just leave it red for the
example back all right there it is now we see our border red showing up against
our green background here now we can make that a little bigger and that is a
very noisy color going on there so let's change that to brown a little easier on
the eyes okay now we should be able to kind of see our
content there then we've got our padding as green border represented as red then
our margin on the outside which actually isn't the element itself it's just what
the element is pushing against other elements a really good way to kind of
see this in action is to use the developer tools we get crawl and the
developer tools are located under view developer so you can view the source
developer tools and JavaScript console so developer tools there so that opened
up in the console but we might want to do to cook the element here so now when
we hover over these individual elements you also might have to click this little
box here we can see the entire box model by clicking it represented kind of as an
overlay over it but also if you scroll down on this side where you haven't
gotten your Styles toggled you can actually see each element by hovering
over it individually so you've got your content your padding your a border and
your margin that's guys as well on the bottom there is kind of hidden by
clicking on the elements within the code right here
alright let's go back to where I just had border:solid right here and one of
the things you can do to kind of save yourself some space of code that's
taking up I'm just making it a little easier you can actually write these
three values shorthand in one boarder tag and the order is similar to style
with in color 15 pixels brown now I'm not sure if this is the way that it
actually is supposed to be ordered so good way to find out let's just save it
and test it all right refresh it and that likes to be the case so we got the
type of border solid generally will you're gonna use fixed 15 pixels and
then brown let's try another style if it thought it you might not ever find
yourself wanting to use these but there it is you've got your little red dots
cutting around the border one thing to notice is that the background color for
the border continues to the edge of the where the margin starts so it's good to
remember that the background color occupies the content the border the
padding the border but not the margin so a background color is kind of a good
tool to use when you're sort of trying to figure out where your elements are
located because it kind of give you a visual of kind of what area is taking up
and what elements are within it it's a useful tool sort of for debugging
purposes even if you don't use it ultimately for your design all right so
let's just recap real quick here we've got our CSS box model is represented by
four parts the margin on the on the outside sort of separating it from other
elements margins then you've got the border and then you've got the padding
and then you've got the content and then the content
is what the user is going to see and also where you can put additional nested
HTML elements and I this is it for this video go ahead and walk through this see
if you can replicate what I've done here add some more Styles maybe even try a
nested element in there good luck
For more infomation >> Lagu Rohani Kristen Terbaru | Betapa Pentingnya Kasih Tuhan Bagi Manusia - Duration: 5:51. 
For more infomation >> Hyundai i20 1.2 LP i-Drive Cool - Duration: 1:11. 
For more infomation >> Audi A3 Sportback 1.4 TFSI Ambition Pro Line S 7 traps automaat, Xenon, Led achterlichten. - Duration: 0:55. 
For more infomation >> Suzuki S-Cross 1.0 Boosterjet Exclusive AUTOMAAT - Duration: 1:08. 
For more infomation >> Mazda 6 Sportbreak 2.0 S-VT Business Plus Trekhaak Navi - Duration: 1:08. 
For more infomation >> Land Rover Freelander Station Wagon 2.0 Td4 S met Airco en nieuwe APK en Trekhaak - Duration: 1:07. 
For more infomation >> Halloween-Event auf Unica :D - Minecraft - Duration: 1:49:37. 
For more infomation >> POKEMON-DIY HOW TO MAKE RAINBOW KINETIC SAND CAR for Kids(Learn Colors with Nursery Rhymes) - Duration: 4:57. 
For more infomation >> Aprenda 3 Exercícios Simples para ACABAR com a Ejaculação Precoce Rapidamente. Segure a ejaculação! - Duration: 7:31. 
For more infomation >> Audi A4 2.0 TDI 150pk Innovation Edition S tronic | Virtual Cockpit | - Duration: 1:07. 
For more infomation >> Doubts For Voice / Advice - WhatsApp - IberoPistacho - Duration: 1:36. 
For more infomation >> Audi Q2 €4.000,- voorraadvoordeel! 1.0 TFSI Design Pro Line 116 pk S tronic (vsb 21062) - Duration: 1:11. 
For more infomation >> Revitaliza Codap! Médio 1 - Duration: 0:37. 
For more infomation >> Mercedes-Benz CLS-Klasse 250d AMG LINE 250 D, AMG Line, Comand, Alarm, Spiegelpakket Stoelverwarming - Duration: 1:08. 
For more infomation >> Kia cee'd 1.6 GDI Eco Dynamics 135PK DYNAMICLINE |NAVI |CLIMA |TREKHAAK - Duration: 1:06. 
For more infomation >> 2.2 IS THIS MONTH | The final 2.2 theory #1 - Duration: 2:42. 
For more infomation >> 【Pinocchio-P ft. Hatsune Miku】Ghosts Play to the Audience「 Vostfr + Romaji CC」 - Duration: 3:51. 
No comments:
Post a Comment