<!
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Test CSS</title>
<style>
body {
font-family: Verdana, "Minion Web", Helvetica, sans-serif;
font-size: 1em;
text-align: justify;
<head>
<link rel="stylesheet" type="text/css“ href="style1.css">
</head>
h1 { text-align: center; font-family: Arial; }
h2 { color: #440000;
text-align: center;
font-family: Arial Black, Arial, Helvetica;
<head>
<style>
tagName {property: value;}
</style>
</head>
<head>
<style type="text/css">
hr { color: sienna; }
p { margin-left: 20px; }
body {background-image:url("images/back40.gif");}
</style>
</head>
<p style="color: sienna; margin-left: 20px;">
This is a paragraph
</p>
<style>
p{text-align: center; color: red;}
.center {text-align: center; color: red;}
h1, h2, p {text-align: center; color: red;}
/* unvisited link */
a:link {
color: #FF0000;
/* visited link */
a:visited {
color: #00FF00;
/* mouse over link */
a:hover {
color: #FF00FF;
/* selected link */
a:active {
color: #0000FF;
a:hover { color: red; }
p:first-line { text-transform: uppercase; }
.title:before { content: "»"; }
.title:after { content: "«"; }
p a {text-decoration: underline}
p * {color: black}
#p1 {background-color:rgba(255, 0, 0, 0.3);}/*red with opacity*/
#p2 {background-color:rgba(0, 255, 0, 0.3);}/*green with opacity*/
#p3 {background-color: rgba(0, 0, 255, 0.3);}/*blue with opacity*/
Selector{
Property: value !important;
}
<style>
div {
font-family: Arial;
font-size: 16px !important;
.specialText {
font-size: 18px;
</style>
<div class="specialText"> This is special text.
</div>
<style>
#heading {color: orange; }
.heading {color: red; }
h1 {color: blue; }
</style>
<h1 class="heading" id="heading">Hello World!!</h1>
<style>
P { font-style : normal; }
TH { font-style : italic; }
H1 { font-style: oblique;}
H2 { font-style: oblique 10deg;}
</style>
<p class="wavy">Here's some text with wavy red underline!</p>
<p class="both">This text has lines both above and below it.</p>
<style>
.wavy {
text-decoration-line: underline;
text-decoration-style: wavy;
text-decoration-color: red; }
.both { text-decoration-line: underline overline; }
</style>
<img class="a" src=”https://image.slidesdocs.com/responsive-images/background/dog-
made-of-pixel-squares-powerpoint-background_6a449a7038__459_258.jpg" alt="hinh"
>image with a default alignment.<br>
<img class="b" src="https://image.slidesdocs.com/responsive-images/background/dog-
made-of-pixel-squares-powerpoint-background_6a449a7038__459_258.jpg" alt="hinh"
>image with a text-top alignment.<br>
<img class="c" src="https://image.slidesdocs.com/responsive-images/background/dog-
made-of-pixel-squares-powerpoint-background_6a449a7038__459_258.jpg" alt="hinh"
>image with a text-bottom alignment.
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat
volutpat.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat
volutpat.</p>
<style>
p { text-indent: 5em; background: powderblue; }
</style>
<style>
H2 {background-image:url(Bluedrop.gif);}
</style>
<style>
div {
border: 1px solid black;
background-color: lightblue;
padding-top: 50px;
padding-right: 30px;
padding-bottom: 50px;
padding-left: 80px;
</style>
</head>
<body>
<div>
This is a div element with a border, background color, and padding applied.
</div>
</body>
<style>
h1 { border: 5px solid red;}
h2 { border: 4px dotted blue;}
div{ border: double;}
</style>
<style>
.div1 {
float: left;
padding: 10px;
border: 3px solid #73AD21;
.div2 {
padding: 10px;
border: 3px solid red;
.div3 {
float: left;
padding: 10px;
border: 3px solid #73AD21;
.div4 {
padding: 10px;
border: 3px solid red;
clear: left;
</style>
<div class=”parent”>
<div class=”box” id=”one”>One</div>
<div class=”box” id=”two”>Two</div>
<div class=”box” id=”three”>Three</div>
<div class=”box” id=”four”>Four</div>
</div>
<article class="container">
<span>First</span>
<span>Second</span>
<span>Third</span>
</article>
<article class="container">
<span>First</span>
<span>Second</span>
<span>Third</span>
</article>
<style>
article span {
background-color: black;
color: white;
margin: 1px;
article, span {
padding: 10px;
border-radius: 7px;
article, div {
margin: 20px;
</style>
<style>
table {
border-collapse: collapse;
width: 100%;
th, td {
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #f2f2f2;
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>First name</th>
<th>Last name</th>
<th>Points</th>
</tr>
</thead>
<tbody>
<tr>
<td>Peter</td>
<td>Griffin</td>
<td>$100</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
<td>$150</td>
</tr>
<tr>
<td>Joe</td>
<td>Swanson</td>
<td>$300</td>
</tr>
<style>
table {
border-collapse: collapse;
width: 100%;
th, td {
text-align: left;
padding: 8px;
tr:hover {background-color: yellow;}
</style>
</tbody>
</table>
</body>
<style>
html {
scrollbar-face-color: #FF0000;
scrollbar-shadow-color: #0000FF;
scrollbar-highlight-color: #00FF00;
scrollbar-3dlight-color: #FF00FF;
scrollbar-darkshadow-color: #00FFFF;
scrollbar-track-color: #FFFF00;
scrollbar-arrow-color: #000000;
</style>
</head>
<body>
<h1>Custom Scrollbar Example</h1>
<p>Scroll down to see the custom scrollbar in action.</p>
<div style="height: 20px;">
<!-- Nội dung dài để kích hoạt thanh cuộn -->
</div>
<style>
.b1 { border-style: none; }
.b2 { border-style: hidden; }
.b3 { border-style: dotted; }
.b4 { border-style: dashed; }
.b5 { border-style: solid; }
.b6 { border-style: double; }
.b7 { border-style: groove; }
.b8 { border-style: ridge; }
.b9 { border-style: inset; }
.b10 { border-style: outset; }
</style>
</body>
<style>
#example1 {
background: url(img_tree.gif) left top no-repeat,
url(img_flwr.gif) right bottom no-repeat,
url(paper.gif) left top repeat;
background-size: 50px, 130px, auto;
</style>
