Ways To Add CSS

Next ❯CSS Color

HTML pages format the document according to css information

  • turned_in_notThis can be done in three ways
    • External CSS
    • Internal CSS
    • Inline CSS

External CSS

  • Declare style sheet rules in a separate .css file and then include that file in your HTML document using <link> tag
  • <link> element goes inside the <head> section
  • Mainly used to style website, like common style for your whole web pages
Example:
  • turned_in_notExternal CSS
    <!DOCTYPE html>
<html>
<head>
<title>HTML External CSS Example</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
  <p className="blue">This text is blue in color</p>
  <p className="red">This text background is kind of red</p>
</body>
</html>
    "style.css" file
    .blue {
 color:blue;
} 
.red {
  background:#ff6b6b;
  color:white;
}
    OUTPUT

    This text is blue in color

    This text background is kind of red

Internal CSS

  • Preferred, declare style sheet rules in header (<head>) section of the HTML document using <style> tag
  • Mainly used to add specific style to a page, like specific style for your specific page
  • Note! You can also declare style sheet rules in body (<body>) section but don't repeat the rules css-property otherwise browser will pick the last repeated rule css-property which it finds on your web page
Example:
  • turned_in_notInternal CSS
    <!DOCTYPE html>
<html>
<head>
<title>HTML Internal CSS Example</title>
<style>
.text1 { font-size:25px; } 
.red { color:red; }
</style>
</head>
<body>
  <p className="text1">This text font is 25px</p>
  <p className="red">This text is red in color</p>
</body>
</html>
    OUTPUT

    This text font is 25px

    This text is red in color

Inline CSS

  • Declare style sheet rules directly along-with the HTML elements using style attribute
  • Mainly used to add style to specific element in a web page
Example:
  • turned_in_notInline CSS
    <!DOCTYPE html>
<html>
<head>
<title>HTML Inline CSS Example</title>
</head>
<body>
  <h5 style="color:purple;">Purple Heading</h5>
  <p style="color:green;">Text color is green</p>
  <p style="color:red;font-size:10px;">This text is red and 10px in size</p>
</body>
</html>
    OUTPUT
    Purple Heading

    Text color is green

    This text is red and 10px in size

Highest Preference

What if any Selector Properties are defined in all the 3 format, the one which is selected is according to the priority as given below
  • turned_in_notHighest Priority
    • Inline CSS
    • External CSS/Internal CSS (One which is defined later/last in web page)
    • Browser Default

    • So, Inline CSS properties has the highest priority among all
    • Among External CSS & Internal CSS Say, External CSS defined 1st then later Internal CSS defined, in this case Internal CSS properties has highest priority then External CSS properties and vice versa
    • At the end, if no CSS properties are defined then Browser Default will execute for that
Example:

External css : "style.css"
h5{
  color:blue;
}
  • turned_in_notExternal CSS defined after Internal CSS
    <!DOCTYPE html>
<html><head>
<style>
  h5{ color:red; }
</style>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
  <h5>Checkout the text color</h5>
</body></html>
    OUTPUT
    Checkout the text color
  • label_outlineExternal CSS defined before Internal CSS
    <!DOCTYPE html>
<html><head>
<link rel="stylesheet" type="text/css" href="style.css">
<style>
  h5 { color:red; }
</style>
</head>
<body>
  <h5>Checkout the text color</h5>
</body></html>
    OUTPUT
    Checkout the text color

*Important

You can override all the Preference via keyword !important

  • Just add the keyword at the end of specific property value

Here, below example overrides the inline css

<!DOCTYPE html>
<html>
<head>
<style>
  h1{ color:red !important;}
</style>
</head>
<body>
  <h1 style="color:blue">Checkout the text color</h1>
</body>
</html>
OUTPUT
Checkout the text color

  • turned_in_notFinal Highest Priority
    • Inline CSS with !important
    • External CSS/Internal CSS with !important (One which is defined later/last in web page)
    • Inline CSS
    • External CSS/Internal CSS (One which is defined later/last in web page)
    • Browser Default

  • CSS Color
❮ Prev CSS Selectors
Next ❯CSS Color
TryOut Examples"Learn to Explore..!"

TryOut Editor

receipt
❯