CSS Tutorial

CSS Style

CSS Layout Style

CSS Float Style

CSS Reference

How to Write CSS Inline, Internal or External Style sheet, CSS @import Keyword

In this page you can learn how to write CSS style. You can define and implement CSS style 4 different way (Inline style, Internal style, external style sheet and @import), you must have to knowledge in which situation which type is better fit for you. So lets start, you can define and implement CSS style in following different ways.

  1. Inline CSS style
  2. Internal CSS Style
  3. External Style Sheet
  4. @import Style Sheet

Inline CSS Style

Inline CSS Style write in element line using style attribute. All most every html element support style attribute.
Inline stylesheet priority high more than other three.

Inline CSS style consists set of rules in 4 part:

  1. Selector (Element)
  2. Style (Attribute)
  3. Property and
  4. Value

How to write Inline CSS Style

Selector is normally HTML element that element you want to assign CSS style. And style is attribute to assign CSS property and set suitable value.

Inline Style

Example Code:

<p style="color:purple;margin-left:20px;">This is a paragraph line. </p>
<div style="color:purple;font-size:16px;background-color:#FF6633;">This is a paragraph Second line.</p>

Run it...   »

Example Result:

This is a paragraph line.

This is a paragraph Second line.

Internal CSS Style

Internal CSS Style includes within webpage using <style type="text/css">.....</style> element and between this element CSS style properties are listed. Internal CSS style normally written within <head>.....</head> element of the webpage.

Internal CSS style consists set of rules in 3 part:

  1. Selector (element, class, id)
  2. Property and
  3. Value

How to write Internal CSS Style

Selector is normally HTML element that element you want to assign CSS style. All elements within webpage that elements assign CSS properties and set suitable values.

Internal CSS Style

Example Code:

<html>
<head>
<style type="text/css">
p {
   color:purple;
   margin-left:20px;
  }
div{
   color:purple;
   font-size:16px;
   background-color:#FF6633;
  }
</style>
</head>
<body>
    <p>This is a paragraph line.</p>
    <div>This is a paragraph Second line.</div>
</body>
<html>

Run it...   »

Example Result:

This is a paragraph line.

This is a paragraph Second line.

External Style Sheet

External Style Sheet define in separate .css extension file. and used to make global change also manage all webpage from a single CSS document.
External style sheets give you control to change formatting and layout styles of every single elements in webpages. And only those webpage who are linked with external CSS document.

External style sheet consists set of rules in 4 part:

  1. External Source link
  2. Selector (element, class, id)
  3. Property and
  4. Value

How to write External Stylesheet

External stylesheet linked to a webpage.
Selector is normally HTML element (or class, id) to assign CSS properties and set suitable values.

External CSS stylesheet

Example Code:

jnj_css.css
/*CSS Style*/
p {
   color:purple;
   margin-left:20px;
  }
div{
   color:purple;
   font-size:16px;
   background-color:#FF6633;
  }

<head>
<link rel="stylesheet" type="text/css" href="jnj_css.css" />
</head>
<body>
<p>This is a paragraph line.</p>
<div>This is a paragraph Second line.</div>
</body>

Run it...   »

Example Result:

This is a paragraph line.

This is a paragraph Second line.

@import Style Sheet

@import CSS Style is another way to loading a CSS file.

@import CSS Style define within <style type="text/css">.....</style> element in your <head>.....</head> of your webpage.

@import CSS style consists set of rules in 3 part:

  1. @import (keyword)
  2. url()
  3. CSS file path

How to write @import CSS Style


@import url('styles.css');

Example Code:

style.css
/*CSS Style*/
p {
   color:purple;
   margin-left:20px;
  }
div{
   color:purple;
   font-size:16px;
   background-color:#FF6633;
  }

<html>
<head>
<style>
	@import url('style.css');
</style>
</head>
<body>
	<p>This is a paragraph line.</p>
	<div>This is a paragraph Second line.</div>
</body>
</html>
		

Run it...   »

Example Result:

This is a paragraph line.

This is a paragraph Second line.