PDA

View Full Version : [TUT] Combining HTML and CSS


Kickerbat
20-01-10, 05:48 AM
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.
Kickerbat
20-01-10, 05:48 AM
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>
<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.


<style type="text/css">

</style>

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

<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.
Kickerbat
20-01-10, 05:49 AM
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>
<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>
<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.
Kickerbat
20-01-10, 05:50 AM
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.


.classname
#idname

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


class="classname" id="idname"

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

<div class="classname">Text here</div>For more CSS property help, here is a great website to use. Click here (http://htmlhelp.com/reference/css/properties.html)

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.
Exon
02-06-10, 03:45 PM
Awesome Tutorial ;D

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

Thanks on advantage ;D