CSS (The Skin & Dress)

#webdev #beginners #css #frontend

CSS: The Skin & Dress (நம்ம Website-ஓட மேக்கப்!)

நம்ம ஏற்கனவே பார்த்த மாதிரி, HTML ஒரு எலும்புக்கூடு (Skeleton) மாதிரி. ஆனா வெறும் எலும்பை மட்டும் பார்த்தா பயமா இருக்கும்ல? அந்த எலும்புக்கூட்டுக்கு ஒரு அழகான தோற்றத்தைக் குடுக்கிறதுதான் CSS.
CSS-னா Cascading Style Sheets. இத "Skin & Dress" அப்படின்னு ஏன் சொல்றோம்னா:

Skin Color: நம்ம தோலோட நிறம் என்ன?
Dress Style: நம்ம என்ன கலர் சட்டை போடுறோம்?
Hairstyle: நம்ம முடி எப்படி இருக்கணும்? இதே மாதிரி Website-ல இருக்குற Content-ஐ அழகாக்குறதுதான் CSS-ஓட வேலை.

How it works? (இது எப்படி மேக்கப் போடும்?)

HTML-ல இருக்குற ஒரு உறுப்பை (Element) செலக்ட் பண்ணி, அதுக்கு நாம "Design" குடுக்கணும்.

Color: color: blue; - இது சட்டையோட கலரை மாத்துற மாதிரி Text கலரை மாத்தும்.
Font-size: font-size: 20px; - இது ஒரு சின்ன பையனை உயரமாக்குற மாதிரி எழுத்துக்களை பெருசாக்கும்.
Background: background-color: yellow; - இது நம்ம வீட்டு சுவத்துக்கு பெயிண்ட் அடிக்கிற மாதிரி பின்னணி கலரை மாத்தும்.

Example:
HTML-ல நீங்க ஒரு Button உருவாக்கியிருப்பீங்க. அது பாக்க சும்மா மொட்டையா இருக்கும்.
CSS கிட்ட போயிட்டு: "இந்த Button-க்கு சிவப்புக் கலர் குடு, அதோட ஓரத்தை (Edges) கொஞ்சம் வளைச்சு விடு (Border-radius), அப்புறம் அதோட எழுத்தை தடிமனாக்கு (Font-weight)"-னு சொன்னா, அது சூப்பரா மாறிடும்!

Example:

HTML:

<article class="human">
  <header class="face">
    <h1>😃</h1>
    <p>The Face</p>
  </header>

  <section class="torso">
    <p>Chest & Heart (Main Content)</p>
  </section>

  <div class="arms">
    <button>Left Hand</button>
    <button>Right Hand</button>
  </div>

  <footer class="feet">
    <p>The Feet</p>
  </footer>
</article>

CSS:

/* 1. The Body Shape (மொத்த உருவம்) */
.human {
  background-color: #f3e5ab; /* Skin Tone */
  width: 250px;
  border: 4px solid #5d4037; /* Outline like a cartoon */
  border-radius: 50px;       /* Smooth body curves */
  text-align: center;
  padding: 20px;
  margin: 20px auto;
  box-shadow: 10px 10px 0px #bcac84; /* Shadow on the ground */
}

/* 2. The Face Style (முகம்) */
.face {
  background-color: #fff;
  border-radius: 50%; /* Making the head round */
  width: 100px;
  margin: 0 auto 20px;
  padding: 10px;
}

/* 3. The Torso (உடல் பகுதி) */
.torso {
  background-color: #3498db; /* Wearing a Blue T-Shirt */
  color: white;
  padding: 15px;
  margin-bottom: 15px;
}

/* 4. The Arms (கைகள் - Interaction) */
.arms button {
  background-color: #e67e22; /* Orange Gloves */
  color: white;
  border: none;
  padding: 10px;
  cursor: pointer;
  border-radius: 10px;
}

/* 5. The Feet (பாதம்) */
.feet {
  margin-top: 20px;
  font-weight: bold;
  border-top: 2px dashed #5d4037;
}

Explanation:
"இப்போ பாருங்க! நம்ம வெறும் எலும்புக்கூடா (HTML) இருந்த மனுஷனுக்கு எப்படி மேக்கப் (CSS) போட்டுருக்கோம்னு!"

.human (Body Shape): border-radius: 50px குடுத்த உடனே, அந்த கட்டையா இருந்த Box, ஒரு மனுஷனோட உடல் மாதிரி வளைவா (Curves) மாறிடுச்சு.
.face (Round Head): border-radius: 50% யூஸ் பண்ணி சதுரமா இருந்த தலைய உருண்டையா மாத்திட்டோம்.
.torso (T-Shirt): background-color: #3498db குடுத்த உடனே, அந்த மனுஷன் ஒரு Blue கலர் சட்டை போட்ட மாதிரி மாறிட்டான்.
.arms button (Interaction): கைகளுக்கு கலர் குடுத்து, அது மேல மவுஸ் கொண்டு போனா கை அசைக்கிற மாதிரி (cursor: pointer) செஞ்சிருக்கோம்.

Output: