Welcome, Guest. Please login or register | Contrast:

Author Topic: [HTML & CSS] Making a separate file for your styles  (Read 215 times)

InBlue

  • *
  • Junior Contributor

  • Total posts: 13
  • Reputation: 4

[HTML & CSS] Making a separate file for your styles
« on: 03 June 2017, 01:11:58 »
Hello everyone, I thought that I would contribute to the master-thread so here is a pretty basic tutorial for the people that are knew to Markup languages.
Making a seperate file for your styles
Difficulty: Basic
I am going to assume that you already have a basic 'template' as such, if not; At the bottom of this thread you will find some useful links, I will include Clipzz's thread on 'Basic HTML'

First we are going to need to direct our HTML document to the Style sheet. To do so, simply type this line in the head section of your html document.
Code: [Select]
<link href="css/style.css" rel="stylesheet" type="text/css"/>
Code changed as advised by CHT ;)
For this block of code, my style.css file is in a folder called css, therefore you will have to type the folder name and a forward slash '/' if it is in a different folder, ( this is unnecessary but helps with organization)

Now in your style.css file this is where you can add some styles instead of having them in the HTML document.

For example:
Code: [Select]
body{
background: #900;

This will make the background red.

You might be wondering, "I have seen style sheets that have a '.' in front of some the the style names; These are called classes, so in your HTML document you could have the body but in the body tag you add
Code: [Select]
class="bg"
Then in your style sheet you would add
Code: [Select]
.bg{
background: #900
}
Anything with the 'bg' class will now have a red background.

That is going to be it for this short thread, if you have any questions please feel free to comment them on the thread or send me a Direct Message on Discord [InBlue#6220]

Useful links
Master Thread - http://forum.codingwithstorm.com/index.php?topic=153.0
Basic HTML by Clipzz - http://forum.codingwithstorm.com/index.php?topic=68.0

CHT

  • *
  • Junior Contributor

  • Total posts: 16
  • Reputation: 11

Re: [HTML & CSS] Making a separate file for your styles
« Reply #1 on: 03 June 2017, 04:38:06 »
I got a few stuff for you to fix.

First up is the word "seperate", which should be "separate".
Next up is the code from below.
Code: To fix [Select]
<link href="css/style.css" rel="stylesheet" type="text/css" media="all"/>

Code: Fixed [Select]
<link rel="stylesheet" type="text/css" href="css/style.css">

The reason why I stated this for fixing is for easier to view code as well as suit the needs of the tutorial. There's no need for the media="all" part for now.