Html Style





What is HTML Styles?

Html style:

HTML Styles are used to style HTML elements it also means changing default values. For instance, styling can change the default


values of text color as black, background color as white, text alignment as left and text size as 12 pixels.



What is Internal style sheet in Html? 


Internal style sheet: 


An internal style sheet in HTML is a section of code that is placed within the head section of an HTML document 
and is used to define the styles for the elements on the page. 

It is called an "internal" style sheet because it is contained within the same document as the elements it is styling. Here is an example of an internal style sheet.


<head> <style> /* CSS styles go here */ body { background-color: #f2f2f2; } h1 { font-size: 24px; color: #333; } p { font-size: 18px; color: #555; } </style> </head>



In this example, the internal style sheet is defining the background color of the body, the font size and color of h1 elements, and the font size and color of p elements. These styles will be applied to the corresponding elements on the page.


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 selector and a
declaration block surrounded by curly braces that contains one or more CSS declarations separated 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 
Example thought-out the entire tutorials
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; >

Background Color Example:


<!DOCTYPE html> 
<html>
<head>
<title> Try It Yourself </title>
</head>
<body style="background-color: gold"
<!-- content goes here →→>
</body>
</html>

Output:


Text Color Example:

<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>

Output:

My color is blue.

My color is red.

My color is green. 

My color yellow..

My color is pink.

Text Font-Family Example:

<h1 style="font-family: Times New Roman"> I am a Times New Roman</h1>

Output:


Text Sizing Example:

<p style="font-size: 25px" >My size is 25px</p>
<p style="font-size: 50px" >My size is 50px</p>

Output:



Text Aligning Example:

<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>


Output:

I am aligned left.

I am aligned center.

I am aligned right.


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