CSS 3 Introduction

Hello everyone,

Today we are going to start talking about CSS or Cascade Styling Sheets.

There are a few benefits of CSS:

  • You can control every aspect of page display
  • You can apply changes globally
  • Instruct browsers to control your appearance
  • Finally create dynamic pages

Inside your HTML document you will have to specify how your browser controls your style you will do this using the following tag:

<link rel=”stylesheet” type=”text/css”  href=”css/normalize.css”>

Above the link is to where your css style sheet is stored IE the folder css document normalize.css

Here is what it looks like in your HTML document:

html45

So what does all of that mean and how do I use it? Well let’s take a look at very simple CSS:

All CSS is made up of style rules they include the following:

A Selector and a Declaration it will look like the follow:

selector {declaration};

A semicolon always follows this statement as well

You will then have Properties and Values it looks like the following:

selector {property; value;}

This is what CSS looks like in its own document:

html46

And this is what it looks like in your browser:

html47

So let’s dissect this a little bit from the following code:

body {font-family: Times New Roman;}

h1 {color: blue;
	font-size: 3em;}

h2 {color:green;
	font-size: 2em;}

h3 {color:red;
	font-size: 1.5em;}

p {font-style: italic;}



 

body: this is any text that isn’t in any tags but is within the <body> tag

font-family: This defines the font that we are going to use for this text in this case it’s Times New Roman

h1: this is any text that is within the <h1> tag

color: this is the kind of color you want to use. In this example it’s blue

font-size: This will determine the size of the text in this case is 3em.

And so on and so forth for the rest of the document.

Keep in mind that you can also label the h1 as follows: h1,h2,h3 {declaration}

This is just a simpler way to do the same thing!

If you have any questions feel free to ask away!

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 *


1 × 5 =

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>