CSS Tutorial 2: How does CSS work?

On this lesson you’ll learn methods to make your first type sheet. You’re going to get to grasp in regards to the common CSS mannequin and which codes are integral to use CSS in an HTML record. How does CSS work?

CSS Tutorial 2: How does CSS work?

Some of the properties utilized in Cascading sort Sheets (CSS) are much like those of HTML. Consequently, in case you are used to make use of HTML for layout, you’ll certainly recognize the various codes. Allow us to look at a concrete example.

The basic CSS syntax

Let’s say we want a nice red color as the background of a webpage:

Using HTML we could have done it like this:

	
	<body bgcolor="#FF0000">
	

With CSS the same result can be achieved like this:

	
	body {background-color: #FF0000;}
	

As you’ll be aware, the codes are more or less same for HTML and CSS. The above example also indicates you the essential CSS mannequin:

 

CSS Tutorial 2: How does CSS work?

But where do you set the CSS code? This is precisely what we can go over now.

Applying CSS to an HTML document

There are three approaches you can apply CSS to an HTML file. These approaches are all outlined beneath. We propose that you just focus on the third approach i.E. Outside.

Method 1: In-line (the attribute style)

One solution to practice CSS to HTML is with the aid of making use of the HTML attribute kind. Constructing on the above example with the pink history colour, it may be applied like this:

	<html>
	  <head>
		<title>Example</title>
	  </head>
	  <body style="background-color: #FF0000;">
		<p>This is a red page</p>
	  </body>
	</html>

Method 2: Internal (the tag style)

Another way is to include the CSS codes using the HTML tag <style>. For example like this:

	<html>
	  <head>
		<title>Example</title>
		<style type="text/css">
		  body {background-color: #FF0000;}
		</style>
	  </head>
	  <body>
		<p>This is a red page</p>
	  </body>
	</html>

Method 3: External (link to a style sheet)

The recommended approach is to link to a so-known as outside type sheet. During this tutorial we can use this procedure in all our examples.

An external kind sheet is without problems a text file with the extension .Css. Like every other file, you can position the sort sheet for your internet server or rough disk.

For illustration, let’s say that your kind sheet is known as variety.Css and is located in a folder named style. The hindrance may also be illustrated like this:

figure002-tech-frk

 

 

 

 

 

The trick is to create a hyperlink from the HTML file (default.Htm) to the style sheet (form.Css). Such hyperlink will also be created with one line of HTML code:

	<link rel="stylesheet" type="text/css" href="style/style.css" />

Notice how the path to our style sheet is indicated making use of the attribute href.

The road of code must be inserted within the header element of the HTML code i.E. Between the <head> and</head> tags. Like this:

	<html>
	  <head>
		<title>My document</title>
		<link rel="stylesheet" type="text/css" href="style/style.css" />
	  </head>
	  <body>
	  ...

This link tells the browser that it will have to use the layout from the CSS file when displaying the HTML file.
The rather intelligent thing is that several HTML documents can be linked to the identical variety sheet. In different phrases, one CSS file can be used to control the layout of many HTML documents.

 

figure00-tech-frk

This manner can prevent various work. Should you, for instance, want to alternate the heritage color of a website with 100 pages, a variety sheet can prevent from having to manually alternate all one hundred HTML documents. Utilizing CSS, the alternate will also be made in just a few seconds simply by means of changing one code within the important sort sheet.

Let’s put what we just realized into follow.

Try it yourself

Open Notepad (or whatever text editor you use) and create two files – an HTML file and a CSS file – with the following contents:

default.htm

	<html>
	  <head>
		<title>My document</title>
		<link rel="stylesheet" type="text/css" href="style.css" />
	  </head>
	  <body>
		<h1>My first stylesheet</h1>
	  </body>
	</html>

style.css

	body {
	  background-color: #FF0000;
	}

Now location the 2 files in the identical folder. Don’t forget to save lots of the files with the right extensions (respectively “.Htm” and “.Css”)

Open default.Htm along with your browser and see how the page has a pink historical past. Congratulations! You have got made your first style sheet!

Hurry on to the next lesson the place we will be able to take a appear at one of the crucial residences in CSS.

Leave a Reply

Your email address will not be published. Required fields are marked *