CSS ਕੀ ਹੈ? ਕੈਸਕੇਡਿੰਗ ਸਟਾਈਲ ਸ਼ੀਟਾਂ, ਜਵਾਬਦੇਹ CSS, Sassy CSS, ਕੰਪਰੈੱਸ, ਮਿਨੀਫਾਈ, ਅਨਮਿਨੀਫਾਈ, ਅਨਕੰਪ੍ਰੈਸ ਟੂਲ

ਕੈਸਕੇਡਿੰਗ ਸਟਾਈਲ ਸ਼ੀਟਸ (CSS) ਕੀ ਹਨ?

Douglas Karr ਵੀਰਵਾਰ, ਫਰਵਰੀ 9, 2023

1 104 4 ਮਿੰਟ ਪੜ੍ਹੇ

ਕੈਸਕੇਡਿੰਗ ਸਟਾਈਲਸ਼ੀਟਾਂ ਕਿਵੇਂ ਕੰਮ ਕਰਦੀਆਂ ਹਨ ਇਸ ਬਾਰੇ ਪੂਰੀ ਵਿਆਖਿਆ ਲਈ ਹੇਠਾਂ ਪੜ੍ਹੋ। ਅਸੀਂ ਸਾਡੀਆਂ ਐਪਾਂ ਨੂੰ ਪੰਨੇ ਦੇ ਸਿਖਰ 'ਤੇ ਪ੍ਰਦਰਸ਼ਿਤ ਕਰਦੇ ਹਾਂ ਤਾਂ ਜੋ ਇਸਨੂੰ ਲੱਭਣਾ ਅਤੇ ਵਰਤਣਾ ਆਸਾਨ ਹੋਵੇ। ਜੇਕਰ ਤੁਸੀਂ ਇਸ ਲੇਖ ਨੂੰ ਈਮੇਲ ਜਾਂ ਫੀਡ ਰਾਹੀਂ ਪੜ੍ਹ ਰਹੇ ਹੋ, ਤਾਂ ਇਸ 'ਤੇ ਕਲਿੱਕ ਕਰੋ ਆਪਣੇ CSS ਨੂੰ ਸੰਕੁਚਿਤ ਕਰੋ.

ਜਦੋਂ ਤੱਕ ਤੁਸੀਂ ਅਸਲ ਵਿੱਚ ਸਾਈਟਾਂ ਦਾ ਵਿਕਾਸ ਨਹੀਂ ਕਰ ਰਹੇ ਹੋ, ਤੁਸੀਂ ਕੈਸਕੇਡਿੰਗ ਸਟਾਈਲ ਸ਼ੀਟਾਂ ਨੂੰ ਪੂਰੀ ਤਰ੍ਹਾਂ ਨਹੀਂ ਸਮਝ ਸਕਦੇ ਹੋ (CSS). CSS ਇੱਕ ਸਟਾਈਲਸ਼ੀਟ ਭਾਸ਼ਾ ਹੈ ਜਿਸ ਵਿੱਚ ਲਿਖੇ ਦਸਤਾਵੇਜ਼ ਦੀ ਦਿੱਖ ਅਤੇ ਫਾਰਮੈਟਿੰਗ ਦਾ ਵਰਣਨ ਕਰਨ ਲਈ ਵਰਤਿਆ ਜਾਂਦਾ ਹੈ HTML or XML. CSS ਦੀ ਵਰਤੋਂ ਵੱਖ-ਵੱਖ ਤੱਤਾਂ ਜਿਵੇਂ ਕਿ ਫੌਂਟ, ਰੰਗ, ਸਪੇਸਿੰਗ, ਅਤੇ ਲੇਆਉਟ ਲਈ ਸਟਾਈਲ ਨਿਰਧਾਰਤ ਕਰਨ ਲਈ ਕੀਤੀ ਜਾ ਸਕਦੀ ਹੈ। CSS ਤੁਹਾਨੂੰ ਤੁਹਾਡੇ HTML ਦਸਤਾਵੇਜ਼ ਦੀ ਪੇਸ਼ਕਾਰੀ ਨੂੰ ਇਸਦੀ ਸਮੱਗਰੀ ਤੋਂ ਵੱਖ ਕਰਨ ਦੀ ਇਜਾਜ਼ਤ ਦਿੰਦਾ ਹੈ, ਜਿਸ ਨਾਲ ਤੁਹਾਡੀ ਵੈੱਬਸਾਈਟ ਦੀ ਵਿਜ਼ੂਅਲ ਸ਼ੈਲੀ ਨੂੰ ਬਣਾਈ ਰੱਖਣਾ ਅਤੇ ਅਪਡੇਟ ਕਰਨਾ ਆਸਾਨ ਹੋ ਜਾਂਦਾ ਹੈ।

CSS ਭਾਸ਼ਾ ਢਾਂਚਾ

The ਚੋਣਕਾਰ HTML ਤੱਤ ਹੈ ਜਿਸਨੂੰ ਤੁਸੀਂ ਸਟਾਈਲ ਕਰਨਾ ਚਾਹੁੰਦੇ ਹੋ, ਅਤੇ ਸੰਪਤੀ ਨੂੰ ਅਤੇ ਮੁੱਲ ਉਹਨਾਂ ਸ਼ੈਲੀਆਂ ਨੂੰ ਪਰਿਭਾਸ਼ਿਤ ਕਰੋ ਜੋ ਤੁਸੀਂ ਉਸ ਤੱਤ 'ਤੇ ਲਾਗੂ ਕਰਨਾ ਚਾਹੁੰਦੇ ਹੋ:

selector {
  property: value;
}

ਉਦਾਹਰਨ ਲਈ, ਹੇਠ ਦਿੱਤੀ CSS ਸਭ ਬਣਾਵੇਗੀ <h1> ਪੰਨੇ 'ਤੇ ਐਲੀਮੈਂਟਸ ਦਾ ਲਾਲ ਰੰਗ ਅਤੇ 32px ਦਾ ਫੌਂਟ ਆਕਾਰ ਹੁੰਦਾ ਹੈ:

CSS

h1 {
  color: red;
  font-size: 32px;
}

ਆਉਟਪੁੱਟ

ਸਿਰਲੇਖ

ਤੁਸੀਂ ਇੱਕ ਤੱਤ 'ਤੇ ਇੱਕ ਵਿਲੱਖਣ ID ਲਈ CSS ਵੀ ਨਿਰਧਾਰਤ ਕਰ ਸਕਦੇ ਹੋ:

CSS

/* styles for an element with ID "intro" */
#intro {
  font-weight: bold;
  text-align: center;
}

ਆਉਟਪੁੱਟ

intro

ਜਾਂ ਕਈ ਤੱਤਾਂ ਵਿੱਚ ਇੱਕ ਕਲਾਸ ਲਾਗੂ ਕਰੋ:

CSS

/* styles for elements with class "highlight" */
.highlight {
  background-color: yellow;
}

ਆਉਟਪੁੱਟ

ਮੈਂ ਚਾਹੁੰਦਾ ਹਾਂ ਹਾਈਲਾਈਟ ਸਪੈਨ ਟੈਗ ਵਿੱਚ ਇੱਕ ਸ਼ਬਦ.

ਤੁਸੀਂ ਆਪਣੇ HTML ਦਸਤਾਵੇਜ਼ ਵਿੱਚ CSS ਨੂੰ ਤਿੰਨ ਤਰੀਕਿਆਂ ਨਾਲ ਸ਼ਾਮਲ ਕਰ ਸਕਦੇ ਹੋ:

ਇਨਲਾਈਨ CSS, ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹੋਏ style ਇੱਕ HTML ਤੱਤ 'ਤੇ ਵਿਸ਼ੇਸ਼ਤਾ

ਅੰਦਰੂਨੀ CSS, ਏ <style> ਵਿੱਚ ਤੱਤ <head> ਤੁਹਾਡੇ HTML ਦਸਤਾਵੇਜ਼ ਦਾ
ਬਾਹਰੀ CSS, ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹੋਏ ਤੁਹਾਡੇ HTML ਦਸਤਾਵੇਜ਼ ਨਾਲ ਲਿੰਕ ਕੀਤੀ ਇੱਕ ਵੱਖਰੀ .css ਫਾਈਲ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹੋਏ <link> ਵਿੱਚ ਤੱਤ <head> ਤੁਹਾਡੇ HTML ਦਸਤਾਵੇਜ਼ ਦਾ

ਜਵਾਬਦੇਹ CSS

CSS ਅਵਿਸ਼ਵਾਸ਼ਯੋਗ ਤੌਰ 'ਤੇ ਲਚਕਦਾਰ ਹੈ ਅਤੇ ਸਕ੍ਰੀਨ ਰੈਜ਼ੋਲਿਊਸ਼ਨ ਦੇ ਆਧਾਰ 'ਤੇ ਤੱਤਾਂ ਦੇ ਡਿਸਪਲੇਅ ਨੂੰ ਅਨੁਕੂਲ ਕਰਨ ਲਈ ਵਰਤਿਆ ਜਾ ਸਕਦਾ ਹੈ, ਇਸ ਲਈ ਤੁਹਾਡੇ ਕੋਲ ਉਹੀ HTML ਹੋ ਸਕਦਾ ਹੈ ਪਰ ਇਸ ਨੂੰ ਬਣਾਉਣਾ ਜਵਾਬਦੇਹ ਡਿਵਾਈਸ ਰੈਜ਼ੋਲਿਊਸ਼ਨ ਲਈ:

/* media query for responsive design */
@media (max-width: 768px) {
  p {
    font-size: 14px;
  }
  #intro {
    font-size: 20px;
  }
}

CSS ਕੰਪਰੈਸ਼ਨ

ਤੁਸੀਂ ਉਪਰੋਕਤ ਉਦਾਹਰਨ ਵਿੱਚ ਦੇਖ ਸਕਦੇ ਹੋ ਕਿ ਇੱਥੇ ਇੱਕ ਟਿੱਪਣੀ, ਇੱਕ ਮੀਡੀਆ ਪੁੱਛਗਿੱਛ, ਅਤੇ ਮਲਟੀਪਲ ਸਟਾਈਲ ਹਨ ਜੋ CSS ਦੇ ਦ੍ਰਿਸ਼ ਨੂੰ ਵਿਵਸਥਿਤ ਕਰਨ ਲਈ ਸਪੇਸ ਅਤੇ ਲਾਈਨ ਫੀਡਸ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹਨ। ਫਾਈਲ ਦੇ ਆਕਾਰ ਨੂੰ ਘਟਾਉਣ ਲਈ ਤੁਹਾਡੀ ਸਾਈਟ 'ਤੇ ਆਪਣੇ CSS ਨੂੰ ਛੋਟਾ ਕਰਨਾ ਜਾਂ ਸੰਕੁਚਿਤ ਕਰਨਾ ਇੱਕ ਵਧੀਆ ਅਭਿਆਸ ਹੈ ਅਤੇ, ਬਾਅਦ ਵਿੱਚ, ਤੁਹਾਡੀ ਸਟਾਈਲਿੰਗ ਦੀ ਬੇਨਤੀ ਕਰਨ ਅਤੇ ਰੈਂਡਰ ਕਰਨ ਵਿੱਚ ਲੱਗਣ ਵਾਲਾ ਸਮਾਂ। ਇਹ ਕੋਈ ਛੋਟੀ ਰਕਮ ਨਹੀਂ ਹੈ... ਤੁਸੀਂ ਉੱਪਰ ਦਿੱਤੀਆਂ ਕੁਝ ਉਦਾਹਰਣਾਂ 'ਤੇ 50% ਤੋਂ ਵੱਧ ਬਚਤ ਦੇਖ ਸਕਦੇ ਹੋ।

ਕਈ ਸਰਵਰ ਕੌਂਫਿਗਰੇਸ਼ਨ ਟੂਲ ਪੇਸ਼ ਕਰਦੇ ਹਨ ਜੋ ਆਪਣੇ ਆਪ CSS ਨੂੰ ਉੱਡਣ 'ਤੇ ਸੰਕੁਚਿਤ ਕਰਨਗੇ ਅਤੇ ਮਿਨੀਫਾਈਡ ਫਾਈਲ ਨੂੰ ਕੈਸ਼ ਕਰਨਗੇ ਤਾਂ ਜੋ ਤੁਹਾਨੂੰ ਇਸ ਨੂੰ ਹੱਥੀਂ ਨਾ ਕਰਨਾ ਪਵੇ।

SCSS ਕੀ ਹੈ?

Sassy CSS (ਐਸ.ਸੀ.ਐੱਸ) ਇੱਕ CSS ਪ੍ਰੀਪ੍ਰੋਸੈਸਰ ਹੈ ਜੋ CSS ਭਾਸ਼ਾ ਵਿੱਚ ਵਾਧੂ ਕਾਰਜਸ਼ੀਲਤਾ ਅਤੇ ਸੰਟੈਕਸ ਜੋੜਦਾ ਹੈ। ਇਹ ਵੇਰੀਏਬਲ, ਮਿਕਸਿਨ, ਫੰਕਸ਼ਨਾਂ ਅਤੇ ਹੋਰ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਦੀ ਵਰਤੋਂ ਦੀ ਆਗਿਆ ਦੇ ਕੇ CSS ਦੀਆਂ ਸਮਰੱਥਾਵਾਂ ਨੂੰ ਵਧਾਉਂਦਾ ਹੈ ਜੋ ਸਟੈਂਡਰਡ CSS ਵਿੱਚ ਉਪਲਬਧ ਨਹੀਂ ਹਨ।

SCSS ਫਾਇਦੇ

ਸੁਧਰੀ ਰੱਖ-ਰਖਾਅਯੋਗਤਾ: ਵੇਰੀਏਬਲ ਦੀ ਵਰਤੋਂ ਨਾਲ, ਤੁਸੀਂ ਮੁੱਲਾਂ ਨੂੰ ਇੱਕ ਥਾਂ 'ਤੇ ਸਟੋਰ ਕਰ ਸਕਦੇ ਹੋ ਅਤੇ ਉਹਨਾਂ ਨੂੰ ਆਪਣੀ ਸਟਾਈਲਸ਼ੀਟ ਵਿੱਚ ਦੁਬਾਰਾ ਵਰਤ ਸਕਦੇ ਹੋ, ਜਿਸ ਨਾਲ ਤੁਹਾਡੀਆਂ ਸ਼ੈਲੀਆਂ ਨੂੰ ਬਣਾਈ ਰੱਖਣਾ ਅਤੇ ਅੱਪਡੇਟ ਕਰਨਾ ਆਸਾਨ ਹੋ ਜਾਂਦਾ ਹੈ।
ਬਿਹਤਰ ਸੰਗਠਨ: ਮਿਕਸਿਨਸ ਦੇ ਨਾਲ, ਤੁਸੀਂ ਸਟਾਈਲ ਦੇ ਸੈੱਟਾਂ ਨੂੰ ਗਰੁੱਪ ਬਣਾ ਸਕਦੇ ਹੋ ਅਤੇ ਦੁਬਾਰਾ ਵਰਤੋਂ ਕਰ ਸਕਦੇ ਹੋ, ਜਿਸ ਨਾਲ ਤੁਹਾਡੀ ਸਟਾਈਲਸ਼ੀਟ ਨੂੰ ਹੋਰ ਸੰਗਠਿਤ ਅਤੇ ਪੜ੍ਹਨਾ ਆਸਾਨ ਹੋ ਜਾਂਦਾ ਹੈ।
ਵਧੀ ਹੋਈ ਕਾਰਜਕੁਸ਼ਲਤਾ: SCSS ਵਿੱਚ ਬਹੁਤ ਸਾਰੀਆਂ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਸ਼ਾਮਲ ਹੁੰਦੀਆਂ ਹਨ ਜੋ ਮਿਆਰੀ CSS ਵਿੱਚ ਉਪਲਬਧ ਨਹੀਂ ਹਨ, ਜਿਵੇਂ ਕਿ ਫੰਕਸ਼ਨ, ਨਿਯੰਤਰਣ ਢਾਂਚੇ (ਜਿਵੇਂ ਕਿ ਜੇ/ਹੋਰ), ਅਤੇ ਅੰਕਗਣਿਤ ਕਾਰਜ। ਇਹ ਵਧੇਰੇ ਗਤੀਸ਼ੀਲ ਅਤੇ ਭਾਵਪੂਰਤ ਸਟਾਈਲਿੰਗ ਲਈ ਸਹਾਇਕ ਹੈ।
ਬਿਹਤਰ ਪ੍ਰਦਰਸ਼ਨ: SCSS ਫਾਈਲਾਂ ਨੂੰ CSS ਵਿੱਚ ਕੰਪਾਇਲ ਕੀਤਾ ਜਾਂਦਾ ਹੈ, ਜੋ ਕਿ ਕੋਡ ਦੀ ਮਾਤਰਾ ਨੂੰ ਘਟਾ ਕੇ ਪ੍ਰਦਰਸ਼ਨ ਨੂੰ ਬਿਹਤਰ ਬਣਾ ਸਕਦਾ ਹੈ ਜਿਸਨੂੰ ਬ੍ਰਾਊਜ਼ਰ ਦੁਆਰਾ ਪਾਰਸ ਕਰਨ ਦੀ ਲੋੜ ਹੁੰਦੀ ਹੈ।

SCSS ਦੇ ਨੁਕਸਾਨ

ਲਰਨਿੰਗ ਕਰਵ: SCSS ਦਾ ਸਟੈਂਡਰਡ CSS ਤੋਂ ਵੱਖਰਾ ਸੰਟੈਕਸ ਹੈ, ਅਤੇ ਤੁਹਾਨੂੰ ਇਸ ਦੀ ਪ੍ਰਭਾਵੀ ਵਰਤੋਂ ਕਰਨ ਤੋਂ ਪਹਿਲਾਂ ਇਸ ਨਵੇਂ ਸੰਟੈਕਸ ਨੂੰ ਸਿੱਖਣ ਦੀ ਲੋੜ ਪਵੇਗੀ।
ਵਧੀਕ ਗੁੰਝਲਤਾ: ਹਾਲਾਂਕਿ SCSS ਤੁਹਾਡੀ ਸਟਾਈਲਸ਼ੀਟ ਨੂੰ ਹੋਰ ਸੰਗਠਿਤ ਅਤੇ ਸੰਭਾਲਣ ਲਈ ਆਸਾਨ ਬਣਾ ਸਕਦਾ ਹੈ, ਇਹ ਤੁਹਾਡੇ ਕੋਡਬੇਸ ਵਿੱਚ ਵਾਧੂ ਗੁੰਝਲਤਾ ਵੀ ਪੇਸ਼ ਕਰ ਸਕਦਾ ਹੈ, ਖਾਸ ਕਰਕੇ ਜੇਕਰ ਤੁਸੀਂ ਨਵੀਆਂ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਅਤੇ ਸੰਟੈਕਸ ਤੋਂ ਜਾਣੂ ਨਹੀਂ ਹੋ।
ਟੂਲਿੰਗ: SCSS ਦੀ ਵਰਤੋਂ ਕਰਨ ਲਈ, ਤੁਹਾਨੂੰ ਆਪਣੇ SCSS ਕੋਡ ਨੂੰ CSS ਵਿੱਚ ਅਨੁਵਾਦ ਕਰਨ ਲਈ ਇੱਕ ਕੰਪਾਈਲਰ ਦੀ ਲੋੜ ਪਵੇਗੀ। ਇਸ ਲਈ ਵਾਧੂ ਸੈੱਟਅੱਪ ਅਤੇ ਟੂਲਿੰਗ ਦੀ ਲੋੜ ਹੈ, ਜੋ ਕਿ ਕੁਝ ਡਿਵੈਲਪਰਾਂ ਲਈ ਦਾਖਲੇ ਲਈ ਰੁਕਾਵਟ ਹੋ ਸਕਦੀ ਹੈ।

ਹੇਠਾਂ ਦਿੱਤੀ ਇਸ ਉਦਾਹਰਨ ਵਿੱਚ, SCSS ਕੋਡ ਮੁੱਲਾਂ ਨੂੰ ਸਟੋਰ ਕਰਨ ਲਈ ਵੇਰੀਏਬਲ ਦੀ ਵਰਤੋਂ ਕਰਦਾ ਹੈ ($primary-color ਅਤੇ $font-size) ਜੋ ਪੂਰੀ ਸਟਾਈਲਸ਼ੀਟ ਵਿੱਚ ਦੁਬਾਰਾ ਵਰਤੀ ਜਾ ਸਕਦੀ ਹੈ। ਇਸ SCSS ਕੋਡ ਤੋਂ ਤਿਆਰ ਕੀਤਾ ਗਿਆ CSS ਕੋਡ ਬਰਾਬਰ ਹੈ, ਪਰ ਇਸ ਵਿੱਚ ਵੇਰੀਏਬਲ ਸ਼ਾਮਲ ਨਹੀਂ ਹਨ। ਇਸਦੀ ਬਜਾਏ, ਵੇਰੀਏਬਲ ਦੇ ਮੁੱਲ ਸਿੱਧੇ CSS ਵਿੱਚ ਵਰਤੇ ਜਾਂਦੇ ਹਨ।

$primary-color: blue;
$font-size: 16px;

body {
  font-size: $font-size;
  color: $primary-color;

  h1 {
    font-size: 2em;
    color: $primary-color;
  }
}

SCSS ਦੀ ਇੱਕ ਹੋਰ ਵਿਸ਼ੇਸ਼ਤਾ ਜੋ ਇਸ ਉਦਾਹਰਨ ਵਿੱਚ ਪ੍ਰਦਰਸ਼ਿਤ ਕੀਤੀ ਗਈ ਹੈ ਨੇਸਟਡ ਸਟਾਈਲ ਹੈ। SCSS ਕੋਡ ਵਿੱਚ, h1 ਸਟਾਈਲ ਦੇ ਅੰਦਰ ਨੇਸਟ ਕੀਤਾ ਗਿਆ ਹੈ body ਸਟਾਈਲ, ਜੋ ਕਿ ਮਿਆਰੀ CSS ਵਿੱਚ ਸੰਭਵ ਨਹੀਂ ਹੈ। ਜਦੋਂ SCSS ਕੋਡ ਕੰਪਾਇਲ ਕੀਤਾ ਜਾਂਦਾ ਹੈ, ਤਾਂ CSS ਕੋਡ ਵਿੱਚ ਨੇਸਟਡ ਸਟਾਈਲ ਨੂੰ ਵੱਖਰੀਆਂ ਸ਼ੈਲੀਆਂ ਵਿੱਚ ਫੈਲਾਇਆ ਜਾਂਦਾ ਹੈ।

ਕੁੱਲ ਮਿਲਾ ਕੇ, SCSS ਸਟੈਂਡਰਡ CSS ਦੇ ਮੁਕਾਬਲੇ ਬਹੁਤ ਸਾਰੇ ਫਾਇਦੇ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ, ਪਰ ਇਹ ਮਹੱਤਵਪੂਰਨ ਹੈ ਕਿ ਵਪਾਰ-ਆਫਾਂ 'ਤੇ ਵਿਚਾਰ ਕਰੋ ਅਤੇ ਤੁਹਾਡੀਆਂ ਲੋੜਾਂ ਅਤੇ ਰੁਕਾਵਟਾਂ ਦੇ ਆਧਾਰ 'ਤੇ ਆਪਣੇ ਪ੍ਰੋਜੈਕਟ ਲਈ ਸਹੀ ਟੂਲ ਚੁਣੋ।