Different ways to integrate a CSS into a Web page

There are three ways to integrate CSS into a Web page

a.) Inline: HTML elements may have CSS applied to them via the STYLE attribute.

Explanation:

  • Internal Styles Cannot be reused at all,period. Inline styles are placed directly inside an HTML element in the code.

Example:

<p style=”padding-left: 150px;”>LORUM IPSUM </p>

b.) Internal / Embedded: By placing the code in a STYLE element within the HEAD element.

Explanation:

  • These styles can be used only for webpage in which they are embedded.
  • Therfore, you would need to create these styles over and over again for each webpage you wish to style.

Example:

<head>
<style>
body
{
    background-color: linen;
}

h1 {
    color: maroon;
    margin-left: 40px;
}
</style>
</head>


c.)External: Place the CSS in an external file and link it via a link element.

Explanation:

  • An External Style sheet is a separate file which is then linked to the web page.
  • The External Style Sheet is basically a text file that is saved as a .css file.
  • we place the link in the <head> section of the page.

Example:

<head>
<title>
<link href=”main.css” rel=”stylesheet” type=”text/css”>
</title>
</head>

Advertisements
Posted in Css

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s