Development

How to add CSS styling to HTML code

You want to make your HTML code look great but where do you put your CSS and how do you link it to your code?

CHOICE 1: EXTERNAL STYLE SHEETS

Most people put their CSS in a separate file and we recommend you do the same.
The most common name for this CSS file is style.css.
You can name it whatever you like as long as you have .css at the end.
If you want to make several CSS files and link them all to one document though each has to have a different file name.

To link this to your html simply add the following code in the <head> section of your HTML code:

<link rel=”stylesheet” href=”<?php echo get_stylesheet_directory_uri() ; ?>/style.css” />
(don’t forget to change the file name to whatever you’ve name your css if it’s not style.css and put in the correct file path if it’s in a separate folder, eg. /css/style.css)

The styling is added as a class within the start tag eg. <div>, <table>, <p> etc, never outside a tag.

So to add a class simply add the code class=”styling”

Then in your css you would put:

.styling {
Put your style in here eg. background-color: #f5f5f5;
}

You can change the word ‘styling’ to whatever you what.
We recommend naming it something that will remind you of what part of your code it refers to eg. div1.

CHOICE 2: INTERNAL STYLE SHEETS

Ok, so for whatever reason you would like your HTML and CSS code to be in one single document. However you still want to keep them separate so it’s easy to read and edit.

You can place your CSS in the <head> section in your html.

eg.
<head>
<style>

.styling {
Put your style in here eg. background-color: #f5f5f5;
}

</style>
</head>

CHOICE 3: INLINE STYLE

This should only be used when you have minimal styling.
Otherwise the start of all your HTML tags will be full of CSS styling and your code will look like one big mess.
However, for the odd bit of styling it’s fine to use.

The styling is added within the start tag eg. <div>, <table>, <p> etc, never outside these tags.

eg.
<p style=”color:blue; margin-left:30px;”>

So style=”” says that your adding styling and the quotations contain the styles you want to add.

July 16, 2015  |  07:26:36

Leave a Reply

Your email address will not be published.