តាមធម្មតា មុននឹងធ្វើការរចនាកែច្នៃ element ទាំងឡាយបាន យើងចាំបាច់ត្រូវជ្រើសរើសយក element ទាំងនោះជាមុនសិន។ ហើយនៅក្នុងភាសា CSS មានរបៀបច្រើនយ៉ាងណាស់ ក្នុងការជ្រើសរើសយក element ទាំងនោះ។ ជាកិច្ចចាប់ផ្តើម យើងអាចប្រើរបៀបជ្រើសរើសយក element ទាំងឡាយ តាមរយៈ tag របស់វា ដោយធ្វើដូចខាងក្រោមនេះ៖
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Select Element</title>
<style>
p{
text-align: center;
color: red;
}
</style>
</head>
<body>
Every paragraph will be affected by the style.
Me too!
And me!
</body>
</html>
Every paragraph will be affected by the style.
Me too!
And me!
តែបើយើងចង់ជ្រើសរើសយក element ណាមួយដ៏ជាក់លាក់នោះ យើងអាចធ្វើការជ្រើសរើសយក element នោះតាមattribute id តែមួយគត់របស់វាបាន ដោយធ្វើដូចខាងក្រោមនេះ៖
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Select Element</title>
<style>
#para1{
text-align: center;
color: red;
}
</style>
</head>
<body>
Hello World!
This paragraph is not affected by the style.
</body>
</html>
Hello World!
This paragraph is not affected by the style.
ដូចគ្នាដែរ យើងអាចជ្រើសរើសយក element មួយចំនួន តាមរយៈ attribute ដែលជា class របស់វា ដោយធ្វើដូចខាងក្រោមនេះ៖
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Select Element</title>
<style>
.center {
text-align: center;
color: red;
}
</style>
</head>
<body>
Red and center-aligned heading
Red and center-aligned paragraph.
</body>
</html>
Red and center-aligned heading
Red and center-aligned paragraph.
ក្នុងករណី element មួយមាន attribute class មាន value លើសពីមួយ ការកែច្នៃរចនា element នោះ អាចត្រូវធ្វើឡើងដូចខាងក្រោមនេះ៖
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Select Element</title>
<style>
p.center {
text-align: center;
color: red;
}
p.large {
font-size: 300%;
}
</style>
</head>
<body>
This heading will not be affected
This paragraph will be red and center-aligned.
This paragraph will be red, center-aligned, and in a large font-size.
</body>
</html>
This heading will not be affected
This paragraph will be red and center-aligned.
This paragraph will be red, center-aligned, and in a large font-size.
បើសិនជាយើងជ្រើសរើសយក element ទាំងអស់ ដែលមាននៅក្នុងទំព័រ HTML យើងត្រូវធ្វើដូចខាងក្រោមនេះ៖
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Select Element</title>
<style>
* {
text-align: center;
color: blue;
}
</style>
</head>
<body>
Hello world!
Every element on the page will be affected by the style.
Me too!
And me!
</body>
</html>
Hello world!
Every element on the page will be affected by the style.
Me too!
And me!
យ៉ាងណាម៉ិញ ក្រៅពីជ្រើសរើសយក element តាមរយៈ tag មួយប្រភេទ id ឬ class ណាមួយ យើងអាចប្រើប្រាស់ tag, id, class ចំរុះគ្នាតែម្តង ក្នងការជ្រើសរើសយក element ជាច្រើនមកកែច្នៃ ដោយធ្វើដូចខាងក្រោមនេះ៖
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Select Element</title>
<style>
h1, h2, p {
text-align: center;
color: red;
}
</style>
</head>
<body>
Hello World!
Smaller heading!
This is a paragraph.
</body>
</html>
Hello World!
Smaller heading!
This is a paragraph.














