Skip to main content Skip to docs navigation

HTML Styles

HTML Styles

On this page

HTML Styles 

<!DOCTYPE html>
    <html>
    
    <head>
        <title>HTML style</title>
    </head>
    
    <body>
        <p>Normal Paragraph</p>
        <p style="font-size:50px; text-align:center; color:red;">I am Big</p>
        <p style="font-family: fantasy;">This is a Paragraph</p>
    </body>
    
    </html>

Output

Normal Paragraph

I am Big

This is a Paragraph

Background Color 

<!DOCTYPE html>
        <html>
        
        <head>
            <title>HTML style</title>
        </head>
        
        <body>
            <p style="background-color: aqua;">background-color: aqua</p>
           <p style="background-color:#dc3545;">background-color:#dc3545</p>
           <p style="background-color: rgb(26 135 84);">background-color: rgb(26 135 84)</p>
           <p style="background-color:rgba(13, 110, 253, 1);">background-color:rgba(13, 110, 253, 1)</p>
           <p style="background-color:hsl(355 72% 91%);">hsl(355 72% 91%)</p>         
        </body>  
      </html>

Output

background-color: aqua
background-color:#dc3545
background-color: rgb(26 135 84)
background-color:rgba(13, 110, 253, 1)
hsl(355 72% 91%)

Text Color 

<!DOCTYPE html>
    <html>
    
    <head>
      <title>HTML style</title>
    </head>
    
    <body>
     <p style="color:green;">color:green</p>
     <p style="color:blue;">color:blue</p>
    </body>
    
    </html>
    
    </html>

Output

color:green

color:blue

Fonts Family 

<!DOCTYPE html>
    <html>
    
    <head>
        <title>HTML style</title>
    </head>
    
    <body>
        <p style="font-family:Arial;">font-family:Arial</p>
        <p style="font-family:Helvetica;">font-family:Helvetica</p>
    </body>
    
    </html>

Output

font-family:Arial
    
    font-family:Helvetica

Text Size 

<!DOCTYPE html>
    <html>
    
    <head>
        <title>HTML style</title>
    </head>
    
    <body>
        <p style="font-size: 20px;">font-size: 20px</p>
        <p style="font-size: 100%;">font-size 100%</p>
        <p style="font-size:large;">font-size:large</p>
        <p style="font-size: small;">font-size:small</p>
        <p style="font-size: 1rem;">font-size: 1rem</p>
        <p style="font-size: 1.5em;">font-size: 1.5em</p>
    </body>
    
    </html>

Output

font-size: 20px

font-size 100%

font-size:large

font-size:small

font-size: 1rem

font-size: 1.5em

Text Alignment 

<!DOCTYPE html>
    <html>
    
    <head>
        <title>HTML style</title>
    </head>
    
    <body>
        <p style="text-align: left;">text-align: left</p>
        <p style="text-align: center;">text-align: center</p>
        <p style="text-align: right;">text-align: right</p>
    </body>
    
    </html>

Output

text-align: left

text-align: center

text-align: right