តាមធម្មតា មុននឹងធ្វើការរចនាកែច្នៃ 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.