How to Add CSS



There are Three way to add CSS

  • Inline CSS
  • Internal CSS
  • External CSS

Inline CSS

It is used to add a unique style for a single element.

inline css

Example

<!DOCTYPE html>
    <html>
    <head>
        
    </head>
    <body>
    
        <h1 style="color:red;font-size:35px;">
            CSS Inline Style
        </h1>
        <p style="color:yellow;font-size:60px;">
            Second paragraph
        </p>
        <p style="color:blue;">Content</p>

    </body>
    
    </html>
  


Click on the "Run This Code" button to see how it works.

Internal CSS

The Internal CSS styles sheet is used to add some unique styles for a HTML webpages.

Internal css defined in <head> section of the html Document inside the <style>

internal css

Example

<!DOCTYPE html>
    <html>
    <head>
    <style>
    body {
      background-color: lightblue;
    }
    
    h1 {
      color: red;
      margin-left: 50px;
    } 
    </style>
    </head>
    <body>
    
    <h1>This is a heading</h1>
    <p>This is a paragraph.</p>
    
    </body>
    </html>
    


Click on the "Run This Code" button to see how it works.

External CSS

you can add or change styles an entaire website in just one file.

external css

Example

<!DOCTYPE html>
    <html>
    <head>
        <link rel="stylesheet" type="text/css"
                href="/html/css/externalstyle.css">
    </head>
    <body>
        <h3>Example of Linking External Style Sheet</h3>
        <p> Content.</p>
    </body>
    </html>
  


Click on the "Run This Code" button to see how it works.




CSS

Welcome CSS Syntax CSS Selectors CSS ADD css CSS Borders CSS Backgrounds CSS Colors CSS Padding CSS Margin CSS Fonts CSS Text CSS Outline CSS Box-Model CSS Height&Width CSS Icons CSS Links CSS Lists CSS Display CSS Tables CSS Position CSS Overflow CSS Align CSS Float CSS Inline-block CSS Opacity CSS Image-Gallery CSS Navigation Bar CSS Dropdowns CSS Cursors CSS Forms CSS Pseudo-classes CSS Pseudo-elements

CSS3 FEATURES

CSS Gradients CSS shadows CSS 2D Transforms CSS 3D Transforms CSS Animations CSS Media Queries CSS Flexbox CSS important CSS Units