W3C Designer

types of css in html

7/06/2021
Hacker

what is css

Cascading Style Sheets (CSS) are used to set the style in web pages that contain HTML elements. It allows us to add effects or animations to the website.

Website will not look attractive without using CSS.

css types | types of css in html

There are 3 ways to add CSS styles to an HTML document. which are called types of CSS

  1. Inline CSS
  2. Internal CSS or Embedded CSS
  3. External CSS

Inline CSS

When we have to style any specific html element or any line of html document then inline css is used. Inline stylesheet is used to apply unique style to the single HTML element.

  • An inline CSS uses the style attribute of an HTML element.
  • For inline CSS style, we will only required to add the style attribute to every HTML tag, without using selectors.
  • Inline CSS is used to style a specific HTML element.

Syntax

  • <tag_name style="property: value;">...</tag_name>

you can understood this in following css line

  • <h1 style="color:red;"> W3 Code Designer </h1>

Example

  • <!DOCTYPE html>
  • <html>
  • <body>
  • <h1 style="color:red; margin-left:40px;">W3 Code Designer</h1>
  • <p>This paragraph is not affected.</p>
  • </body>
  • </html>

Output

W3 Code Designer

This paragraph is not affected.

Here h1 is styled inline, due to which the color is red in the output and the margin is 40px to the left. And as there is no style in p tag then no change is visible in its output.

Advantages of inline css

  • You can easily and quickly insert CSS rules to an HTML page. That's why this technique is useful for testing or previewing changes, and performing quick-fixes to web pages.
  • You don’t need to create and upload a separate document as in the external style.

Disadvantages of inline css

  • Adding CSS rules for every HTML element is time destroying and make HTML structure messy.
  • Styling multiple elements can affect your page’s size and download time.

Internal CSS

Internal or embedded CSS requires you to add a <style> tag to the <head> section of your HTML document. This CSS styling is an efficient way to style a page. However, using CSS internal style for various web pages is time consuming as we need to put CSS rules on every web page of our website.

Internal or Embedded CSS can be used when an HTML document needs to be uniquely styled. The CSS rule set must be in the head section within the HTML file i.e. the CSS is embedded within the HTML file.

  • An internal stylesheet is used to specify a style for a only single HTML page.
  • An internal CSS is defined within the <style> element in the <head> section of an HTML page.
  • Internal styles apply to entire pages but not to multiple HTML documents.

Syntax

  • <style> selector { property: value; } selector { property: value; } </style>

you can understood this in following css line

  • <style> body { background-color: linen; } h1 { color: green; margin-left: 30px; } </style>

Example

<!DOCTYPE html>  
<html>  
<head>  
<style>  
body {  
    background-color: linen;  
} 
h1 {  
    color: green;  
    margin-left: 30px;  
}   
</style>  
</head>  
<body>  
<h1>The internal style sheet is work on this heading.</h1>  
<p>This paragraph will not be affected.</p>  
</body>  
</html>

Output

The internal style sheet is applied on this heading.

This paragraph will not be affected.

Advantages of internal css

  • Internal style sheets affect only the page they are on.
  • Internal style sheets can use classes and IDs.
  • They do not require that you upload more than one file.
  • They may have a higher priority than external style sheets.

Disadvantages of internal css

  • They only affect the page they are on.
  • Internal style sheets increase page load times.

External CSS

CSS external style sheet means that we upload all styling properties and values in a separate file which extension is .css. Then, link the css file to our website.

CSS External Stylesheets refers to .css documents that contain CSS properties and values for the entire website. Multiple pages can be styled by repeating the same section of interior styles.

  • A CSS External Stylesheet is a .css file that contains all the CSS rules.
  • You can link CSS to HTML by using the <link> element.
  • Modifications and updates to the .css file will be applicable to the entire website. Linking HTML to CSS is the best option for easy website maintenance.

css files cannot contain html tags

Syntax

  1. <link rel="stylesheet" type="text/css" href="css_path">

you can understood this in following css line

  1. <head>
  2. <link rel="stylesheet" type="text/css" href="w3code.css">
  3. </head>

Example

Here is the code of a css file named w3code.css

h1 {
color:red;
}

p {

}

body {
background-color:#000;
}

Here the code of a Html file is shown in which the above css file is also linked whose name is w3code.css.

  • <html>
  • <head>
  • <title>External css</title>
  • <link rel='stylesheet' type='text/css' href='w3code.css'>
  • </head>
  • <body>
  • <h1>This is w3code Designer and its color is red</h1>
  • <p>The color of this paragraph is yellow</p>
  • </body>
  • </html>

Output

This is w3code Designer and its color is red

The color of this paragraph is yellow

Advantages of external css

  • Since the CSS styling code is in a separate file, our HTML documents will have a cleaner structure and it be smaller in the size.
  • You can use the same .css file for multiple pages.
  • It Increase the speed of web page.

Disadvantages of external css

  • Our pages may not render correctly until the external CSS is loaded.
  • Uploading or linking multiple CSS files can increase your site's download time.

No comments:

Post a Comment