Introduction to CSS3 Part 4

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:

html1

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!:

html2

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!

Tags: , , , , , , , , , , | Posted under Programming/Coding | RSS 2.0

Author Spotlight

Keith Pottratz

Keith Pottratz

Hello My Name is Keith Pottratz. I have been working with computers for over a decade. It's my personal hobby something that I love and enjoy doing. I went to school for Computer Science, and have spent many years self teaching my self various things. I have ton's of experience in HTML,CSS, PHPBB,CPanel,CMS software, blogging software and various other systems and enviroments. My favorite thing to do though is backend developing. I find it to be a growing and ever evolving beast and I love learning about it. I look forward to giving as much knowledge as I can and help.

Leave a Reply

Your email address will not be published. Required fields are marked *


× 9 = 72

You may use these HTML tags and attributes: <a href="" title="" rel=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>