Style Sheet

Next ❯File Paths

Used to design the HTML web pages

  • It is a Part of CSS(Cascading Style Sheets)
  • turned_in_notThis can be done in three ways
    • External Style Sheet
    • Internal Style Sheet
    • Inline Style Sheet
Example:
  • turned_in_notExternal Style Sheet
    • Declare style sheet rules in a separate .css file and then include that file in your HTML document using <link> tag
    <!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 red</p>
</body>
</html>
    "style.css" file
    .blue {
 color:blue;
 } 
 .red {
 background:red;
 color:white;
 }
    OUTPUT

    This text is blue in color

    This text background is red

  • turned_in_notInternal Style Sheet
    • Declare style sheet rules in header section of the HTML document using <style> tag
    <!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

  • turned_in_notInline Style Sheet
    • Declare style sheet rules directly along-with the HTML elements using style attribute
    <!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

  • You will learn more about CSS(Cascading Style Sheets) in new tutorial

  • File Paths
❮ Prev HTML Blocks
Next ❯File Paths
TryOut Examples"Learn to Explore..!"

TryOut Editor

receipt
❯