New Posts
Home / Web Designing / CSS / How to Use External Style Sheet. 

How to Use External Style Sheet. 

How to Use External Style Sheet.

An External style sheet is simply texting files with a .css extension. Typically, they’ll hold multiple styles that are designed to control an entire site or section of a site.  You apply these styles to pages by using a link tag in the head of a document.

External Style Sheet

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

Using a link tag, you can even specify what type of media you would like to apply the styles too, giving you a way to apply different sets of styles to Printers, desktops, and mobile devices.

Using external style sheets is the most efficient way of applying styles across an entire site.

An external style sheet is perfect when the style is used to many pages. With an external style sheet, the look of the entire website is changed when changing is made just one file.

Individually page should contain a link to the style sheet with the <link> tag. The <link> tag goes inside the head section.

External Style Sheet.

Open all three pages create a file from file New save with style.css name.

page1

<!doctype HTML>

<html>

<head>

<title>Using external style sheets</title>

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

</head>

<body>

<h1>This is a page one of the site</h1>

<p>Paragraph text, below the heading one</p>

<div>

<h2>This heading two is inside a div tag</h2>

<p>This paragraph is inside the div tag as well</p>

<p>Additional paragraph content</p>

</div>

</body>

</html>

Page-2.

<!doctype HTML>

<html>

<head>

<title>Using external style sheets</title>

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

</head>

<body>

<h1>This is a page two of the site</h1>

<p>Paragraph text, below the heading one</p>

<h2>I have an extra heading 2 that the other pages don’t have. </h2>

<div>

<h2>This heading two is inside a div tag</h2>

<p>This paragraph is inside the div tag as well</p>

<p>Additional paragraph content</p>

</div>

</body>

</html>

Page-3.

<!doctype HTML>

<html>

<head>

<title>Using embedded styles</title>

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

</head>

<body>

<h1>This is page three of the site</h1>

<p>Paragraph text, below the heading one</p>

<div>

<h2>This heading two is inside a div tag</h2>

<p>This paragraph is inside the div tag as well</p>

<h3>I have an h3 inside the div tag, unlike page 1 and page 2</h3>

<p>Additional paragraph content</p>

</div>

</body>

</html>

Style.css

body{

       font-family:Arial;

       color:gray;

}

h1,h2,h3{

       color:black;

}

div h2{

       color: maroon;

}

External style is the best choice if there are many and many pages you can use this style comfortably. For the most part, you’ll find almost all of your projects will rely heavily on external CSS files with the occasional embedded style used to override global styles.

Regardless of where you place your styles, the most important thing is to have an overall strategy that controls styling side wide and makes it easy for you to maintain or edit the styles when necessary.

Authoring Considerations.

  • Most projects will rely heavily on external styles.
  • Embedded styles are mainly used to overwrite external styles.
  •  You should plan an overall site strategy for style placement.

Multiple Style Sheets.

Stylesheets by priority:

Inline style sheet: an inline stylesheet has the maximum importance. It overrides all the time among all styles like Internal style sheet, external style sheet, and browser styles.

Internal style sheet: an internal style sheet has the second-highest priority. It overrules all the time among an external stylesheet and a web browsers default styles.

External stylesheet: an external style sheet has the 3rd highest priority. It overrides all the time web browser styles.

Browser default styles: A web browsers default styles have the lowest priority because this style is used when there is no any style is declared, like inline, internal, or external stylesheet.

Inline style is discouraged.

 

About imran

My Name Mohammad Ramzan Bhutto. Live in District Jacobabad, Sindh, Pakistan. I have started blogging on Information Technology, my selected areas are Online Business, Digital Marketing, Make Money Online.

Check Also

Embedded Style Sheet

How to Use Embedded Style Sheet.

How to Use Embedded Style Sheet. Embedded Style Sheet or Internal style sheet is same …