CSS(ਕੈਸਕੇਡਿੰਗ ਸਟਾਈਲ ਸ਼ੀਟਸ) ਵੈੱਬ ਵਿਕਾਸ ਦਾ ਇੱਕ ਬੁਨਿਆਦੀ ਹਿੱਸਾ ਹੈ ਜੋ ਤੁਹਾਡੀ ਵੈਬਸਾਈਟ 'ਤੇ HTML ਤੱਤਾਂ ਦੀ ਦਿੱਖ ਨੂੰ ਨਿਯੰਤਰਿਤ ਕਰਨ ਵਿੱਚ ਇੱਕ ਮਹੱਤਵਪੂਰਨ ਭੂਮਿਕਾ ਨਿਭਾਉਂਦਾ ਹੈ। ਇਹ ਨਿਯਮਾਂ ਅਤੇ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਦਾ ਇੱਕ ਸ਼ਕਤੀਸ਼ਾਲੀ ਸਮੂਹ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ ਜੋ ਪਰਿਭਾਸ਼ਿਤ ਕਰਦੇ ਹਨ ਕਿ ਤੱਤ ਕਿਵੇਂ ਪ੍ਰਦਰਸ਼ਿਤ ਕੀਤੇ ਜਾਂਦੇ ਹਨ, ਫਾਰਮੈਟ ਕੀਤੇ ਜਾਂਦੇ ਹਨ ਅਤੇ ਸਥਿਤੀ ਵਿੱਚ ਹੁੰਦੇ ਹਨ, ਜਿਸ ਨਾਲ ਤੁਸੀਂ ਆਪਣੇ ਵੈਬ ਪੇਜਾਂ ਦੀ ਦਿੱਖ ਅਤੇ ਮਹਿਸੂਸ ਨੂੰ ਅਨੁਕੂਲਿਤ ਕਰ ਸਕਦੇ ਹੋ।
ਆਉ ਚੋਣਕਾਰਾਂ ਦੀ ਧਾਰਨਾ ਨੂੰ ਸਮਝ ਕੇ ਸ਼ੁਰੂਆਤ ਕਰੀਏ
ਚੋਣਕਾਰਾਂ ਦੀ ਵਰਤੋਂ ਸਟਾਈਲਿੰਗ ਲਈ ਖਾਸ HTML ਤੱਤਾਂ ਨੂੰ ਨਿਸ਼ਾਨਾ ਬਣਾਉਣ ਲਈ ਕੀਤੀ ਜਾਂਦੀ ਹੈ। ਸਭ ਤੋਂ ਬੁਨਿਆਦੀ ਚੋਣਕਾਰਾਂ ਵਿੱਚੋਂ ਇੱਕ ਐਲੀਮੈਂਟ ਚੋਣਕਾਰ ਹੈ, ਜੋ ਕਿਸੇ ਖਾਸ HTML ਐਲੀਮੈਂਟ ਦੀਆਂ ਸਾਰੀਆਂ ਉਦਾਹਰਣਾਂ ਨੂੰ ਚੁਣਦਾ ਹੈ।
ਉਦਾਹਰਨ ਲਈ, ਹੇਠਾਂ ਦਿੱਤਾ CSS ਨਿਯਮ ਇੱਕ ਦਸਤਾਵੇਜ਼ ਵਿੱਚ ਸਾਰੇ ਪੈਰਿਆਂ ਨੂੰ ਨਿਸ਼ਾਨਾ ਬਣਾਉਂਦਾ ਹੈ:
p {
color: blue;
}
ਇਸ ਉਦਾਹਰਨ ਵਿੱਚ, p ਚੋਣਕਾਰ ਸਾਰੇ <p> ਤੱਤਾਂ ਦੀ ਚੋਣ ਕਰਦਾ ਹੈ ਅਤੇ ਉਹਨਾਂ ਦੇ ਟੈਕਸਟ ਦਾ ਰੰਗ ਨੀਲੇ ਵਿੱਚ ਸੈੱਟ ਕਰਦਾ ਹੈ।
ਇੱਕ ਹੋਰ ਆਮ ਚੋਣਕਾਰ ਕਲਾਸ ਚੋਣਕਾਰ ਹੈ
ਵਰਗਾਂ ਦੀ ਵਰਤੋਂ ਸਮਾਨ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਵਾਲੇ ਤੱਤਾਂ ਨੂੰ ਸਮੂਹ ਕਰਨ ਲਈ ਕੀਤੀ ਜਾਂਦੀ ਹੈ। HTML ਤੱਤਾਂ ਨੂੰ ਇੱਕ ਕਲਾਸ ਨਿਰਧਾਰਤ ਕਰਕੇ, ਤੁਸੀਂ ਉਹਨਾਂ ਨੂੰ ਸਮੂਹਿਕ ਤੌਰ 'ਤੇ ਨਿਸ਼ਾਨਾ ਬਣਾ ਸਕਦੇ ਹੋ ਅਤੇ ਸਟਾਈਲ ਕਰ ਸਕਦੇ ਹੋ।
ਇੱਥੇ ਇੱਕ ਉਦਾਹਰਨ ਹੈ:
.blue-text {
color: blue;
}
n ਇਸ ਕੇਸ ਵਿੱਚ, .blue-text ਚੋਣਕਾਰ ਕਲਾਸ ਵਾਲੇ ਸਾਰੇ ਤੱਤਾਂ ਨੂੰ ਨਿਸ਼ਾਨਾ ਬਣਾਉਂਦਾ ਹੈ blue-text ਅਤੇ ਉਹਨਾਂ ਦੇ ਟੈਕਸਟ ਵਿੱਚ ਨੀਲਾ ਰੰਗ ਲਾਗੂ ਕਰਦਾ ਹੈ।
ਇਸ ਤੋਂ ਇਲਾਵਾ, ID ਚੋਣਕਾਰ ਤੁਹਾਨੂੰ ਕਿਸੇ ਵਿਸ਼ੇਸ਼ ਤੱਤ ਨੂੰ ਇਸਦੇ ਵਿਲੱਖਣ ਪਛਾਣਕਰਤਾ ਦੁਆਰਾ ਨਿਸ਼ਾਨਾ ਬਣਾਉਣ ਦੀ ਆਗਿਆ ਦਿੰਦਾ ਹੈ। ID ਆਮ ਤੌਰ 'ਤੇ ਇੱਕ ਪੰਨੇ 'ਤੇ ਵਿਅਕਤੀਗਤ ਤੱਤਾਂ ਨੂੰ ਨਿਰਧਾਰਤ ਕੀਤਾ ਜਾਂਦਾ ਹੈ।
ਇੱਥੇ ਇੱਕ ਉਦਾਹਰਨ ਹੈ:
#header {
background-color: gray;
}
ਇਸ ਉਦਾਹਰਨ ਵਿੱਚ, #header ਚੋਣਕਾਰ ਤੱਤ ਨੂੰ ਨਾਲ ਚੁਣਦਾ ਹੈ ID header ਅਤੇ ਇਸ 'ਤੇ ਸਲੇਟੀ ਬੈਕਗ੍ਰਾਊਂਡ ਰੰਗ ਲਾਗੂ ਕਰਦਾ ਹੈ।
CSS ਦੇ ਸੰਟੈਕਸ ਵੱਲ ਵਧਦੇ ਹੋਏ, ਹਰੇਕ CSS ਨਿਯਮ ਵਿੱਚ ਇੱਕ ਚੋਣਕਾਰ ਅਤੇ ਇੱਕ ਘੋਸ਼ਣਾ ਬਲਾਕ ਹੁੰਦਾ ਹੈ।
ਘੋਸ਼ਣਾ ਬਲਾਕ ਘੁੰਗਰਾਲੇ ਬਰੇਸ ਵਿੱਚ ਬੰਦ ਹੁੰਦਾ ਹੈ {} ਅਤੇ ਇਸ ਵਿੱਚ ਇੱਕ ਜਾਂ ਇੱਕ ਤੋਂ ਵੱਧ ਘੋਸ਼ਣਾਵਾਂ ਸ਼ਾਮਲ ਹੁੰਦੀਆਂ ਹਨ। ਘੋਸ਼ਣਾਵਾਂ ਵਿੱਚ ਇੱਕ ਜਾਇਦਾਦ ਅਤੇ ਇਸਦੇ ਅਨੁਸਾਰੀ ਮੁੱਲ ਸ਼ਾਮਲ ਹੁੰਦੇ ਹਨ।
ਇੱਥੇ ਇੱਕ ਉਦਾਹਰਨ ਹੈ:
h1 {
font-size: 24px;
color: #333;
}
ਇਸ ਕੋਡ ਸਨਿੱਪਟ ਵਿੱਚ, h1 ਚੋਣਕਾਰ ਸਾਰੇ <h1> ਤੱਤ ਚੁਣਦਾ ਹੈ ਅਤੇ ਉਹਨਾਂ ਦੇ ਫੌਂਟ ਦਾ ਆਕਾਰ 24 ਪਿਕਸਲ ਅਤੇ ਟੈਕਸਟ ਰੰਗ ਨੂੰ ਗੂੜ੍ਹੇ ਸਲੇਟੀ(#333) ਵਿੱਚ ਸੈੱਟ ਕਰਦਾ ਹੈ।
ਇਸ ਸਾਰੀ ਲੜੀ ਦੌਰਾਨ, ਅਸੀਂ ਵੱਖ-ਵੱਖ CSS ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ, ਚੋਣਕਾਰਾਂ, ਅਤੇ ਉਹਨਾਂ ਦੇ ਸੰਜੋਗਾਂ ਦੀ ਪੜਚੋਲ ਅਤੇ ਵਿਆਖਿਆ ਕਰਾਂਗੇ, ਜਿਸ ਨਾਲ ਤੁਸੀਂ ਦ੍ਰਿਸ਼ਟੀਗਤ ਤੌਰ 'ਤੇ ਆਕਰਸ਼ਕ ਅਤੇ ਚੰਗੀ ਤਰ੍ਹਾਂ ਢਾਂਚਾਗਤ ਵੈੱਬਸਾਈਟਾਂ ਬਣਾ ਸਕਦੇ ਹੋ। CSS ਅਤੇ ਇਸਦੇ ਮੂਲ ਸੰਟੈਕਸ ਨੂੰ ਸਮਝਣਾ ਤੁਹਾਨੂੰ ਤੁਹਾਡੇ ਵੈਬ ਪੇਜਾਂ ਦੇ ਸਟਾਈਲਿੰਗ ਪਹਿਲੂਆਂ 'ਤੇ ਨਿਯੰਤਰਣ ਲੈਣ ਦੀ ਨੀਂਹ ਦੇਵੇਗਾ, ਇੱਕ ਵਿਲੱਖਣ ਅਤੇ ਵਿਅਕਤੀਗਤ ਉਪਭੋਗਤਾ ਅਨੁਭਵ ਨੂੰ ਯਕੀਨੀ ਬਣਾਉਂਦਾ ਹੈ। ਆਉ ਅੰਦਰ ਡੁਬਕੀ ਕਰੀਏ ਅਤੇ CSS ਦੀਆਂ ਅਸੀਮ ਸੰਭਾਵਨਾਵਾਂ ਦੀ ਖੋਜ ਕਰੀਏ!