<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="mystyle.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
p.center { /** ชี้ไปที่ Tag p และคลาส center*/
text-align: center;
color: red;
}
</style>
</head>
<body>
<h1 class="center">This heading will not be affected</h1>
<p class="center">This paragraph will be red and center-aligned.</p>
</body>
</html>
ชี้ให้ทุกตัวมีผลใช้ *
<html>
<head>
<style>
* { /** ใช้ * นำหน้าเพื่อให้ทั้งหมดทำในวงเล็บ */
text-align: center;
color: blue;
}
</style>
</head>
<body>
<h1>Hello world!</h1>
<p>Every element on the page will be affected by the style.</p>
<p id="para1">Me too!</p>
<p>And me!</p>
</body>
</html>
สามารถรวมหลาย Tag แล้วเขียน CSS พร้อมกันได้เลย
<!DOCTYPE html>
<html>
<head>
<style>
h1, h2, p { /** สามารถรวมหลาย Tag แล้วเขียน CSS พร้อมกันได้เลย */
text-align: center;
color: red;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<h2>Smaller heading!</h2>
<p>This is a paragraph.</p>
</body>
</html>
CSS Fonts
<!DOCTYPE html>
<html>
<head>
<style>
p.impact { /** ให้ Tag p ใน class ชื่อ impact ทำในวงเล็บ*/
font-family: Impact, Charcoal, sans-serif; /** ให้ฟอร์นในคลาสเป็น Charcoal */
}
</style>
</head>
<body>
<h1>CSS font-family</h1>
<p class="impact">This is a paragraph, shown with the Impact font.</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
div {
background-color: lightgrey;
width: 300px;
border: 15px solid green;
padding: 50px;
margin: 20px;
}
</style>
</head>
<body>
<h2>Demonstrating the Box Model</h2>
<p>The CSS box model is essentially a box that wraps around every HTML element. It consists of: borders, padding, margins, and the actual content.</p>
<div>This text is the content of the box. We have added a 50px padding, 20px margin and a 15px green border. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</body>
</html>
กล่องสามารถสร้างได้หลายกล่อง โดยใช้ <div></div> หลาย Tag
<h1>The Main Languages of the Web</h1>
<p>HTML is the standard markup language for creating Web pages.</p>
<hr> <!-- ขีดเส้นยาว -->
<p>CSS is a language that describes how HTML elements are to be displayed on screen</p>
<hr> <!-- ขีดเส้นยาว -->
<p>JavaScript is the programming language of HTML and the Web.</p>
ขึ้นบรรทัดใหม่ <br>
<p>To force<br> line breaks<br> in a text,<br> use the br<br> element.</p>
<!DOCTYPE html>
<html>
<body>
<div> <!-- กล่องดิป -->
<h2>London</h2>
<p>
London is the capital city of England.
It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.
</p>
</div>
</body>
</html>
London
London is the capital city of England.
It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.
<!DOCTYPE html>
<html>
<body>
<h1>The span element</h1>
<p>
My mother has <span style="color:blue;font-weight:bold">blue</span> <!-- กล่องสเปน สำหรับกำหนดลักษณะเฉพาะของแต่ล่ะอย่าง -->
eyes and my father has <span style="color:darkolivegreen;font-weight:bold">dark green</span> eyes.
</p>
</body>
The span element
My mother has blue
eyes and my father has dark green eyes.
// 1st Method - Declaring $wpdb as global and using it to execute an SQL query statement that returns a PHP object
global $wpdb;
$results = $wpdb->get_results( "SELECT * FROM {$wpdb->prefix}options WHERE option_id = 1", OBJECT );
