Programming Tutorials

CSS Style Types>>Topic-01

Topic: How can I set a style in html?

Types of styles:

Basically there are three ways we can set styles for the html tags.

a) Inline
b) Internal
c) External CSS

Inline Styles
This kind of style takes values inline with the html tag

e.g:

Result:

Test Font

Internal Styles

universal,
identifiers,
user defined.

Rule with CSS

A fast and easy method to insert a separating line into a website is with a horizontal rule, the hr tag.

This horizontal rule:

Was bent by the following inline CSS style:

It could also be styled in your inside or exterior style sheet (which is habitually the better come within reach of):

hr {

color: #f00;

background: #f00;

width: 75%;

height: 5px;

}

Note: So as to color AND background-color are practical. This is essential, as some browsers use the background-color, others (IE) the color constituent to apply color to the rule.

HTML Anchor Tag

Example code:

<html>
<title>Hyperlink or Anchor - link to a location on a page
</title>
<body>
<p>
   <a href="#C1">See also Chapter 1.</a><br>
   <a href="#C2">See also Chapter 2.</a><br>
   <a href="#C6">See also Chapter 6.</a><br>
   <a href="#C12">See also Chapter 12.</a><br>
</p>
  <h3><a name="C1">Chapter 1</a></h3>
  <p>This chapter explains about html. </p>

  <h3><a name="C2">Chapter 2</a></h3>
  <p>This chapter explains advanced html tutorial.</p>

  <h3>Chapter 3</h3>
  <p>This chapter explains anchor tag.</p>

  <h3>Chapter 4</h3>
  <p>This chapter explains meta tag.</p>

  <h3>Chapter 5</h3>
  <p>This chapter explains css tutorial.</p>

  <h3><a name="C6">Chapter 6</a></h3>
  <p>This chapter explains about javascript.</p>

  <h3>Chapter 7</h3>
  <p>This chapter explains about image tag.</p>

  <h3>Chapter 8</h3>
  <p>This chapter explains about mapping image.</p>

  <h3>Chapter 9</h3>
  <p>This chapter explains more about meta tag.</p>

  <h3>Chapter 10</h3>
  <p>This chapter explains about multimedia.</p>

  <h3>Chapter 11</h3>
  <p>This chapter explains about frame.</p>

  <h3><a name="C12">Chapter 12</a></h3>
  <p>This chapter explains about iframe.</p>

  <h3>Chapter 13</h3>
  <p>This chapter explains more on anchor tag.</p>

  <h3>Chapter 14</h3>
  <p>This chapter explains about FAQ's.</p>

</body>
</html>

HTML>>acronym/abbreviation

Code:

<acronym title="Cascading Style Sheets">CSS</acronym>
<acronym title="Hyper Text Markup Language">HTML</acronym>
<acronym title="World Wide Web">WWW</acronym>

Result:

CSS - stands for Cascading Style Sheets

HTML - stands for Hyper Text Markup Language

WWW - stands for World Wide Web

HTML Phrase Tags

<em> <strong> <dfn> <code> <samp> <kbd> <var> <cite>.

<em>	Renders as emphasized text
<strong>	Renders as strong emphasized text
<dfn>	Defines a definition term
<code>	Defines computer code text
<kbd>	Defines keyboard text
<var>	Defines a variable
<tt>	Defines a teletype
<cite>	Defines a citation

Code:

<html>
<body>
<em>This is an example for emphasized</em>
<strong>This is an example for strong</strong>
<dfn>This is an example for definition</dfn>
<code>some code..some code... </code>
<kbd>This is an example for Keyboard text</kbd>
<tt>This is an example for teletype</tt>
<cite>Citation</cite>
</body>
</html>

Result:

This is emphasized
This is an example for strong
This is an example for definition
some code..some code...
This is an example for Keyboard text
This is an example for var
This is an example for teletype
Citation

Html>> Canvas

Using the <canvas> element is not very difficult but you do need a basic understanding of HTML and JavaScript. This tag allows you to literally create a blank canvas that you can then "paint" onto using javascript.

code:

<canvas id="test" width='100' height='100'>
// javascript: set up the canvas object for drawing
var canvas = document.getElementById("test");
var context = canvas.getContext("2d");
context.beginPath();
context.moveTo(50,0);
context.lineTo(50,100);
context.stroke();

Html >>Lists with HTML Bullets - (PART_53)

Topic: bullet styles

code:
<ul>
<li> <b>Unordered Lists</b>
   <ul>
   <li type="disc"> Disc bullet
   <li type="circle"> Circle bullet
   <li type="square"> Square bullet
   </ul>

<li> <b>Ordered Lists</b>
   <ul>
   <li> Numbered
      <ul>
      <li> Decimal
      <li> Lowercase Roman numeral
      <li> Uppercase Roman numeral
      </ul>
   <li> Alphabetical
      <ul>
      <li> Lowercase
      <li> Uppercase
      </ul>
</ul>

Result:

Unordered Lists

Disc bullet

Circle bullet

Square bullet

Ordered Lists

Numbered

Decimal
Lowercase Roman numeral
Uppercase Roman numeral

Alphabetical

Lowercase
Uppercas

Example code:
<ol type="a" >
   <li> Decide on order type.
   <li> Use appropriate order styles.
   <li> Enjoy with different bullet styles.
</ol>

Result:

Decide on order type.
Use appropriate order styles.
Enjoy with different bullet styles.

Just change the type of <ol> to <ol="value"> to have the desired ordered list.

Value	Ordering Style
1	1, 2, 3, ...
i	i, ii, iii, ...
I	I, II, III, ...
a	a, b, c, ...
A	A, B, C, ...

Bullets with CSS:

Bullets can also be used with CSS to have a great look. Here let us have an example to add a gif file as bullets for a list using CSS.

Example code:
<ul class="TickList">
<li>hscripts</li>
<li>funmin</li>
<li>indiandir</li>
</ul>

Here goes the CSS style

<style type="text/css"> ul.TickList { list-style-image: url('tick.gif') } </style>

Result:

hscripts
funmin
indiandir

Sunday, January 19, 2014