D'at CSS doe
Alright There's a few things in the other lesson I know I didn't even scrap across, but let's go over the ones we did.
#myID -- So the # sign makes an ID, and what makes an ID unique is that you only use it once in html
.myClass -- So, cool. This is a class and can be used multiple times.
So, that's all dandy and roses but how do we even use this crap? Well, you solution lies in Div elements. These are the elements that are completely customizable, and the code is
(<div id/class="(name)"></div>)
Class : <div class="myClass"></div>
ID : <div id="myID"></div>
Span :<span id="myID"></span>
Span :<span class="myClass"></span>
Difference between span and Div defualt. Div are displayed as "Block" which means they stack ontop of each eachother, while span tags go side by side, though this can be changed with css definition display:inline-block;
So we need to make your first box where you can put text in. So how we do this is in css, but you need to know what your whole document looks like, so for this page. I'll present the whole document... So you should start off with this.
<!doctype html>
<html lang="en-US">
<head>
<style>
</style>
</head>
<body>
</body>
</html>
So We'll be working inside those two style tags. Keep in mind </>'s mean end code in html.
We need somewhere to put text, so I'll do the css with you.
First we need to define how big our text box is going to be.
So the css definition width:100px; and height:100px; would make the box size. So how do we do this? Well let's start by making an ID and calling it "Box."
#Box {
height:100px;
width:100px; }
Okay, awesome! But it'd be cooler if we could see it! Now there's a few ways we can do this, but today we're going to use the border definition.
border: 1px #000000 solid;
Red: Border size
Purple: Border Color,
Blue: Border Type/style
This is what we call "Short handing" a code. It's a quick verison of doing multiple lines of code, but simply putting it in one. So now we have,
#Box {
height:100px;
width:100px;
border:1px black solid;
}
That's good, now let's choose what we want the text to be like with this short hand option of font. I'll be using times new roman at 14px (pixel) font, coloring black.
Font: 14px 'Times New roman' #000000;
Now we're only missing one this! How do we move it around? Well to be honest there's a few ways, but we'll be forcing on the absolute value way right now.
So, we need to define it's position, and as I said we were going to use absolute, which means it sticks no matter what.
position:absolute;
And now that we have that defined, how do we fucking move it already?! Well that's easy too.
left:0px;
top:0px;
By modifying those, it moves it around. So, putting the css code together. We get...
#Box {
height:100px;
width:100px;
border:1px black solid;
font: 14px 'Times New Roman' #000000;
position:absolute;
left:30px;
top:50px;
}
Congrats! You just made a box with me! So this is what the code will look all together...
<!doctype html>
<html lang="en-US">
<head>
<style>
#Box {
height:100px;
width:100px;
border:1px black solid;
font: 14px 'Times New Roman' #000000;
position:absolute;
left:30px;
top:50px;
}
</style>
</head>
<body>
<div id="Box"> Your text goes here, and by inserting this little html bit, you pull the css from the style tags and it applies to the element. </div>
</body>
</html>
#myID -- So the # sign makes an ID, and what makes an ID unique is that you only use it once in html
.myClass -- So, cool. This is a class and can be used multiple times.
So, that's all dandy and roses but how do we even use this crap? Well, you solution lies in Div elements. These are the elements that are completely customizable, and the code is
(<div id/class="(name)"></div>)
Class : <div class="myClass"></div>
ID : <div id="myID"></div>
Span :<span id="myID"></span>
Span :<span class="myClass"></span>
Difference between span and Div defualt. Div are displayed as "Block" which means they stack ontop of each eachother, while span tags go side by side, though this can be changed with css definition display:inline-block;
So we need to make your first box where you can put text in. So how we do this is in css, but you need to know what your whole document looks like, so for this page. I'll present the whole document... So you should start off with this.
<!doctype html>
<html lang="en-US">
<head>
<style>
</style>
</head>
<body>
</body>
</html>
So We'll be working inside those two style tags. Keep in mind </>'s mean end code in html.
We need somewhere to put text, so I'll do the css with you.
First we need to define how big our text box is going to be.
So the css definition width:100px; and height:100px; would make the box size. So how do we do this? Well let's start by making an ID and calling it "Box."
#Box {
height:100px;
width:100px; }
Okay, awesome! But it'd be cooler if we could see it! Now there's a few ways we can do this, but today we're going to use the border definition.
border: 1px #000000 solid;
Red: Border size
Purple: Border Color,
Blue: Border Type/style
This is what we call "Short handing" a code. It's a quick verison of doing multiple lines of code, but simply putting it in one. So now we have,
#Box {
height:100px;
width:100px;
border:1px black solid;
}
That's good, now let's choose what we want the text to be like with this short hand option of font. I'll be using times new roman at 14px (pixel) font, coloring black.
Font: 14px 'Times New roman' #000000;
Now we're only missing one this! How do we move it around? Well to be honest there's a few ways, but we'll be forcing on the absolute value way right now.
So, we need to define it's position, and as I said we were going to use absolute, which means it sticks no matter what.
position:absolute;
And now that we have that defined, how do we fucking move it already?! Well that's easy too.
left:0px;
top:0px;
By modifying those, it moves it around. So, putting the css code together. We get...
#Box {
height:100px;
width:100px;
border:1px black solid;
font: 14px 'Times New Roman' #000000;
position:absolute;
left:30px;
top:50px;
}
Congrats! You just made a box with me! So this is what the code will look all together...
<!doctype html>
<html lang="en-US">
<head>
<style>
#Box {
height:100px;
width:100px;
border:1px black solid;
font: 14px 'Times New Roman' #000000;
position:absolute;
left:30px;
top:50px;
}
</style>
</head>
<body>
<div id="Box"> Your text goes here, and by inserting this little html bit, you pull the css from the style tags and it applies to the element. </div>
</body>
</html>