Hello everyone!
Today we are going to work on Blocks and other aspects of CSS3.
Let’s get started and talk about blocks.
Block elements can include <p> and <div>
This can be included as follows:
<html> <head> </head> <body> <div id="main-box"> <div id="paragraph"> this is stuff</div> </div> </body> </html>
As you can see above we inserted a <div> element which defines what box we are working with. Let’s see how it works in our HTML document:
So as you can see in the example above we have used a inline style sheet instead of an external link. We then used our <div> tags and specified the id type of said tags. What does it look like in our browser you ask?
Let’s take a look!:
As you can see our style sheet’s worked! You will also notice that our second box (one inside) is offset this is done by defining it within our <style> tags using the following code:
<style>
#paragraph {
width: 200px;
position: relative;
So as you can see the position: relative. This offsets the element from the parent.
We could also use position: absolute and this allows us to put it in a specific place on our webpage.
Next is to float. When you float things left or right you are forcing them to go in that direction as far as possible. What does this code look like?
float: left moves it as far left as possible
float: right moves it as far right as possible
float: none this tells the browser that it will go with the normal “flow” of things so to speak
float: inherit this specifies that the element should float like the parent
That is it for this tutorial look for the next one where we tackle Boxes, Borders and Buttons!
If you have any questions please feel free to ask below!
Looking for quality phpBB Hosting? Look no further than Arvixe Web Hosting!
