Introduction to CSS3 Part 3

Hello and welcome once again!

Today we are going to do a semi-simple tutorial about different ways to use CSS3 in your web page. So we are going to start this out by what we are going to talk about!

First we are going to talk about inserting the <style> tag into our document and handling all our style sheet doing within the document.  As well as using style inline to do this.

We are then going to talk about using the <link> tag to link external CSS and @import statement to do this as well.

Let’s start with <style> tag and style inline to work with our CSS.

Here is what it looks like in our document. You can see below that we define all styles that we would normally use in our CSS in the HTML document instead. A lot of people choose not to do this because it is so much harder to manage a document that has a lot of style in the HTML.

html1

Here is what it looks like in our browser:

html2

Now we are going to work with internal style sheets or using the <style> tag. This tag is placed in between your <head></head> tags. Let’s take a sample look at this code:

<html>
<head>
<style>
  #topnav {
       width: 100%;
       text-align: center;
       background-color: #000000;
       height: 24px;
       color: #FFFFFF;
       }
</style>

This is just a generalization of what it’s going to look like in your HTML. As you can see we defined our attributes on single lines and they were tabbed to be the same distance from the left. I use this because it makes it so much easier to keep track of what you are using and where each element resides.

Let’s take a look at how this looks in our document:

html3

As you can see above we basically put the CSS into our HTML and didn’t link it to a separate CSS file. You can see now why this can be so confusing for you as well as for others.

The next way we can use CSS is by linking it either externally or internally to our site.

We can do this by the following:

Using the <link> tag like so:

<html>
<title> test</title>
<head>
<link rel="stylesheet" href="css/normalize.css">


As you can see we define what kind of link it is and then where it links to by using href.

Let’s take a look at it in our HTML:

html4

So you can see it in action there it’s really quite simple.

The finally thing to go over is using the @import feature it looks something like this:

<html>
<head>
<style>
    @import "http://www.someothersite.com/stylesheet.css";
</style>

What will this look like in our HTML document???

html5

Well I hope this was helpful! As always please be sure to ask any questions you have below in the comments section!

Until next time!

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 *


4 + = 12

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>