HTML Styles

 HTML Styles

HTML Styles are used to style HTML elements it also means changing defult values.

For instance,styling can change the default values of text color as black, background color as white,text alignment as left ans text size as 12 pixels.

Internal Style Sheet (internal styling)

Using an internal style sheet is also called internal styling.
An Internal Style Sheet is composed of one or more Cascading Style Sheet (CSS) rule-set.

A CSS rule-set consists of a declaration block surrounded by curly braces that contains one or more CSS declarations seprated by semicolons ',' .

Each declaration includes a CSS property name and a value,separated by a colon ':' .

They are all enclosed inside the <style> element with its type="text/css" attribute which is included inside the <head> element.

Internal Style Sheet Syntax


<style> type="text/css">
    p{
        font-size: 14px;
     }
</style>

✓ There will be a lot of Internal Styling examples throughout the entire tutorial so just keep going and enjoy!😊

Inline Styling 

Inline styling is used to style elements using the style attribute with CSS declarations inside which are similar to internal styling.

Inline Styling Syntax

<div style="property: value; property: value;"></div>

Background Color Example:

<!doctype html>
<html>
<head>
    <title> Style Background color </title>
</head>
<body style="background-color: blue;">
    <!-- content goes here -->
</body>
</html>


Output:



Text Color Example:

<!doctype html>
<html>
<head>
    <title> Text color </title>
</head>
<body>
    <p style="color: blue"> My color is blue. </p>
    <p style="color: red"> My color is red. </p>
    <p style="color: green"> My color is green. </p>
    <p style="color: yellow"> My color is yellow. </p>
    <p style="color: pink"> My color is pink. </p>
</body>
</html>

Output:

My color is blue.
My color is red.
My color is green.
My color is yellow.
My color is pink.

Text Font-Family Example:

<!doctype html>
<html>
<head>
    <title> Text Font-Family </title>
</head>
<body>
    <h1 style="font-family: Georgia;"> I am a Georgia. </h2>
</body>
</html>

Output:

   I am a Georgia. 


Text Sizing Example:

<!doctype html>
<html>
<head>
    <title> Text Sizing </title>
</head>
<body>
    <p style="font-size: 25px"> My size is 25 pixels. </p>
    <p style="font-size: 50px"> My size is 50 pixels. </p>
</body>
</html>

Output:

  My size is 25 pixels.
  My size is 50 pixels.

Text Aligning Example:

<!doctype html>
<html>
<head>
    <title> Text Sizing </title>
</head>
<body>
    <p style="text-align: left"> I am aligned left. </p>
    <p style="text-align: center"> I am aligned center. </p>
    <p style="text-align: right"> I am aligned right. </p>
</body>
</html>

Output:






    
                                                                                

Post a Comment

Post a Comment (0)