ਬੇਸਿਕ CSS: ਐਲੀਮੈਂਟਸ, ਆਈਡੀ ਅਤੇ ਚੁਣਨਾ Class

CSS ਵਿੱਚ, ਤੁਸੀਂ ਐਲੀਮੈਂਟਸ ਚੁਣ ਸਕਦੇ ਹੋ, class, ਅਤੇ id ਸਟਾਈਲ ਨੂੰ ਲਾਗੂ ਕਰਨ ਲਈ ਅਤੇ ਆਪਣੇ ਵੈਬ ਪੇਜ 'ਤੇ ਤੱਤ ਨੂੰ ਅਨੁਕੂਲਿਤ ਕਰ ਸਕਦੇ ਹੋ। ਇਹਨਾਂ ਨੂੰ ਕਿਵੇਂ ਵਰਤਣਾ ਹੈ ਇਸ ਬਾਰੇ ਇੱਥੇ ਇੱਕ ਵਿਸਤ੍ਰਿਤ ਗਾਈਡ ਹੈ:

ਤੱਤ ਚੁਣਨਾ

ਕਿਸੇ ਖਾਸ HTML ਐਲੀਮੈਂਟ ਦੀਆਂ ਸਾਰੀਆਂ ਉਦਾਹਰਣਾਂ ਨੂੰ ਚੁਣਨ ਲਈ, ਐਲੀਮੈਂਟ ਨਾਮ ਨੂੰ ਚੋਣਕਾਰ ਵਜੋਂ ਵਰਤੋ। ਉਦਾਹਰਨ ਲਈ, ਦਸਤਾਵੇਜ਼ ਵਿੱਚ p ਸਾਰੇ ਟੈਗ ਚੁਣਦਾ ਹੈ । <p>

ਚੁਣ ਰਿਹਾ ਹੈ Class

ਇੱਕੋ ਕਲਾਸ ਵਾਲੇ ਤੱਤ ਚੁਣਨ ਲਈ, "" ਬਿੰਦੀ ਦੀ ਵਰਤੋਂ ਕਰੋ। ਕਲਾਸ ਦੇ ਨਾਮ ਦੇ ਬਾਅਦ. ਉਦਾਹਰਨ ਲਈ, .my-class ਕਲਾਸ ਦੇ ਨਾਲ ਸਾਰੇ ਤੱਤ ਚੁਣਦਾ ਹੈ my-class ।

ਮਲਟੀਪਲ ਕਲਾਸਾਂ ਵਾਲੇ ਤੱਤ ਚੁਣਨ ਲਈ, ਬਿੰਦੀਆਂ ਦੀ ਵਰਤੋਂ ਕਰੋ "।" ਅਤੇ ਸਪੇਸ ਦੁਆਰਾ ਵੱਖ ਕੀਤੇ ਕਲਾਸ ਦੇ ਨਾਮਾਂ ਦੀ ਸੂਚੀ ਬਣਾਓ। ਉਦਾਹਰਨ ਲਈ, .class1.class2 ਦੋਨਾਂ class1 ਅਤੇ class2 ਕਲਾਸਾਂ ਵਾਲੇ ਤੱਤ ਚੁਣਦਾ ਹੈ।

ਚੁਣ ਰਿਹਾ ਹੈ id

ਇਸਦੇ ਦੁਆਰਾ ਇੱਕ ਖਾਸ ਤੱਤ ਦੀ ਚੋਣ ਕਰਨ ਲਈ id, ਤੱਤ ਦੇ ਬਾਅਦ ਇੱਕ ਹੈਸ਼ "#" ਦੀ ਵਰਤੋਂ ਕਰੋ id । ਉਦਾਹਰਨ ਲਈ, #my-id ਨਾਲ ਤੱਤ ਚੁਣਦਾ ਹੈ id my-id ।

Element, Class, ਅਤੇ ID ਚੋਣ ਨੂੰ ਜੋੜਨਾ

ਤੁਸੀਂ class ਖਾਸ ਕਲਾਸਾਂ ਅਤੇ ID.

ਉਦਾਹਰਨ ਲਈ,  ਅਤੇ ਦੇ ਨਾਲ ਤੱਤ ਦੀ div.my-class#my-id ਚੋਣ ਕਰਦਾ ਹੈ । <div> class my-class ID my-id

ਇਹ ਤੱਤ ਚੁਣਨ ਦੀ ਇੱਕ ਖਾਸ ਉਦਾਹਰਨ ਹੈ, class, ਅਤੇ id CSS ਵਿੱਚ:

/* Select all <p> tags */  
p {  
  color: blue;  
}  
  
/* Select elements with the class "my-class" */  
.my-class {  
  background-color: yellow;  
}  
  
/* Select the element with the ID "my-id" */  
#my-id {  
  font-weight: bold;  
}  
  
/* Combine element, class, and ID selections */  
div.my-class#my-id {  
  border: 1px solid black;  
}  

element, , ਅਤੇ id ਚੋਣ ਦੀ ਵਰਤੋਂ ਕਰਕੇ class, ਤੁਸੀਂ ਆਪਣੇ ਵੈਬ ਪੇਜ 'ਤੇ ਖਾਸ ਤੱਤਾਂ ਜਾਂ ਤੱਤਾਂ ਦੇ ਸਮੂਹਾਂ ਨੂੰ ਆਸਾਨੀ ਨਾਲ ਚੁਣ ਸਕਦੇ ਹੋ ਅਤੇ ਸਟਾਈਲ ਕਰ ਸਕਦੇ ਹੋ।