HTML Styles



These style sheets are define how webpages are presented on screens.

w3c has promoted the use of style sheets on the web science.

The <style >element included inside the <head >of the Document.

Cascading Style Sheets (CSS) that has been developed to meet the needs o website designers and user.

Here Three Ways of implementing style sheets HTML

  • Inline Style :The style attribute is used inside the HTML start tag.
  • Internal Style :The style element is used inside the <head > element of the document.
  • External Style Sheet :on this method the <link > element is used to point to an external CSS file.

Inline Style

<h1 style="color:red;fontsize:15px;">CSS Inline Style</h1>

Example

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


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


Internal Style

<style type="text/css">....................</style>


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.


External Style

<link rel="stylesheet" type="text/css" href="/html/css/externalstyle.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.





HTML

Welcome HTML Getting Started HTML Elements HTML Attributes HTML Headings HTML Paragraphs HTML Links HTML Styles HTML Text Formatting HTML Tables HTML Images HTML Forms HTML Lists HTML Iframes HTML Comments HTML CSS HTML Colors HTML Classes HTML Id HTML javascript HTML Filepaths

HTML Advanced

HTML Doctypes HTML Validation HTML Validation HTML URL HTML URL Encode HTML URL Entities HTML Layout HTML Head HTML Meta HTML Scripts HTML Tags

HTML Media

HTML Media HTML Audio HTML Video HTML Plug-ins HTML Youtube

HTML Graphics

HTML Canvas HTML SVG