HTML - Style Attribute 1

HTML Style Attribute

Styling of HTML is done with CSS language. HTML style attribute to add styles to an element, such as color, font, size, and more.
In this topic we are going to learn inline styling of element.

Syntax :
<tagname style="property: value;" >

Text color

The CSS color property defines the text color for an HTML element.
Values can be color name, color hex or rgba value.

        <p style="color: red;" >Red colored text</p>

Red colored text with color: red;

Hex code colored text with color: #3f51b5;

Background color

The CSS background-color property defines the background color for an HTML element
Values can be color name, color hex or rgba value.

        <p style="background-color:rgb(82, 212, 228);" >rgba() code background colored text</p>

Yellow background colored text with background-color: yellow;

rgba() code background colored text with background-color: rgb(82, 212, 228);

Dimension: width & height

The CSS width and height property defines the width & height for an HTML element respectively
Values can be px, %, rem, em.

        <p style="width: 50%; height: 100px; background-color: #faebd7;"  >Text with font-size:30px</p>

Text line in div of 50% width & height: 100px

Text Alignment

The CSS text-align property defines the horizontal text alignment for an HTML element.

        <p style="font-size: 30px" >Text with font-size:30px</p>

Center aligned text with text-align: center;

Center aligned text with text-align: right;

Center aligned text with text-align: left;

Float

The CSS float property specifies how an element should float.

        <p style="float: right" >Text with float: right</p>

Text with float: right

Border

The CSS border property defines the border for an HTML element.
It has 3 css propery combined border-width, border-style usually is solid and border-color. border can be defined for 4 different sides separately

border: 2px solid #ff0000;

        <p style="border: 2px solid #ff0000;" >Text with border: 2px solid #ff0000;</p>

Text with border: 2px solid #ff0000;

Padding

The CSS padding property defines the space between its content
padding can be defined for 4 different sides separately

        <p style="padding: 10px; background-color: yellow" >Text line with padding: 10px;</p>

Text line with padding: 10px;

Text line without padding

Margin

The CSS margin property defines the space between adjacent element
margin can be defined for 4 different sides separately

        <div style="padding: 10px; background-color: #faebd7;>
            <p>Div 1</p>
        </div>
        <div style="margin: 10px; padding: 10px; background-color: #faebd7;>
            <p>Div 2</p>
        </div>

Div 1

Div 2