saftutorials.com
CSS Structure

CSS Structure is important part of CSS. If you learn CSS structure then you can use it anytime anywhere in your HTML file. 

You know CSS are three types like: 1) Inline Style, 2) embedded styles and 3) External styles.

Today we learn this three type CSS structure.


Inline CSS Structure
Inline Style structure

Inline Style structure

    <p style="font-size:24px; color:red">Sample Text</p> <!-- here use inline css -->

Embeded CSS Structure






Embeded Style structure

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>CSS Tutorials</title>
        <style>  <!-- here start define embeded css code -->
         body{
          background:#dddddd;
         }
          h1{
            color:green;
          }
          p{
            color:red;
          }
        </style>  <!-- here end define embeded css code -->
    </head>
<body>
    <h1>HTML Heading</h1>
    <p>HTML Paragraph</p>
</body>
</html>

 

external Style structure

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>CSS Tutorials</title>
        <link rel="stylesheet" type="text/css" href="styles.css"> <!-- here link embeded css code --> 
    </head>
<body> 
    <h1>HTML Heading</h1>
    <p>HTML Paragraph</p>
</body>
</html>

Find us on

Facebook Google Plus Twitter Pinterest YouTube

web statistic