Lv.29 CSS Tables

CSS Tables เอาไว้สำหรับปรับแต่ง HTML Tables

ชื่อ-นามสกุลที่อยู่เบอร์โทรศัพท์
นายสมชาย โชคดี77 หมู่. 7708-77777777
นางสาวสมใจ เอวดี55 หมู่.5508-55555555
CSS Tables

CSS Tables Border

การระบุเส้นขอบของตารางใน CSS ให้ใช้ Property border

<!DOCTYPE html>
<html lang="th-TH">
	<head>
		<title>nkaub | CSS Tables</title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta charset="UTF-8">
		<meta name="description" content="ทำเว็บไซต์เอง HTML CSS JavaScript jQuery PHP MySql">
		<meta name="keywords" content="ทำเว็บไซต์เอง, HTML, CSS, JavaScript, jQuery, PHP, MySql">
		<meta name="author" content="Theethawat Chetjeerasioon">
		
		<style>
			table, th, td {
				border: 2px solid red;
			}
		</style>
	</head>
	<body>
	
		<table>
			<tr>
				<th>ชื่อ</th>
				<th>นามสกุล</th>
			</tr>
			<tr>
				<td>นาย สมชาย</td>
				<td>โชคดี</td>
			</tr>
			<tr>
				<td>นางสาว สมใจ</td>
				<td>เอวดี</td>
			</tr>
		</table>
		
	</body>
</html>

ทำตารางให้กว้างเต็มจอ

ถ้าต้องการตารางกว้างเต็มจอให้เพิ่ม width: 100% ให้กับอิลิเมนต์ <table>

table {
	width: 100%;
}

จัดตำแหน่งข้อความในตาราง

สามารถใช้ Property text-align ค่าที่ใช้ได้ left center right

ตัวอย่าง

td {
	text-align: center;
}

Responsive ตาราง

ให้เพิ่มอิลิเมนต์ <div> ครอบตาราง และกำหนดสไตล์เป็น overflow-x:auto

ตัวอย่าง

<div style="overflow-x:auto;">
	<table>
		<!-- ข้อมูลตาราง -->
	</table>	
</div>

Lv.28 CSS Lists

CSS Lists จะเป็นการกำหนดคุณสมบัติให้กับ HTML List

Unordered Lists:

  • ส้ม
  • มะม่วง
  • กล้วย

Ordered Lists:

  1. ส้ม
  2. มะม่วง
  3. กล้วย

ตัวอย่าง

<!DOCTYPE html>
<html lang="th-TH">
	<head>
		<title>nkaub | CSS Lists</title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta charset="UTF-8">
		<meta name="description" content="ทำเว็บไซต์เอง HTML CSS JavaScript jQuery PHP MySql">
		<meta name="keywords" content="ทำเว็บไซต์เอง, HTML, CSS, JavaScript, jQuery, PHP, MySql">
		<meta name="author" content="Theethawat Chetjeerasioon">
		
		<style>
			ul.a {
				list-style-type: circle;
			}

			ul.b {
				list-style-type: square;
			}
			
			ol.c {
				list-style-type: upper-roman;
			}

			ol.d {
				list-style-type: lower-alpha;
			}
		</style>
	</head>
	<body>
		Ordered Lists:
		<p>ตัวอย่าง  unordered lists:</p>
		<ul class="a">
			<li>ส้ม</li>
			<li>มะม่วง</li>
			<li>กล้วย</li>
		</ul>

		<ul class="b">
			<li>ส้ม</li>
			<li>มะม่วง</li>
			<li>กล้วย</li>
		</ul>
		
		<p>ตัวอย่าง ordered lists:</p>
		<ol class="c">
			<li>ส้ม</li>
			<li>มะม่วง</li>
			<li>กล้วย</li>
		</ol>

		<ol class="d">
			<li>ส้ม</li>
			<li>มะม่วง</li>
			<li>กล้วย</li>
		</ol>
		
	</body>
</html>

LV.27 CSS Links

CSS Links ลิงก์สามารถกำหนดสไตล์ด้วยคุณสมบัติของ CSS ใดก็ได้ เช่น color, font-family, background

ตัวอย่าง

<!DOCTYPE html>
<html lang="th-TH">
	<head>
		<title>nkaub | CSS Links</title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta charset="UTF-8">
		<meta name="description" content="ทำเว็บไซต์เอง HTML CSS JavaScript jQuery PHP MySql">
		<meta name="keywords" content="ทำเว็บไซต์เอง, HTML, CSS, JavaScript, jQuery, PHP, MySql">
		<meta name="author" content="Theethawat Chetjeerasioon">
		
		<style>
			a {
				font-size: 46px;
			}
			
			/* unvisited link */
			a:link {
				color: blue;
			}

			/* visited link */
			a:visited {
				color: red;
			}

			/* mouse over link */
			a:hover {
				color: gold;
			}

			/* selected link */
			a:active {
				color: green;
			}
		</style>
	</head>
	<body>
	
		<a href="#">Link...</a>
		
	</body>
</html>

Text Decoration

text-decoration ขีดเส้นข้อความ

ตัวอย่าง

<!DOCTYPE html>
<html lang="th-TH">
	<head>
		<title>nkaub | CSS Text Decoration</title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta charset="UTF-8">
		<meta name="description" content="ทำเว็บไซต์เอง HTML CSS JavaScript jQuery PHP MySql">
		<meta name="keywords" content="ทำเว็บไซต์เอง, HTML, CSS, JavaScript, jQuery, PHP, MySql">
		<meta name="author" content="Theethawat Chetjeerasioon">
		
		<style>
			a {
				text-decoration: none;
			}
			
			a:hover {
				font-size: 46px;
				text-decoration: underline;
			}

		</style>
	</head>
	<body>
	
		<a href="#">Link...</a>
		
	</body>
</html>

Background Color

background-color เพิ่มสีพื้นหลังให้ลิงค์

<!DOCTYPE html>
<html lang="th-TH">
	<head>
		<title>nkaub | CSS Background Color</title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta charset="UTF-8">
		<meta name="description" content="ทำเว็บไซต์เอง HTML CSS JavaScript jQuery PHP MySql">
		<meta name="keywords" content="ทำเว็บไซต์เอง, HTML, CSS, JavaScript, jQuery, PHP, MySql">
		<meta name="author" content="Theethawat Chetjeerasioon">
		
		<style>
			a {
				color: #fff;
				padding: 30px;
			}
			
			a:link {
				background-color: yellow;
			}

			a:visited {
				background-color: blue;
			}

			a:hover {
				background-color: green;
			}

			a:active {
				background-color: pink;
			} 
		</style>
	</head>
	<body>
		
		<a href="#">Link...</a>
		
	</body>
</html>

Link Buttons

เป็นการทำลิงค์ให้เป็นปุ่มหรือกล่อง

ตัวอย่าง

<!DOCTYPE html>
<html lang="th-TH">
	<head>
		<title>nkaub | CSS Link Buttons</title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta charset="UTF-8">
		<meta name="description" content="ทำเว็บไซต์เอง HTML CSS JavaScript jQuery PHP MySql">
		<meta name="keywords" content="ทำเว็บไซต์เอง, HTML, CSS, JavaScript, jQuery, PHP, MySql">
		<meta name="author" content="Theethawat Chetjeerasioon">
		
		<style>
			a:link, a:visited {
				background-color: rgb(0,255,0);
				color: white;
				padding: 14px 25px;
				text-align: center;
				text-decoration: none;
				display: inline-block;
			}

			a:hover, a:active {
				background-color: rgba(0,255,0,0.2);
			}
		</style>
	</head>
	<body>
	
		<a href="#">Link...</a>
		
	</body>
</html>

Lv.26 CSS Fonts

CSS Fonts การเลือกแบบอักษรที่เหมาะสมมีผลกระทบอย่างมากต่อประสบการณ์ของผู้อ่านที่มีต่อเว็บไซต์ของเรา แบบอักษรที่เหมาะสมจะสามารถสร้างเอกลักษณ์ให้กับแบรนด์ของเราได้

การใช้แบบอักษรที่อ่านง่ายเป็นสิ่งสำคัญมากๆ และยังเพิ่มคุณค่าให้กับข้อความของเราได้อีกด้วย สิ่งสำคัญก็คือต้องเลือกสีและขนาดตัวอักษรให้เหมาะสมกับผู้ชมทุกๆวัย ได้ยิ่งดี

Syntax

font-family: ชื่อแบบอักษร;

ตัวอย่าง

<!DOCTYPE html>
<html lang="th-TH">
	<head>
		<title>nkaub | CSS Fonts</title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta charset="UTF-8">
		<meta name="description" content="ทำเว็บไซต์เอง HTML CSS JavaScript jQuery PHP MySql">
		<meta name="keywords" content="ทำเว็บไซต์เอง, HTML, CSS, JavaScript, jQuery, PHP, MySql">
		<meta name="author" content="Theethawat Chetjeerasioon">
		
		<style>
			h1 {
				font-family: "Times New Roman", Times, serif;
			}
		</style>
	</head>
	<body>
		
		<h1>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</h1>
		
	</body>
</html>

CSS Fonts แบบอักษรที่ปลอดภัยสำหรับการทำเว็บ HTML และ CSS

แบบอักษรที่ใช้ในการทำเว็บไซต์และมีความปลอดภัยมากที่สุด มีดังต่อไปนี้

  • Arial (sans-serif)
  • Verdana (sans-serif)
  • Helvetica (sans-serif)
  • Tahoma (sans-serif)
  • Trebuchet MS (sans-serif)
  • Times New Roman (serif)
  • Georgia (serif)
  • Garamond (serif)
  • Courier New (monospace)
  • Brush Script MT (cursive)

CSS Font Style

font-style คุณสมบัติส่วนใหญ่จะใช้เพื่อระบุข้อความตัวเอียง

ตัวอย่าง

<!DOCTYPE html>
<html lang="th-TH">
	<head>
		<title>nkaub | CSS Font Style</title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta charset="UTF-8">
		<meta name="description" content="ทำเว็บไซต์เอง HTML CSS JavaScript jQuery PHP MySql">
		<meta name="keywords" content="ทำเว็บไซต์เอง, HTML, CSS, JavaScript, jQuery, PHP, MySql">
		<meta name="author" content="Theethawat Chetjeerasioon">
		
		<style>
			p.normal {
				font-style: normal;
			}

			p.italic {
				font-style: italic;
			}

			p.oblique {
				font-style: oblique;
			}
		</style>
	</head>
	<body>
		
		<p class="narmal">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
		<p class="italic">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
		<p class="oblique">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
		
	</body>
</html>

font-width คุณสมบัติระบุน้ำหนักของแบบอักษร

ตัวอย่าง

<!DOCTYPE html>
<html lang="th-TH">
	<head>
		<title>nkaub | CSS Font Weight</title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta charset="UTF-8">
		<meta name="description" content="ทำเว็บไซต์เอง HTML CSS JavaScript jQuery PHP MySql">
		<meta name="keywords" content="ทำเว็บไซต์เอง, HTML, CSS, JavaScript, jQuery, PHP, MySql">
		<meta name="author" content="Theethawat Chetjeerasioon">
		
		<style>
			p.narmal {
				font-weight: normal;
			}
			
			p.thick {
				font-weight: bold;
			}
			
			p.thicker {
				font-weight: 900;
			}
		</style>
	</head>
	<body>
		
		<p class="narmal">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
		<p class="thick">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
		<p class="thicker">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
		
	</body>
</html>

font-variant ข้อความแสดงเป็นแบบอักษรตัวพิมพ์เล็ก

ตัวอย่าง

<!DOCTYPE html>
<html lang="th-TH">
	<head>
		<title>nkaub | CSS Font Variant</title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta charset="UTF-8">
		<meta name="description" content="ทำเว็บไซต์เอง HTML CSS JavaScript jQuery PHP MySql">
		<meta name="keywords" content="ทำเว็บไซต์เอง, HTML, CSS, JavaScript, jQuery, PHP, MySql">
		<meta name="author" content="Theethawat Chetjeerasioon">
		
		<style>
			p {
				font-variant: small-caps;
			}
		</style>
	</head>
	<body>
		
		<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
		
	</body>
</html>

CSS Font Size

font-size ใช้เพื่อกำหนดขนาดของตัวอักษร หน่วยที่สามารถใช้ในการกำหนดขนาดของตัวอักษร ได้แก่ px em vw

ตัวอย่าง

<!DOCTYPE html>
<html lang="th-TH">
	<head>
		<title>nkaub | CSS Font Size</title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta charset="UTF-8">
		<meta name="description" content="ทำเว็บไซต์เอง HTML CSS JavaScript jQuery PHP MySql">
		<meta name="keywords" content="ทำเว็บไซต์เอง, HTML, CSS, JavaScript, jQuery, PHP, MySql">
		<meta name="author" content="Theethawat Chetjeerasioon">
		
		<style>
			body {
				font-size: 100%;
			}
			
			h1 {
				font-size: 46px;
			}
			
			h2 {
				font-size: 1.875em;
			}
			
			p {
				font-size: 16px;
			}
		</style>
	</head>
	<body>
		
		<h1>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</h1>
		<h2>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</h2>
		<h3 style="font-size:10vw;">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</h3>
		<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
		
	</body>
</html>

Lv.25 CSS Text

CSS Text เป็นการกำหนดคุณสมบัติต่างๆสำหรับการจัดรูปแบบของข้อความ

CSS Text Color

กำหนดสีให้กับข้อความ เช่น red #fff rgb(255,0,0)

ตัวอย่าง

<!DOCTYPE html>
<html lang="th-TH">
	<head>
		<title>nkaub | CSS Text</title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta charset="UTF-8">
		<meta name="description" content="ทำเว็บไซต์เอง HTML CSS JavaScript jQuery PHP MySql">
		<meta name="keywords" content="ทำเว็บไซต์เอง, HTML, CSS, JavaScript, jQuery, PHP, MySql">
		<meta name="author" content="Theethawat Chetjeerasioon">
		
		<style>
			h1 {
				color: red;
			}
			
			h2 {
				color: #0000ff;
			}
			
			p {
				color: rgb(255,165,0);
			}
			
		</style>
	</head>
	<body>
		
		<h1>หัวเรื่อง H1<h/1>
		<h2>หัวเรื่อง H1<h/2>
		<p>พารากราฟ</p>
		
	</body>
</html>

CSS Text Alignment

text-align เป็นการตำแหน่งของข้อความให้อยู่ ซ้าย กลาง ขวา

<!DOCTYPE html>
<html lang="th-TH">
	<head>
		<title>nkaub | CSS Text Alignment</title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta charset="UTF-8">
		<meta name="description" content="ทำเว็บไซต์เอง HTML CSS JavaScript jQuery PHP MySql">
		<meta name="keywords" content="ทำเว็บไซต์เอง, HTML, CSS, JavaScript, jQuery, PHP, MySql">
		<meta name="author" content="Theethawat Chetjeerasioon">
		
		<style>
			h1 {
				color: red;
				text-align: left;
			}
			
			h2 {
				color: #0000ff;
				text-align: center;
			}
			
			p {
				color: rgb(255,165,0);
				text-align: right;
			}
			
		</style>
	</head>
	<body>
		
		<h1>หัวเรื่อง H1</h1>
		<h2>หัวเรื่อง H2</h2>
		<p>พารากราฟ</p>
		
	</body>
</html>

CSS Text Decoration

text-decoration ใช้สำหรับลบเส้นขีดใต้แท็ก <a> หรือเพิ่มขีดเส้นใต้ให้กับข้อความ

ตัวอย่าง

<!DOCTYPE html>
<html lang="th-TH">
	<head>
		<title>nkaub | CSS Text Decoration</title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta charset="UTF-8">
		<meta name="description" content="ทำเว็บไซต์เอง HTML CSS JavaScript jQuery PHP MySql">
		<meta name="keywords" content="ทำเว็บไซต์เอง, HTML, CSS, JavaScript, jQuery, PHP, MySql">
		<meta name="author" content="Theethawat Chetjeerasioon">
		
		<style>
			h1 {
				color: red;
				text-align: left;
				text-decoration: overline;
			}
			
			h2 {
				color: #0000ff;
				text-align: center;
				text-decoration: line-through;
			}
			
			h3 {
				color: rgb(255, 165, 0);
				text-align: right;
				text-decoration: underline;
			}
			
			a {
				text-decoration: none;
			}
			
		</style>
	</head>
	<body>
		
		<h1>หัวเรื่อง H1</h1>
		<h2>หัวเรื่อง H2</h2>
		<h3>หัวเรื่อง H3</h3>
		<a href="#">Text Link..</a>
		
	</body>
</html>

CSS Text Transformation

text-transform ใช้เพื่อระบุตัวพิมพ์ใหญ่และตัวพิมพ์เล็กในข้อความ

ตัวอย่าง

<!DOCTYPE html>
<html lang="th-TH">
	<head>
		<title>nkaub | CSS Text Transformation</title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta charset="UTF-8">
		<meta name="description" content="ทำเว็บไซต์เอง HTML CSS JavaScript jQuery PHP MySql">
		<meta name="keywords" content="ทำเว็บไซต์เอง, HTML, CSS, JavaScript, jQuery, PHP, MySql">
		<meta name="author" content="Theethawat Chetjeerasioon">
		
		<style>
			h1 {
				color: red;
				text-align: left;
				text-decoration: overline;
				text-transform: uppercase;
			}
			
			h2 {
				color: #0000ff;
				text-align: center;
				text-decoration: line-through;
				text-transform: lowercase;
			}
			
			h3 {
				color: rgb(255, 165, 0);
				text-align: right;
				text-decoration: underline;
				text-transform: capitalize;
			}
			
		</style>
	</head>
	<body>
		
		<h1>หัวเรื่อง H1 uppercase</h1>
		<h2>หัวเรื่อง H2 lowercase</h2>
		<h3>หัวเรื่อง H3 capitalize</h3>
		
	</body>
</html>

CSS Text Spacing

text-indent ใช้เพื่อระบุการเยื้องของบรรทัดแรกของข้อความ

ตัวอย่าง

<!DOCTYPE html>
<html lang="th-TH">
	<head>
		<title>nkaub | CSS Text Spacing</title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta charset="UTF-8">
		<meta name="description" content="ทำเว็บไซต์เอง HTML CSS JavaScript jQuery PHP MySql">
		<meta name="keywords" content="ทำเว็บไซต์เอง, HTML, CSS, JavaScript, jQuery, PHP, MySql">
		<meta name="author" content="Theethawat Chetjeerasioon">
		
		<style>
			
			p {
				text-indent: 100px;
			}
			
		</style>
	</head>
	<body>
		
		<p>ใช้เพื่อระบุการเยื้องของบรรทัดแรกของข้อความ</p>
		
	</body>
</html>

letter-spacing ใช้เพื่อเว้นวรรคตัวอักษรหรือระบุช่องว่างระหว่างอักขระในข้อความ

ตัวอย่าง

<!DOCTYPE html>
<html lang="th-TH">
	<head>
		<title>nkaub | CSS Text Spacing</title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta charset="UTF-8">
		<meta name="description" content="ทำเว็บไซต์เอง HTML CSS JavaScript jQuery PHP MySql">
		<meta name="keywords" content="ทำเว็บไซต์เอง, HTML, CSS, JavaScript, jQuery, PHP, MySql">
		<meta name="author" content="Theethawat Chetjeerasioon">
		
		<style>
			
			h1 {
				letter-spacing: 10px;
			}

			h2 {
				letter-spacing: -5px;
			}
			
		</style>
	</head>
	<body>
		
		<h1>ใช้เพื่อเว้นวรรคตัวอักษรหรือระบุช่องว่างระหว่างอักขระในข้อความ</h1>
		<h2>ใช้เพื่อเว้นวรรคตัวอักษรหรือระบุช่องว่างระหว่างอักขระในข้อความ</h2>
		
	</body>
</html>

line-height ใช้เพื่อเพิ่มความสูงของบรรทัด

ตัวอย่าง

<!DOCTYPE html>
<html lang="th-TH">
	<head>
		<title>nkaub | CSS Text Spacing</title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta charset="UTF-8">
		<meta name="description" content="ทำเว็บไซต์เอง HTML CSS JavaScript jQuery PHP MySql">
		<meta name="keywords" content="ทำเว็บไซต์เอง, HTML, CSS, JavaScript, jQuery, PHP, MySql">
		<meta name="author" content="Theethawat Chetjeerasioon">
		
		<style>
			
			h1 {
				letter-spacing: 10px;
				line-height: 1.8;
			}

			h2 {
				letter-spacing: -5px;
				line-height: 0.8;
			}
			
		</style>
	</head>
	<body>
		
		<h1>ใช้เพื่อเว้นวรรคตัวอักษรหรือระบุช่องว่างระหว่างอักขระในข้อความ</h1>
		<h2>ใช้เพื่อเว้นวรรคตัวอักษรหรือระบุช่องว่างระหว่างอักขระในข้อความ</h2>
		
	</body>
</html>

word-spacing ใช้เพื่อเพิ่มระยะห่างระหว่างคำ

ตัวอย่าง

<!DOCTYPE html>
<html lang="th-TH">
	<head>
		<title>nkaub | CSS Text Spacing</title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta charset="UTF-8">
		<meta name="description" content="ทำเว็บไซต์เอง HTML CSS JavaScript jQuery PHP MySql">
		<meta name="keywords" content="ทำเว็บไซต์เอง, HTML, CSS, JavaScript, jQuery, PHP, MySql">
		<meta name="author" content="Theethawat Chetjeerasioon">
		
		<style>
			
			h1 {
				word-spacing: 100px;
			}

			h2 {
				word-spacing: -2px;
			}
			
		</style>
	</head>
	<body>
		
		<h1>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</h1>
		<h2>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</h2>
		
	</body>
</html>

CSS Text Shadow

text-shadow ใช้เพื่อเพิ่มเงาให้กับข้อความ

ตัวอย่าง

<!DOCTYPE html>
<html lang="th-TH">
	<head>
		<title>nkaub | CSS Text Shadow</title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta charset="UTF-8">
		<meta name="description" content="ทำเว็บไซต์เอง HTML CSS JavaScript jQuery PHP MySql">
		<meta name="keywords" content="ทำเว็บไซต์เอง, HTML, CSS, JavaScript, jQuery, PHP, MySql">
		<meta name="author" content="Theethawat Chetjeerasioon">
		
		<style>
			
			h1 {
				text-shadow: 2px 2px;
			}
			
			h2 {
				text-shadow: 2px 2px rgb(255,160, 30);
			}
			
			h3 {
				color: #fff;
				text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;
			}
			
		</style>
	</head>
	<body>
		
		<h1>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</h1>
		<h2>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</h2>
		<h3>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</h3>
		
	</body>
</html>
Top