[TUT] Combining HTML and CSS

Printable View

20-01-10, 04:48 AM
Kickerbat

[TUT] Combining HTML and CSS

Source: TechTuts.com
Introduction

Combining HTML and CSS is an basic, but essential step to creating great templates, websites, and many other customizable scripts. CSS, or Cascading Style Sheet, allows you to change the style of multiple elements by editing a single piece of coding, rather than editing each HTML element. There are two ways to include CSS in a HTML file, internally and externally. Internal CSS is displayed in the head of a document, while external CSS is links from a separate file. Now that you know the basic idea of CSS, let's begin by adding CSS to an HTML document.
20-01-10, 04:48 AM
Kickerbat

Adding CSS to HTML Internally

The first method of adding CSS to HTML is internally. Internal CSS is positioned between the HEAD tag of the HTML document. When using small amounts of CSS this is ideal. It keeps the entire script in a single file, making it more organized.

First we musty create a new HTML file. Below is a simple example of a simple HTML document.

HTML Code:

<HTML> <head> <title>Combining HTML and CSS</title> </head> <body> A simple tutorial on how to combine HTML and CSS to make a better script. </body> </HTML>

Now that we have a simple HTML document, we add the tags to allow CSS to be added. Below is the beginning and ending tags for adding CSS.

HTML Code:

<style type="text/css"> </style>

Now we adding the style tags into the HTML document head and we get...
<HTML>

HTML Code:

<head> <title>Combining HTML and CSS</title> <style type="text/css"> </style> </head> <body> A simple tutorial on how to combine HTML and CSS to make a better script. </body> </HTML>

Now you have adding the tags to create an internal CSS script. Later we'll learn how to write CSS and how to style HTML elements.
20-01-10, 04:49 AM
Kickerbat

Adding CSS to HTML Externally

The second method to adding CSS to HTML is externally. External CSS is ideal when you have a long CSS, which would otherwise create a huge HTML file. Now we use the simple HTML file again.

HTML Code:

<HTML> <head> <title>Combining HTML and CSS</title> </head> <body> A simple tutorial on how to combine HTML and CSS to make a better script. </body> </HTML>

Now we create a separate CSS file and save it with the extension of .css and saved to the same folder as you HTML document. Now we must link the two files. To do this, we edit the HEAD of HTML to look like this...

HTML Code:

<HTML> <head> <title>Combining HTML and CSS</title> <link rel="stylesheet" type="text/css" href="css.css" /> </head> <body> A simple tutorial on how to combine HTML and CSS to make a better script. </body> </HTML>

Now we have created a external CSS file.
20-01-10, 04:50 AM
Kickerbat

CSS Classes and ID

CSS is made of primarily two main types, ID's and Classes. These are the connection between the HTML and CSS. To differentiate between ID's and classes, a period is used before the class name, and a number sign before the ID name. Below are two examples that should be added to the CSS area of your script.

HTML Code:

.classname #idname

Now, to allow the ID and class properties to work in HTML, we must add...

HTML Code:

class="classname" id="idname"

The codes above are to be added to an HTML element. And example of which is below.

HTML Code:

<div class="classname">Text here</div>

For more CSS property help, here is a great website to use. Click here

I hope this tutorial helps newcomers and users new to HTML and CSS. If you have any questions, Personal Message me, or post a comment.
02-06-10, 02:45 PM
Exon

Awesome Tutorial ;D

I wonder if you could make a tutorial about classes, from PSD to HTML and such x)

Thanks on advantage ;D