HTML5-Examples/CSS-Text-Example-1.css at master · skjApp/HTML5-Examples · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
#font-example1
{
	font-family : Georgia;
	font-size : 20px ;
}

/* Text Color Example */
#text-example1
{
	color : red ;
	/* 	Alternatively you can use the following formats :
	 	color : #FF0000 ;
	 	color : rgb(255,0,0) ;
	 */
}

/* Text Highlight Example */
#text-example2
{
	background-color : rgb(0,255,0) ;
}

/* Same Highlight Example as above but using div instead of span */
#text-example3
{
	background-color : rgb(0,255,0) ;
	display : inline ;
}

/* Text Horizontal Alignment Example */
#text-example4
{
	/* Try various examples within this example by commenting and uncommenting various options */
	/* text-align : left ; */
	/* text-align : right ; */
	/* text-align : center ; */
	text-align : justify ; /* Justify shall work nearly same as MS Word's justify button*/
}

/* Text Indent Example */
#text-example5
{
	text-indent : 5% ;			/* Indentation by percentage of width */
	/* text-indent : 10px ; */  /* Indentation by number of pixels */
}

/* Giving Border to div */
#text-example6
{
	/* LEFT BORDER */
	/* Both pieces of code have same effect */
	border-left : 5px double blue ;	/* width style color */

	/* border-left-width : 5px ;
	border-left-style : double;
	border-left-color : blue ; */

	/* BOTTOM BORDER */
	/* Both pieces of code have same effect */
	/* border-bottom : 5px double blue ; */	/* width style color */

	/* border-bottom-width : 5px ;
	border-bottom-style : double;
	border-bottom-color : blue ; */

	/* RIGHT BORDER */
	/* Both pieces of code have same effect */
	/* border-right : 5px dotted blue ; */	/* width style color */

	/* border-right-width : 5px ;
	border-right-style : dotted ;
	border-right-color : blue ; */

	/* TOP BORDER */
	/* Both pieces of code have same effect */
	/* border-top : 5px solid blue ; */	/* width style color */

	/*
	border-top-width : 5px ;
	border-top-style : solid ;
	border-top-color : blue ;
	*/
}

/* Setting the case of the text */
#text-example7
{
	/* text-transform : lowercase ; */
	/* text-transform : uppercase ; */
	text-transform : capitalize;
	/* text-transform : none ; */

}

/* Text Vertical Alignment Example */ /* TEST */
/* #text-example8
{
	height : 30px ;
	background-color : rgb(0,255,0) ;
	/* Try various examples within this example by commenting and uncommenting various options */
	/* text-align : left ; */
	/* text-align : right ; */
	/* text-align : center ; */
	/*vertical-align : middle;
}*/