HTML Styles - CSS - Jassif Team

CSS என்றால் என்ன?

CSS என்பது Cascading Style Sheets என்பதன் சுருக்கம்.

CSS நிறைய வேலையை மிச்சப்படுத்துகிறது. இது ஒரே நேரத்தில் பல வலைப்பக்கங்களின் தளவமைப்பைக் கட்டுப்படுத்தும்.

🎨 CSS = Styles and Colors

உரையைக் கையாளவும், வண்ணங்கள், பெட்டிகள் மற்றும் இடவியலைக் கட்டுப்படுத்தவும் CSS பயன்படுத்தப்படுகிறது.

CSS விளக்கம்

Cascading Style Sheets (CSS) ஒரு வலைப்பக்கத்தின் தளவமைப்பை வடிவமைக்கப் பயன்படுகிறது.

CSS உடன், நீங்கள் வண்ணம், எழுத்துரு, உரையின் அளவு, உறுப்புகளுக்கு இடையே உள்ள இடைவெளி, உறுப்புகள் எவ்வாறு வைக்கப்பட்டு அமைக்கப்பட்டுள்ளன, என்ன பின்னணி படங்கள் அல்லது பின்னணி வண்ணங்கள் பயன்படுத்தப்பட வேண்டும், வெவ்வேறு சாதனங்கள் மற்றும் திரை அளவுகளுக்கு வெவ்வேறு காட்சிகள் மற்றும் பலவற்றைக் கட்டுப்படுத்தலாம்!

💡 உதவிக்குறிப்பு:

"Cascading" என்ற வார்த்தை ஒரு பாங்கு ஒரு பெற்றோர் உறுப்புக்குப் பயன்படுத்தப்பட்டால், அது பெற்றோருக்குள் உள்ள அனைத்து குழந்தை உறுப்புகளுக்கும் பொருந்தும். எனவே, உடல் உரையின் நிறத்தை "நீலம்" என அமைத்தால், உடலுக்குள் உள்ள அனைத்து தலைப்புகள், பத்திகள் மற்றும் பிற உரை உறுப்புகளும் அதே நிறத்தைப் பெறும் (நீங்கள் வேறு ஏதாவது குறிப்பிடாவிட்டால்)!

CSS ஐப் பயன்படுத்துதல்

CSS ஐ HTML ஆவணங்களில் 3 வழிகளில் சேர்க்கலாம்:

Inline CSS

HTML உறுப்புகளுக்குள் style பண்பைப் பயன்படுத்துதல்

Internal CSS

<head> பிரிவில் <style> உறுப்பைப் பயன்படுத்துதல்

External CSS

வெளி CSS கோப்புடன் இணைக்க <link> உறுப்பைப் பயன்படுத்துதல்

🏆 முக்கியம்:

CSS சேர்க்க மிகவும் பொதுவான வழி, பாங்குகளை வெளி CSS கோப்புகளில் வைத்திருப்பதாகும். இருப்பினும், இந்த டுடோரியலில் நாங்கள் inline மற்றும் internal பாங்குகளைப் பயன்படுத்துவோம், ஏனெனில் இது ஆர்ப்பாட்டத்திற்கு எளிதானது மற்றும் நீங்கள் அதை நீங்களே முயற்சிப்பதற்கு எளிதானது.

Inline CSS

ஒரு inline CSS ஒரு தனி HTML உறுப்புக்கு ஒரு தனிப்பட்ட பாங்கைப் பயன்படுத்தப் பயன்படுகிறது.

ஒரு inline CSS ஒரு HTML உறுப்பின் style பண்பைப் பயன்படுத்துகிறது.

எடுத்துக்காட்டு

பின்வரும் எடுத்துக்காட்டு <h1> உறுப்பின் உரை நிறத்தை நீலமாகவும், <p> உறுப்பின் உரை நிறத்தை சிவப்பாகவும் அமைக்கிறது:

<h1 style="color:blue;">A Blue Heading</h1>

<p style="color:red;">A red paragraph.</p>

Internal CSS

ஒரு internal CSS ஒரு தனி HTML பக்கத்திற்கான பாங்கை வரையறுக்கப் பயன்படுகிறது.

ஒரு internal CSS ஒரு HTML பக்கத்தின் <head> பிரிவில், <style> உறுப்புக்குள் வரையறுக்கப்பட்டுள்ளது.

எடுத்துக்காட்டு

பின்வரும் எடுத்துக்காட்டு அந்தப் பக்கத்தில் உள்ள அனைத்து <h1> உறுப்புகளின் உரை நிறத்தையும் நீலமாகவும், அனைத்து <p> உறுப்புகளின் உரை நிறத்தையும் சிவப்பாகவும் அமைக்கிறது. கூடுதலாக, பக்கம் "powderblue" பின்னணி நிறத்துடன் காட்சிப்படுத்தப்படும்:

<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: powderblue;}
h1   {color: blue;}
p    {color: red;}
</style>
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

External CSS

ஒரு external style sheet பல HTML பக்கங்களுக்கான பாங்கை வரையறுக்கப் பயன்படுகிறது.

ஒரு external style sheet ஐப் பயன்படுத்த, ஒவ்வொரு HTML பக்கத்தின் <head> பிரிவிலும் அதற்கு ஒரு இணைப்பைச் சேர்க்கவும்:

எடுத்துக்காட்டு

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="styles.css">
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

External style sheet எந்த உரை தொகுப்பியிலும் எழுதப்படலாம். கோப்பில் எந்த HTML குறியீடும் இருக்கக்கூடாது, மேலும் .css நீட்டிப்புடன் சேமிக்கப்பட வேண்டும்.

"styles.css" கோப்பு:

body {
  background-color: powderblue;
}
h1 {
  color: blue;
}
p {
  color: red;
}

🚀 உதவிக்குறிப்பு:

ஒரு external style sheet உடன், நீங்கள் ஒரு கோப்பை மாற்றுவதன் மூலம் முழு வலைத்தளத்தின் தோற்றத்தையும் மாற்றலாம்!

CSS பண்புகள்

CSS Colors, Fonts and Sizes

இங்கே, பொதுவாகப் பயன்படுத்தப்படும் சில CSS பண்புகளை நாங்கள் ஆர்ப்பாட்டம் செய்வோம். நீங்கள் பின்னர் அவற்றைப் பற்றி மேலும் அறிவீர்கள்.

color property

பயன்படுத்தப்பட வேண்டிய உரை நிறத்தை வரையறுக்கிறது

font-family property

பயன்படுத்தப்பட வேண்டிய எழுத்துருவை வரையறுக்கிறது

font-size property

பயன்படுத்தப்பட வேண்டிய உரை அளவை வரையறுக்கிறது

எடுத்துக்காட்டு

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  color: blue;
  font-family: verdana;
  font-size: 300%;
}
p {
  color: red;
  font-family: courier;
  font-size: 160%;
}
</style>
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

Box Model பண்புகள்

CSS Border

p {
  border: 2px solid powderblue;
}

CSS border property ஒரு HTML உறுப்பைச் சுற்றி ஒரு எல்லையை வரையறுக்கிறது.

CSS Padding

p {
  border: 2px solid powderblue;
  padding: 30px;
}

CSS padding property உரை மற்றும் எல்லைக்கு இடையே ஒரு padding (இடம்) வரையறுக்கிறது.

CSS Margin

p {
  border: 2px solid powderblue;
  margin: 50px;
}

CSS margin property எல்லைக்கு வெளியே ஒரு margin (இடம்) வரையறுக்கிறது.

📦 உதவிக்குறிப்பு:

நீங்கள் கிட்டத்தட்ட அனைத்து HTML உறுப்புகளுக்கும் ஒரு எல்லையை வரையறுக்கலாம்.

External CSS Paths

External style sheets ஒரு முழு URL உடன் அல்லது தற்போதைய வலைப்பக்கத்துடன் ஒப்பிடும்போது ஒரு பாதையுடன் குறிப்பிடப்படலாம்.

எடுத்துக்காட்டு	விளக்கம்
`<link rel="stylesheet" href="https://www.jassifteam.com/styles.css">`	ஒரு style sheet உடன் இணைக்க முழு URL ஐப் பயன்படுத்துகிறது
`<link rel="stylesheet" href="/html/styles.css">`	தற்போதைய வலைத்தளத்தில் html கோப்புறையில் அமைந்துள்ள ஒரு style sheet உடன் இணைகிறது
`<link rel="stylesheet" href="styles.css">`	தற்போதைய பக்கத்தின் அதே கோப்புறையில் அமைந்துள்ள ஒரு style sheet உடன் இணைகிறது

நீங்கள் HTML File Paths அத்தியாயத்தில் கோப்புப் பாதைகளைப் பற்றி மேலும் அறியலாம்.

அத்தியாய சுருக்கம்

HTML style attribute - inline styling க்குப் பயன்படுத்தவும்

HTML <style> element - internal CSS வரையறுக்கப் பயன்படுத்தவும்

HTML <link> element - external CSS கோப்பைக் குறிப்பிடப் பயன்படுத்தவும்

HTML <head> element - <style> மற்றும் <link> உறுப்புகளைச் சேமிக்கப் பயன்படுத்தவும்

CSS பண்புகள்:

CSS color property - உரை வண்ணங்களுக்குப் பயன்படுத்தவும்
CSS font-family property - உரை எழுத்துருக்களுக்குப் பயன்படுத்தவும்
CSS font-size property - உரை அளவுகளுக்குப் பயன்படுத்தவும்
CSS border property - எல்லைகளுக்குப் பயன்படுத்தவும்
CSS padding property - எல்லைக்குள் இடத்திற்குப் பயன்படுத்தவும்
CSS margin property - எல்லைக்கு வெளியே இடத்திற்குப் பயன்படுத்தவும்

📚 உதவிக்குறிப்பு:

நீங்கள் எங்கள் CSS டுடோரியலில் CSS பற்றி மேலும் அறியலாம்.

பயிற்சி

External stylesheet உடன் இணைப்பதற்கான சரியான தொடரியல் எது?

✗ தவறு! <style> குறிச்சொல் external stylesheet க்கு பயன்படுத்தப்படாது

✓ சரி! <link> குறிச்சொல் external stylesheet உடன் இணைக்கப் பயன்படுகிறது

✗ தவறு! <a> குறிச்சொல் ஹைப்பர்லிங்குகளுக்குப் பயன்படுத்தப்படுகிறது, stylesheet க்கு அல்ல

HTML Style குறிச்சொற்கள்

குறிச்சொல்	விளக்கம்
<style>	ஒரு HTML ஆவணத்திற்கான பாங்கு தகவலை வரையறுக்கிறது
<link>	ஒரு ஆவணத்திற்கும் வெளி வளத்திற்கும் இடையே ஒரு இணைப்பை வரையறுக்கிறது

📖 குறிப்பு:

அனைத்து கிடைக்கக்கூடிய HTML குறிச்சொற்களின் முழுமையான பட்டியலுக்கு, எங்கள் HTML Tag Reference ஐப் பார்வையிடவும்.