codescracker


html

HTML CSS



« Previous Tutorial Next Tutorial »


HTML with CSS is used to design web page more interactive.

To learn more about styling HTML elements, refer to CSS Tutorial.

For now, let's take a quick look at HTML with CSS to create some interactive web pages. You can style your HTML elements in one of the following three ways:

HTML CSS Syntax

You can use the following general form to use HTML with CSS:

element{property1:value1;property2:value2;}

Here, the element is an HTML element name. The property is a CSS property. The value is a CSS value. Multiple styles are separated with semicolon.

HTML CSS - Inline

You can style your HTML elements using inline CSS. Here is an example shows how to use inline CSS to style HTML elements:

<!DOCTYPE html>
<html>
<head>
	<title>HTML CSS Example</title>
</head>
<body>

<p style="color:red">This is HTML CSS Example (red)</p>

</body>
</html>

Here is the sample output produced by the above HTML with CSS example:

html inline styling css

HTML CSS - Internal

You can use internal CSS to define common style for all the HTML elements on the same page. Internal style is defined inside the head section, using the <style> element. Here is an example shows how to use internal CSS to style HTML elements:

<!DOCTYPE html>
<html>
<head>
	<title>HTML CSS Example</title>
	<style>
		body{background-color:black}
		h2{color:red}
		p{color:white}
	</style>
</head>
<body>

<h2>This is HTML CSS Example (red)</h2>
<p>This is HTML CSS Example (white)</p>

</body>
</html>

Here is the sample output of the above HTML with CSS example:

html internal styling css

HTML CSS - External

External styling is most important from all the three ways of styling. Because in external CSS, you have a external file with .css extension contains all the styling things. And you can import this file in any of your HTML document to apply the styles (that is defined in that CSS file) to the HTML document. Let's look at the following example:

Let's assume, you have the following css file named as mycss.css:

body{background-color:black}
h3{color:red}
p{color:white}

Now include the location of this mycss.css file into your html file as follows:

<!DOCTYPE html>
<html>
<head>
	<title>HTML CSS Example</title>
	<link rel="stylesheet" href="mycss.css">
</head>
<body>

<h3>This is HTML CSS Example (red)</h3>
<p>This is HTML CSS Example (white)</p>

</body>
</html>

Following is the output of the above HTML with CSS example code:

html external styling css

HTML CSS - Fonts

CSS color, font-size, and font-family, are used to define text color, text size, and font to be used for the HTML element. Here is an example:

<!DOCTYPE html>
<html>
<head>
	<title>HTML CSS Example</title>
	<style>
		body{background-color:green;}
		h1
		{
			color:white;
			font-family:verdana;
			font-size:150%;
		}
		p
		{
			color:silver;
			font-family:courier;
			font-size:110%;
		}
	</style>
</head>
<body>

<h1>HTML with CSS Example (white)</h1>
<p>HTML with CSS Example (silver)</p>

</body>
</html>

Here is the sample output produced by the above HTML with CSS example code:

html css fonts

HTML with CSS More Examples

Here are some more examples on HTML with CSS. As every HTML element has a box around it, no matter we are seeing or not. The CSS border property is used to define a visible border around HTML element. Let's look at the following example:

<!DOCTYPE html>
<html>
<head>
	<title>HTML with CSS Example</title>
	<style>
		h2 { border : 5px solid red; }
		p { border:2px solid green; }
	</style>
</head>
<body>

<h2>HTML with CSS Example (5px red border)</h2>
<p>This is HTML with CSS Example (2px green border)</p>
<p>This is HTML with CSS Example (2px green border)</p>

</body>
</html>

Here is the sample output of the above HTML with CSS example code:

html css box model

The CSS padding property defines a padding (space) inside the border, which makes border more interactive. Let's look at the following example demonstrates how to define padding inside the border using CSS:

<!DOCTYPE html>
<html>
<head>
	<title>HTML with CSS Example</title>
	<style>
		h2 { border : 5px solid red; padding:10px; }
		p { border:2px solid green; padding:5px; }
	</style>
</head>
<body>

<h2>HTML with CSS (5px red border)</h2>
<p>This is HTML with CSS Example (2px green border)</p>
<p>This is HTML with CSS Example (2px green border)</p>

</body>
</html>

Following is the output of the above HTML with CSS example:

html css border padding

The CSS margin property defines a margin (space) outside the border. Let's look at the following example:

<!DOCTYPE html>
<html>
<head>
	<title>HTML with CSS Example</title>
	<style>
		h2 { border : 5px solid red; padding:10px; margin:30px; }
		p { border:2px solid green; padding:5px; margin:10px; }
	</style>
</head>
<body>

<h2>HTML with CSS (5px red border)</h2>
<p>This is HTML with CSS Example (2px green border)</p>
<p>This is HTML with CSS Example (2px green border)</p>

</body>
</html>

Below is the sample output displayed by the above HTML with CSS example:

html css margin

This is a quick view of HTML with CSS, but you can refer to CSS Tutorial to learn more and in detail about CSS.


« Previous Tutorial Next Tutorial »



Tools
Calculator

Quick Links
Signup - Login - Give Online Test