Concepts of CSS: adding CSS (Inline, Internal, External)

📖 Theory

એ form જેણે લોકોને ભગાડી દીધા

તમે FestConnect નું નોંધણીનું પાનું સાદા HTML માં બનાવ્યું. એ ચાલે છે, પણ એ 1998 ના કચેરીના form જેવું લાગે છે: સફેદ પર કાળું Times નું લખાણ, દબાયેલું ભૂરું મથાળું, ટપાલની ટિકિટ જેવડાં બટન. Students એને ખોલે છે અને બંધ કરે છે.

રચના તો બરાબર છે. જે ખૂટે છે એ છે શૈલી: રંગ, જગ્યા, અક્ષરો. Web ની રચનામાં શૈલી અલગ ભાષામાં વસે છે, CSS (Cascading Style Sheets), અને તમારો પહેલો નિર્ણય ફક્ત એટલો છે કે એને ક્યાં મૂકવી. બરાબર ત્રણ જગ્યા છે.

📖 Theory

ચીટકણી ચિઠ્ઠી, પાનાના નિયમો, ઘરની નિયમાવલી

શાળાની સૂચનાને શણગારવાનું વિચારો:

• Inline એ એક જ લીટી પર ચોંટાડેલી ચીટકણી ચિઠ્ઠી છે: એ ફક્ત એ લીટી બદલે છે.
• Internal એ એ એક જ સૂચનાની ટોચે લખેલો નિયમ છે: એ આખી સૂચના પર રાજ કરે છે.
• External એ શાળાની છાપેલી નિયમાવલી છે જેને દરેક સૂચના અનુસરે છે.

CSS માટે એ જ ત્રણ પસંદગી: એક tag પર, એક પાનાની ટોચે, કે વહેંચાયેલી file માં જેને આખી site પાળે.

📖 Theory

ત્રણેય રીત, ઔપચારિક રીતે

• Inline CSS: એક જ element પરનું style attribute. ફક્ત એ એક tag ને શણગારે છે.
• Internal (embedded) CSS: પાનાના <head> ની અંદરનો <style> નો ભાગ. એ આખા પાનાને શણગારે છે.
• External CSS: અલગ .css file માંના નિયમો, જે <head> માંના <link> tag થી લવાય છે. એને જોડતા દરેક પાનાને શણગારે છે.

ત્રણેય એક જ સ્વરૂપનો નિયમ લખે છે: એક selector પછી { property: value; }, ઉદાહરણ તરીકે h1 { color: crimson; }.

⌨️ Practical

એ જ મથાળું, ત્રણ રીતે શણગારેલું

<!-- 1. INLINE: style attribute on the tag itself -->
<h1 style="color: crimson; text-align: center;">FestConnect</h1>

<!-- 2. INTERNAL: a <style> block in the head -->
<head>
  <style>
    h1 { color: crimson; text-align: center; }
  </style>
</head>

<!-- 3. EXTERNAL: link a separate file, put the rule in styles.css -->
<head>
  <link rel="stylesheet" href="styles.css">
</head>
<!-- styles.css contains:  h1 { color: crimson; text-align: center; } -->

This example runs in Gri-Learn on the web, where you can edit it and see the output.

📊 At a glance

કઈ, અને ક્યારે

💭 Think first

રંગ ધારો

styles.css કહે છે h1 { color: blue; }. એ જ પાનાના <head> માં link પછી લખાયેલો internal નિયમ h1 { color: green; } પણ છે. અને tag પોતે છે <h1 style="color: crimson;">. મથાળાનો રંગ કયો છે? Tap કરતાં પહેલાં નક્કી કરો.

🧩 Quiz

તમને FestConnect નાં છ એ છ પાનાં પર રંગ અને અક્ષરોનો એક જ સમૂહ લાગુ કરવો છે, અને પછી એક જ જગ્યાએથી બદલવો છે. કઈ રીત?

1. External CSS: એક .css file દરેક પાનામાં જોડેલી
2. દરેક element પર inline CSS જેથી દરેક સ્પષ્ટ રહે
3. Internal CSS, છ એ છ પાનાંના <head> માં નકલ કરેલી
4. કશો ફરક પડતો નથી, ત્રણેય એકસરખાં વર્તે છે

⚠️ Watch out

અગ્રતાનો ફાંદો

પરીક્ષાઓ પૂછે છે: "નિયમો ટકરાય ત્યારે કયો જીતે છે?" ક્રમ છે ચોકસાઈ પ્રમાણે inline > internal/external, પછી બરાબરી થાય તો છેલ્લે load થયેલો જીતે. બહુ સામાન્ય ખોટો જવાબ છે 'external હંમેશા internal ને હરાવે છે'. એ સાચું નથી: એ load થવાના ક્રમ અને ચોકસાઈ પર આધારિત છે, રીતના નામ પર નહીં.

બીજો ફાંદો: <link> અને <style> tags <head> માં હોય, <body> માં નહીં. Body માં styles મૂકવાનું browsers માં ઘણી વાર ચાલે તો છે પણ પરીક્ષામાં એને ખોટું ગણાય છે.

📖 Theory

Bootstrap એ ફક્ત external CSS જ છે

આગલા એકમમાં તમે એક .css file નું એક <link> ચોંટાડીને Bootstrap ઉમેરશો. એ external CSS છે, બરાબર ઉપરની જ ભાત, ફક્ત કોઈ બીજાએ લખેલી. તમે પછી મળશો એ દરેક framework (Bootstrap, પછી એથીય મોટાં) મૂળભૂત રીતે એક મોટી external stylesheet છે જેને તમે જોડો છો અને પછી તમારી પોતાની થી બદલો છો.

✅ Summary

Key takeaways

• CSS ત્રણ રીતે જોડાય છે: inline (style attribute, એક tag), internal (head માં <style>, એક પાનું), external (.css file સાથે <link>, અનેક પાનાં).
• ત્રણેય એક જ સ્વરૂપનો નિયમ વાપરે છે: selector { property: value; }.
• અગ્રતા: ચોકસાઈમાં inline એ internal/external ને હરાવે છે; સરખા નિયમો છેલ્લે load થયેલો જીતે એ રીતે ઉકેલાય છે (cascade).
• External એ વ્યાવસાયિક મૂળભૂત છે: પાનાં પાર ફરી વપરાય અને browser એને cache કરે.
• <style> અને <link> એ <head> માં વસે છે, <body> માં નહીં.
• Memory hook: ચીટકણી ચિઠ્ઠી, પાનાના નિયમો, ઘરની નિયમાવલી.