Linking your styles to the webpage [#1]

Prince · 02-27-2013, 05:32 PM

Cascading Style Sheets the Basics.

Hello everyone,

I like to think that I'm pretty handy when it comes to web development, I'm not the most talented of designers, however my abilities are considering pretty good.

So in this tutorial, I will be teaching you how to link your styles to your webpage.[/size]

So first off all, there are two ways you can link your CSS to a HTML/PHP document. The first way would be to just use the following tags by inserting them within the "<head>" tags.

Code:
<style>

   ---- Styles go here ----

</style>

That is the easiest way, or you could link a external style sheet to your web page document, you can do this, buy inserting the following code within your '<head>' tags aswell:

Code:
<link rel="stylesheet" type="text/css" href="SHEET.CSS">

You would then make a CSS sheet in the same directory as your web page file.

An example of what these would look like would be the following:

Code:
<head>
<title>First Method</title>
<style>
    body { 
         font-family: verdana;
      }
</style>
</head>

OR

Code:
<head>
<title>Second Method</title>
<link rel="stylesheet" type="text/css" href="MYCSSDOCUMENT.CSS">
</head>

The second option is a lot more cleaner, however the first is more efficient for making small web designs.

I will be introducing loads more daily Mini-CSS tutorials over the next weeks.

Hope you liked the tutorial, it's very simple, however it should help you on your journey to becoming a web designer.

Alex · 02-27-2013, 05:39 PM

Nice guide, there should be a coding section. I really want to learn html you should make a final product to see if the person did it correctly.

Prince · 02-27-2013, 05:51 PM

(02-27-2013, 05:39 PM)Jinx Wrote: Nice guide, there should be a coding section. I really want to learn html you should make a final product to see if the person did it correctly.

I'm starting with some basic tutorials, then I'll start showing people how to style their content. I'll be releasing a tutorial tomorrow which will be on the structure of your web pages.

Faked · 02-28-2013, 08:33 PM

Great guide, I'll be sure to use this soon.

Thanks,
Faked

Prince · 02-28-2013, 08:53 PM

My second tutorial is now up, feel free to check it out here: http://www.creativegaming.net/showthread.php?tid=852

Spire_CnC · 02-28-2013, 09:29 PM

Nice guide. Hit this one on the mark bro.

Flashdrive · 02-28-2013, 10:09 PM

Nice guide really awesome keep up the good work.

Prince · 02-28-2013, 10:10 PM

(02-28-2013, 10:09 PM)Flashdrive Wrote: Nice guide maybe make a giant thread after with all of your tutorial links in 1? for fast reference.

I'm planning to do that maybe once I've got 5-10 tutorials out there, so hopefully by Sunday.

Flashdrive · 02-28-2013, 10:12 PM

(02-28-2013, 10:10 PM)The Specialist Wrote: I'm planning to do that maybe once I've got 5-10 tutorials out there, so hopefully by Sunday.

Sounds good I edited my post cause I thought it was a noob idea but you with your insta replies.