Skip to main content

Basic Html Styles

In HTML every element has a default style which is (background color is white, text color is black, text-size is 12px ....) Changing the default style of an HTML element, can be done with the style attribute .
The HTML style attribute has the following syntax : style = "property:value"
BACKGROUND COLOR :
Background color property changes the background color.
Example for Background color :
<!DOCTYPE html>
 <html> 
<body style="background-color: lightgrey">
 <h1>Background color</h1> <p>Background color changed.</p>
 </body>
 </html> 
TEXT COLOR :
Text color property changes the text color for an HTML element .
Example for Text color :
<!DOCTYPE html>
 <html> 
<body>
 <h1 style="color:Gray"> This is a heading</h1> 
<p style="color: pink"> This is a paragraph.</p> 
</body>
 </html> 
TEXT FONTS :
The font-family property defines the font to be used for an HTML element.
Example for Text fonts :
<!DOCTYPE html> 
<html>
 <body>
 <h1 style="font-family:courier"> Heading in courier font</h1> 
<p style="font-family:PT Serif"> paragraph in PT Serif font.</p>
 </body> 
</html>
TEXT SIZE :
The font-size property defines the text size to be used for an HTML element .
Example for Text size :
<!DOCTYPE html>
 <html> 
<body> 
<p style="font-size:190%"> font size is 190%</p>
 <p style="font-size:130%"> font size is 130%</p> 
</body>
 </html> 
TEXT ALIGNMENT :
The text-align property defines the horizontal text alignment for an HTML element
Example for Text alignment :
<!DOCTYPE html>
 <html> 
<body> 
<h1 style="text-align:center"> Heading is Centered</h1>
 <p>This is a paragraph.</p> 
</body> 
</html> 
HTML FORMATTING :
In HTML the text can be formatted in many ways with the ability to make text bold, italicized, or underlined , these are few of the option available to indicate how text can appear in HTML .
BOLD FORMATTING :
Bold formatting property changes the element to bold format,anything that appears within <b>........</b> element,is displayed in bold .
Example for Bold formatting :
<!DOCTYPE html> 
<html> 
<head>
 <title>Bold Formatting</title> 
</head>
 <body> 
<p>The following word uses a <b>bold</b> typeface.</p>
 </body> 
</html> 
ITALIC FORMATTING :
Italic formatting property changes the element to bold format anything that appears within <i>...</i> element is displayed in italicized
Example for Italic Formatting :
<!DOCTYPE html>
 <html>
 <head> 
<title>Italic Text Example</title>
 </head>
<body> 
<p>The following word uses a <i>italicized</i>
 typeface.</p> 
</body> 
</html> 
UNDERLINED and  STRIKE :
Underlined and Strike format property changes the element to underlined and strikethrough,anything that appears within <u>........</u> element is displayed with underline and Anything that appears within <strike>..</strike> element is displayed with strike through.
Example for Underlined and strike :
<!DOCTYPE html>
 <html>
 <head>
 <title>Underlined and Strike Text Example</title> 
</head>
 <body>
 <p>The following word uses a <u>underlined</u> typeface.</p> <p>The following word uses a <strike>strikethrough</strike> typeface.</p>
 </body> 
</html> 
MARKED AND DELETED :
Marked and Deleted format property changes the element to Marked and deleted , anything that appears within <mark>.....</mark> element is displayed as marked text and Anything that appears within <del>.....</del> element is displayed as deleted text.
Example for Marked and Deleted :
<!DOCTYPE html>
 <html> 
<head> 
<title> Marked & Deleted </title> 
</head>
 <body>
 <p> This is <mark>Marked</mark></p> <p> This is <del>Deleted</del> </p>
 </body> 
</html> 
LARGE AND SMALL TEXT:
Large and Small format property changes the element to Larger and small text . The content of the <big>...</big> element is displayed one font size larger than the rest of the text surrounding it . The content of the <small>...</small> element is displayed one font size smaller than the rest of the text surrounding it .
The Example for Large and Small Text :
<!DOCTYPE html> 
<html>
 <head>
 <title>Larger Text Example</title>
 </head> 
<body> 
<p>The following word is in <big>LARGE</big> typeface.</p> <p>The following word is in <small>SMALL</small> typeface.</p>
 </body>
 </html> 
GROUPING CONTENT :
The <div> and <span> elements allow you to group together several elements to create sections or subsections of a page.The <div> tag defines a division or a section in an HTML document.The <span> element can be used to group inline elements only . So , if you have a part of a sentence or paragraph which you want to group together, you could use the <span> element .
Example for Grouping content :
<!DOCTYPE html>
 <html> 
<body> 
<div style="color:steelblue">
 <h3>This is a heading in a div element</h3>
 <p>This is some text in a div element.</p> 
</div> 
<p>This is the example of <span style="color:blue"> span tag</span> </body>
 </html> 
SUPER & SUBSCRIPT :
Superscript and Subscript format property changes the element to Superscript and Subscript . The content of the <sup> ....... </sup> element is displayed in superscript format . The content of the <sub>...</sub> element is displayed in subscript format .
Example of Super & Subscript :
<!DOCTYPE html>
 <html> 
<head>
 <title>Super & Subscript Example </title>
 </head>
 <body> 
<p>The following word uses a <sup>superscript</sup> typeface</p>
 <p>The following word uses a <sub>subscript</sub> typeface</p> 
</body> 
</html> 

To be continue NEXT POST...

Thanks for reading.
Labels:

Comments

Post a Comment

Popular posts from this blog

What is Computer?

 The word computer originates from the word compute which means to calculate. It was initially used to refer to human beings that perform calculations. A computer has been defined so many forms by different authors. Some of the definitions are as follows: - Computer :-  is an electronic device that accepts data as input Process the data and gives out information as output.  - Computer :- It can be defined as an electronic or electromechanical device that is capable of accepting data, holds a means of instruction in its memory, process the information given by following sets of instructions to carry out a task without human intervention and at the end provide significant result. - Computer :- is any machine which accepts data and information presented to it in a prescribed form,carry out some operations on the input and supply the required result in a specified format as information or as signals to control some other machines or process. - Computer :- is an ele...
1 comment
Learn more »

System Analysis and Design: A Comprehensive Overview

System analysis and design is a critical phase in the development of software systems. It involves a structured approach to understanding, defining, and designing solutions to meet business needs or address problems. This process ensures that the resulting system is efficient, effective, and aligned with user requirements. Let's delve into the key components and stages of system analysis and design:  1. System Analysis: Understanding Requirements and Problems In this stage, system analysts gather and analyze information to understand the current system or business processes, identify problems, and determine user needs. The goal is to define the scope and objectives of the project.  Requirements Gathering:  Analysts interact with stakeholders to gather requirements, including functional, non-functional, and user-specific needs. Interviews, surveys, observations, and workshops are used to collect detailed information. Problem Identification:  Existing problems, ineffic...
Post a Comment
Learn more »

Algorithm Analysis ,Time and Space Complexities

An algorithm is a step-by-step procedure or set of rules for solving a problem or performing a specific task. Algorithm analysis involves evaluating the efficiency and performance of algorithms, particularly in terms of their time and space complexities.  These complexities provide insights into how an algorithm's runtime and memory requirements grow as the input size increases.  Time Complexity: Time complexity measures the amount of time an algorithm takes to run as a function of the input size. It helps us understand how the algorithm's performance scales with larger inputs. Common notations used to express time complexity include Big O, Big Theta, and Big Omega. - Big O Notation (O()): It represents the upper bound on an algorithm's runtime.  For an algorithm with time complexity O(f(n)), the runtime won't exceed a constant multiple of f(n) for large inputs. -Big Omega Notation (Ω()): It represents the lower bound on an algorithm's runtime.  For an algorithm w...
Post a Comment
Learn more »