CSS Integrstion

Cascading Style Sheets come in three flavors: internal, external, and inline. We will cover internal and external, as they are the only flavors a designer should utilize. In this lesson, we cover the basics of the easier type
Three Ways to Insert CSS

  • Internal Cascading Style Sheets
  • External Cascading Style Sheets
  • Inline Cascading Style Sheets

Internal Cascading Style Sheets
An internal style sheet should be used when a single document has a unique style. You define internal styles in the head section of an HTML page, inside the <style> tag, like this
Example

<!DOCTYPE html>
<html>
<head>
<style>
body {
    background-color: linen;
}
h1 {
    color: maroon;
    margin-left: 50px;
} 
</style>
</head>
<body>
<h1>What is shiksha360.com</h1>
<p>This is a paragraph.</p>
</body>
</html>

 

Output

What is shiksha360.com

This is a paragraph.

External Style Sheet
An external style sheet is ideal when the style is applied to many pages. With an external style sheet, you can change the look of an entire Web site by changing just one file
Each page must include a link to the style sheet

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

An external style sheet can be written in any text editor. The file should not contain any html tags. The style sheet file must be saved with a .css extension. An example of a style sheet file is shown below:
Style.css

body {
    background-color: lightblue;
}
h1 {
    color: navy;
    margin-left: 20px;
}

Inline Styles
An inline style loses many of the advantages of a style sheet Use this method sparingly!

To use inline styles, add the style attribute to the relevant tag. The style attribute can contain any CSS property. The example shows how to change the color and the left margin of a h1 element:
Example

<h1 style=“color:blue;margin-left:30px;”>This is a heading.</h1>

Cascading order
What style will be used when there is more than one style specified for an HTML element?
Generally speaking we can say that all the styles will “cascade” into a new “virtual” style sheet by the following rules, where number four has the highest priority:

  • Browser default CSS
  • External style sheet
  • Internal style sheet (head section)
  • Inline style (Inside HTML element)
anime porn

Admin has written 171 articles