Basic Formatting Tags

Index

  1. HTML Basic Tags
  2. Text Styles
  3. Other Text Effects
  4. Spacing
  5. HTML Color Coding

HTML Basic Tags

Tag Description
<! DOCTYPE…> Defines the document type
<html> Defines an HTML document
<head> Contains metadata/information for the document
<title> Defines a title for the document
<body> Defines the document's body
<h1> to <h6> Defines HTML headings
<p> Defines a paragraph
<!--...--> Defines a comment
<br> Inserts a single line break
<hr> Defines a thematic change in the content

Text Style

The appearance of an HTML page can be changed with the style attribute. The HTML style attribute is used to add styles to an element, such as color, font, size, and more.

Bold

The font-weight property specifies the weight of a font:

Example: 
<!DOCTYPE html>
<html>
  <head>
    <style>
    p.normal {
      font-weight: normal;
    }
    p.light {
      font-weight: lighter;
    }
    p.thick {
      font-weight: bold;
    }
    p.thicker {
      font-weight: 900;
    }
    </style>
  </head>
  <body>
    <h1>The font-weight property</h1>
    <p class="normal">This is a paragraph.</p>
    <p class="light">This is a paragraph.</p>
    <p class="thick">This is a paragraph.</p>
    <p class="thicker">This is a paragraph.</p>
  </body>
</html>
Output:

Italics

The font-style property is mostly used to specify italic text.

Example: 
<!DOCTYPE html>
<html>
  <head>
    <style>
    p.normal {
      font-style: normal;
    }
    p.italic {
      font-style: italic;
    }
    p.oblique {
      font-style: oblique;
    }
    </style>
  </head>
  <body>
    <h1>The font-style property</h1>
    <p class="normal">This is a paragraph in normal style.</p>
    <p class="italic">This is a paragraph in italic style.</p>
    <p class="oblique">This is a paragraph in oblique style.</p>
  </body>
</html>
Output:

Underline

The text-decoration-line property sets the kind of text decoration to use (like underline, overline, line-through).

Example: 
<!DOCTYPE html>
<html>
  <head>
    <style>
    div.a {
      text-decoration-line: overline; 
    }
    div.b {
      text-decoration-line: underline; 
    }
    div.c {
      text-decoration-line: line-through; 
    }
    div.d {
      text-decoration-line: overline underline; 
    }
    </style>
  </head>
  <body>
    <h1>The text-decoration-line Property</h1>
    <div class="a">This is some text with a line on top.</div>
    <br>
    <div class="b">This is some text with an underline.</div>
    <br>
    <div class="c">This is some text with a line-through.</div>
    <br>
    <div class="d">This is some text with an overline and an underline.</div>
  </body>
</html>
Output:

Other Text Effects

Text Overflow

The CSS text-overflow the property specifies how overflowed content that is not displayed should be signaled to the user.

Example: 
<!DOCTYPE html>
<html>
  <head>
    <style> 
      p.test1 {
        white-space: nowrap; 
        width: 200px; 
        border: 1px solid #000000;
        overflow: hidden;
        text-overflow: clip;
      }

      p.test2 {
        white-space: nowrap; 
        width: 200px; 
        border: 1px solid #000000;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    </style>
  </head>
  <body>
    <h1>The text-overflow Property</h1>
    <p>The following two paragraphs contains a long text that will not fit in the box.</p>
    <h2>text-overflow: clip:</h2>
    <p class="test1">This is some long text that will not fit in the box</p>
    <h2>text-overflow: ellipsis:</h2>
    <p class="test2">This is some long text that will not fit in the box</p>
  </body>
</html>
Output:

Word Wrapping

The CSS word-wrap the property allows long words to be able to be broken and wrap onto the next line. If a word is too long to fit within an area, it expands outside:

Example: 
<!DOCTYPE html>
<html>
  <head>
    <style> 
    p.test {
      width: 11em; 
      border: 1px solid #000000;
      word-wrap: break-word;
    }
    p.test-not {
      width: 11em; 
      border: 1px solid #000000;
    }
    </style>
  </head>
  <body>
    <h1>The word-wrap Property</h1>
    <p class="test-not">This paragraph contains a very long word: thisisaveryveryveryveryveryverylongword. The long word will break and wrap to the next line.</p>
    <p class="test">This paragraph contains a very long word: thisisaveryveryveryveryveryverylongword. The long word will break and wrap to the next line.</p>
  </body>
</html>
Output:

Word Breaking

The CSS word-break the property specifies line breaking rules.

Example: 
<!DOCTYPE html>
<html>
  <head>
    <style> 
    p.test1 {
      width: 140px; 
      border: 1px solid #000000;
      word-break: keep-all;
    }
    p.test2 {
      width: 140px; 
      border: 1px solid #000000;
      word-break: break-all;
    }
    </style>
  </head>
  <body>
    <h1>The word-break Property</h1>
    <p class="test1">This paragraph contains some text. This line will-break-at-hyphens.</p>
    <p class="test2">This paragraph contains some text. The lines will break at any character.</p>
  </body>
</html>
Output:

Writing Mode

The CSS writing-mode property specifies whether lines of text are laid out horizontally or vertically.

Example: 
<!DOCTYPE html>
<html>
  <head>
    <style> 
    p.test1 {
      writing-mode: horizontal-tb; 
    }
    span.test2 {
      writing-mode: vertical-rl; 
    }
    p.test2 {
      writing-mode: vertical-rl; 
    }
    </style>
  </head>
  <body>
    <h1>The writing-mode Property</h1>
    <p class="test1">Some text with default writing-mode.</p>
    <p>Some text with a span element with a <span class="test2">vertical-rl</span> writing-mode.</p>
    <p class="test2">Some text with writing-mode: vertical-rl.</p>
  </body>
</html>
Output:

Center Align Text

To just center the text inside an element, use text-align: center;

Example: 
<!DOCTYPE html>
<html>
  <head>
    <style>
    .center {
      text-align: center;
      border: 3px solid green;
    }
    </style>
  </head>
  <body>
    <h2>Center Text</h2>
    <div class="center">
      <p>This text is centered.</p>
    </div>
  </body>
</html>
Output:

Center an Image

To center an image, set left and right margin to auto and make it into a block element:

Example: 
<!DOCTYPE html>
<html>
  <head>
    <style>
    img {
      display: block;
      margin-left: auto;
      margin-right: auto;
    }
    </style>
  </head>
  <body>
    <h2>Center an Image</h2>
    <p>To center an image, set left and right margin to auto, and make it into a block element.</p>
    <img src="https://media.istockphoto.com/photos/mountain-landscape-picture-id517188688?k=20&m=517188688&w=0&h=pCjvUkNlz9_esVvQw2Wgc8VJZBMgJrB0FQmktCA0KYY=" alt="Paris" style="width:40%">
  </body>
</html>
Output:

Spacing

Text Indentation

The text-indent property is used to specify the indentation of the first line of a text:

Example: 
<!DOCTYPE html>
<html>
  <head>
    <style>
    p {
      text-indent: 50px;
    }
    </style>
  </head>
  <body>
    <h1>Using text-indent</h1>
    <p>In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since. 'Whenever you feel like criticizing anyone,' he told me, 'just remember that all the people in this world haven't had the advantages that you've had.'</p>
  </body>
</html>
Output:

Letter Spacing

The letter-spacing property is used to specify the space between the characters in a text.

Example: 
<!DOCTYPE html>
<html>
  <head>
    <style>
    h2 {
      letter-spacing: 5px;
    }
    h3 {
      letter-spacing: -2px;
    }
    </style>
  </head>
  <body>
    <h1>Using letter-spacing</h1>
    <h2>This is heading 1</h2>
    <h3>This is heading 2</h3>
  </body>
</html>
Output:

Line Height

The line-height property is used to specify the space between lines:

Example: 
<!DOCTYPE html>
<html>
  <head>
    <style>
    p.small {
      line-height: 0.7;
    }
    p.big {
      line-height: 1.8;
    }
    </style>
  </head>
  <body>
    <h1>Using line-height</h1>
    <p>
      This is a paragraph with a standard line-height.<br />
      The default line height in most browsers is about 110% to 120%.<br />
    </p>
    <p class="small">
      This is a paragraph with a smaller line-height.<br />
      This is a paragraph with a smaller line-height.<br />
    </p>
    <p class="big">
      This is a paragraph with a bigger line-height.<br />
      This is a paragraph with a bigger line-height.<br />
    </p>
  </body>
</html>
Output:

Word Spacing

The word-spacing property is used to specify the space between the words in a text.

Example: 
<!DOCTYPE html>
<html>
  <head>
    <style>
    p.one {
      word-spacing: 10px;
    }
    p.two {
      word-spacing: -2px;
    }
    </style>
  </head>
  <body>
    <h1>Using word-spacing</h1>
    <p>This is a paragraph with normal word spacing.</p>
    <p class="one">This is a paragraph with larger word spacing.</p>
    <p class="two">This is a paragraph with smaller word spacing.</p>
  </body>
</html>
Output:

HTML Color Coding

Colors are specified using predefined color names, or RGB, HEX, HSL, RGBA, HSLA values.

CSS Color Names

In CSS, a color can be specified by using a predefined color name:

Example: 
<!DOCTYPE html>
<html>
  <body>
    <h1 style="background-color:DodgerBlue;">Hello World</h1>
    <p style="color:DodgerBlue;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
  </body>
</html>
Output:

RGB Value

In CSS, a color can be specified as an RGB value, using this formula: rgb(red, green, blue)
Each parameter (red, green, and blue) defines the intensity of the color between 0 and 255.
For example, rgb(255, 0, 0) is displayed as red, because red is set to its highest value (255) and the others are set to 0.

Example: 
<!DOCTYPE html>
<html>
  <body>
    <h1>Specify colors using RGB values</h1>
    <h2 style="background-color:rgb(255, 0, 0);">rgb(255, 0, 0)</h2>
    <h2 style="background-color:rgb(0, 0, 255);">rgb(0, 0, 255)</h2>
    <h2 style="background-color:rgb(60, 179, 113);">rgb(60, 179, 113)</h2>
    <h2 style="background-color:rgb(255, 165, 0);">rgb(255, 165, 0)</h2>
    <h2 style="background-color:rgb(106, 90, 205);">rgb(106, 90, 205)</h2>
  </body>
</html>
Output:

RGBA Value

RGBA color values are an extension of RGB color values with an alpha channel - which specifies the opacity for a color. An RGBA color value is specified with: rgba(red, green, blue, alpha)
The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (not transparent at all):

Example: 
<!DOCTYPE html>
<html>
  <body>
    <h1>Make transparent colors with RGBA</h1>
    <h2 style="background-color:rgba(255, 99, 71, 0);">rgba(255, 99, 71, 0)</h2>
    <h2 style="background-color:rgba(255, 99, 71, 0.2);">rgba(255, 99, 71, 0.2)</h2>
    <h2 style="background-color:rgba(255, 99, 71, 0.4);">rgba(255, 99, 71, 0.4)</h2>
    <h2 style="background-color:rgba(255, 99, 71, 0.6);">rgba(255, 99, 71, 0.6)</h2>
    <h2 style="background-color:rgba(255, 99, 71, 0.8);">rgba(255, 99, 71, 0.8)</h2>
    <h2 style="background-color:rgba(255, 99, 71, 1);">rgba(255, 99, 71, 1)</h2>
  </body>
</html>
Output:

HEX Value

In CSS, a color can be specified using a hexadecimal value in the form: #rrggbb
Where rr (red), gg (green) and bb (blue) are hexadecimal values between 00 and ff (same as decimal 0-255).
For example, #ff0000 is displayed as red, because red is set to its highest value (ff) and the others are set to the lowest value (00).

Example: 
<!DOCTYPE html>
<html>
  <body>
    <h1>Specify colors using HEX values</h1>
    <h2 style="background-color:#ff0000;">#ff0000</h2>
    <h2 style="background-color:#0000ff;">#0000ff</h2>
    <h2 style="background-color:#3cb371;">#3cb371</h2>
    <h2 style="background-color:#ee82ee;">#ee82ee</h2>
    <h2 style="background-color:#ffa500;">#ffa500</h2>
    <h2 style="background-color:#6a5acd;">#6a5acd</h2>
  </body>
</html>
Output:

3 Digit HEX Value

Sometimes you will see a 3-digit hex code in the CSS source. The 3-digit hex code is a shorthand for some 6-digit hex codes. The 3-digit hex code has the following form: #rgb
Where r, g, and b represents the red, green, and blue components with values between 0 and f.
The 3-digit hex code can only be used when both the values (RR, GG, and BB) are the same for each components. So, if we have #ff00cc, it can be written like this: #f0c.

Example: 
<!DOCTYPE html>
<html>
  <head>
    <style>
    body {
      background-color: #fc9; /* same as #ffcc99 */
    }
    h1 {
      color: #f0f; /* same as #ff00ff */
    }
    p {
      color: #b58; /* same as #bb5588 */
      }
    </style>
  </head>
  <body>
    <h1>CSS 3-digit Hex Code</h1>
    <p>This is a paragraph.</p>
  </body>
</html>
Output:

HSL Value

In CSS, a color can be specified using hue, saturation, and lightness (HSL) in the form: hsl(hue, saturation, lightness)
Hue is a degree on the color wheel from 0 to 360. 0 is red, 120 is green, and 240 is blue.
Saturation is a percentage value, 0% means a shade of gray, and 100% is the full color.
Lightness is also a percentage, 0% is black, 50% is neither light or dark, 100% is white

Example: 
<!DOCTYPE html>
<html>
  <body>
    <h1>Specify colors using HSL values</h1>
    <h2 style="background-color:hsl(0, 100%, 50%);">hsl(0, 100%, 50%)</h2>
    <h2 style="background-color:hsl(240, 100%, 50%);">hsl(240, 100%, 50%)</h2>
    <h2 style="background-color:hsl(147, 50%, 47%);">hsl(147, 50%, 47%)</h2>
    <h2 style="background-color:hsl(300, 76%, 72%);">hsl(300, 76%, 72%)</h2>
    <h2 style="background-color:hsl(39, 100%, 50%);">hsl(39, 100%, 50%)</h2>
    <h2 style="background-color:hsl(248, 53%, 58%);">hsl(248, 53%, 58%)</h2>
  </body>
</html>
Output:

HSLA Value

HSLA color values are an extension of HSL color values with an alpha channel - which specifies the opacity for a color. An HSLA color value is specified with: hsla(hue, saturation, lightness, alpha)
The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (not transparent at all):

Example: 
<!DOCTYPE html>
<html>
  <body>
    <h1>Make transparent colors with HSLA</h1>
    <h2 style="background-color:hsla(9, 100%, 64%, 0);">hsla(9, 100%, 64%, 0)</h2>
    <h2 style="background-color:hsla(9, 100%, 64%, 0.2);">hsla(9, 100%, 64%, 0.2)</h2>
    <h2 style="background-color:hsla(9, 100%, 64%, 0.4);">hsla(9, 100%, 64%, 0.4)</h2>
    <h2 style="background-color:hsla(9, 100%, 64%, 0.6);">hsla(9, 100%, 64%, 0.6)</h2>
    <h2 style="background-color:hsla(9, 100%, 64%, 0.8);">hsla(9, 100%, 64%, 0.8)</h2>
    <h2 style="background-color:hsla(9, 100%, 64%, 1);">hsla(9, 100%, 64%, 1)</h2>
  </body>
</html>
Output:

Comments

Post a Comment

Popular posts from this blog

Adding Graphics to HTML Documents

Image
Index Graphics to HTML Img in HTML Img Attributes Border Attribute Width and Height Attribute Aligh Attribute Alt Attribute Graphics to HTML In the beginning, graphics was not supported by the web pages only texts are used. But later on images and other types of multimedia files are embedded with web pages. Img in HTML The graphics are embedded in a HTML pages using a simple tag which is represented by <IMG>. We can also embed the images inside other elements such as anchors. When embedded inside an anchor, then the user left clicks on the image, they will go to the designated link (rather, their browser will load a file from the designated link). The <IMG> element has no ending tag. IMG Attributes ...
Read more

Table

Image
Index HTML Table Html Table Tags Width and Border Cell padding Cell spacing BGCOLOR COLSPAN and ROWSPAN HTML Table An HTML <table> tags are used to create different table in our web pages. Each table row is defined with the <tr> tag. A table header is defined with the <th> tag. By default, table headings are bold and centered. A table data/cell is defined with the <td> tag. Html Table Tags Tag Description <table> Displays a table <th> Represents a header cell in a table <tr> ...
Read more

Introduction to HTML

Image
Index Web Server Web Client/Browser Hyper Text Markup Language - HTML HTML Tags Types of Tags in HTML (Paired and Singular tags) Commonly used HTML Commands Title Footer Text Formatting Web Server Web server is dedicated computers that uses HTTP to serve web pages. the web server has an IP address and a domain name. By entering URL https:www.mk7college.com/index.html in the browser, it requests to the webserver having a domain name, "mk7college.com". The server in response fetches the page named index.html to the browser. Any computer can act as a web server after installing server software on it There are many web server software, like public domain software and commercial packages. Web server working The web server responds to the client's re...
Read more