சிஎஸ்எஸ் அறிமுகம்

What is CSS?

• CSS stands for Cascading Style Sheets

It is a styling language used to control the layout and appearance of web pages written in HTML or XML

• CSS is used to separate presentation from content, making it easier to maintain and update websites

CSS Syntax

• CSS rules consist of a selector and a declaration block, which are separated by curly braces {}. The selector identifies the HTML element(s) to which the styles will be applied, while the declaration block contains one or more declarations, each consisting of a property and a value, separated by a colon :.
• Selector: specifies the HTML element(s) to apply the styles to
• Declaration block: contains one or more declarations, separated by semicolons
• Declaration: consists of a property and a value, separated by a colon

CSS Selectors

• Types of selectors:
  • Element selectors (e.g. h1, p)
  • Class selectors (e.g. .header, .footer)
  • ID selectors (e.g. #header, #footer)
  • Combinators (e.g. h1 > span, div + p)
  • Attribute selectors (e.g. [hreflang="en"], [title="tooltip"])

CSS Properties

• Categories of properties:
  • Layout and box model properties (e.g. width, height, margin, padding)
  • Visual styles properties (e.g. color, background-color, font-size, text-align)
  • Text properties (e.g. font-family, font-weight, line-height)
  • Interactive properties (e.g. cursor, outline, transition)

CSS Units

• Types of units:
  • Absolute units (e.g. px, cm, mm)
  • Relative units (e.g. %, em, rem)
  • Font-relative units (e.g. ex, ch)

CSS Preprocessors

• Preprocessors allow you to write CSS using a more programming-like language
• Examples of preprocessors:
  • Sass (Syntactically Awesome StyleSheets)
  • Less (Leaner Style Sheets)

CSS Frameworks

• Frameworks provide pre-written CSS and HTML to speed up development
• Examples of frameworks:
  • Bootstrap
  • Foundation
  • Tailwind CSS

CSS Media Queries

• Media queries allow you to apply different styles based on device characteristics
• Examples of media query types:
  • Screen size (e.g. @media screen and (max-width: 768px))
  • Device type (e.g. @media print)
  • Orientation (e.g. @media screen and (orientation: landscape))

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

• CSS என்பது Cascading Style Sheets என்பதை குறிக்கிறது
• HTML அல்லது XML ஆகியவற்றில் எழுதப்பட்ட வெப்பேஜ்களின் வடிவமைப்பும் தோற்றமும் கட்டுப்பாட்டில் பயன்படுத்தப்படும் ஒரு வடிவமைப்பு மொழி

CSS இயல்பு

• CSS விதிகள் ஒரு selector மற்றும் declaration block ஆகியவற்றைக் கொண்டுள்ளன
• selector: HTML உறுப்புகளில் பயன்படுத்த வேண்டிய விதிகளை குறிக்கிறது
• Declaration block: ஒன்று அல்லது அதற்கு மேற்பட்ட declarations வரை கொண்டுள்ளது, அவை தனித்து விக்கப்பட்டுள்ளன

CSS செலக்டர்கள்

• இருவகை செலக்டர்கள்:
  • உறுப்பு செலக்டர்கள் (e.g. h1, p)
  • வகுப்பு செலக்டர்கள் (e.g. .header, .footer)
  • ID செலக்டர்கள் (e.g. #header, #footer)
  • கூட்டு செலக்டர்கள் (e.g. h1 > span, div + p)
  • பண்பு செலக்டர்கள் (e.g. [hreflang="en"], [title="tooltip"])

CSS பண்புகள்

• பண்புகள் வகைகள்:
  • வடிவமைப்பு மற்றும் பெட்டி மேலோடை பண்புகள் (e.g. width, height, margin, padding)
  • காட்சி பண்புகள் (e.g. color, background-color, font-size, text-align)
  • எழுத்து பண்புகள் (e.g. font-family, font-weight, line-height)
  • இடைவினை பண்புகள் (e.g. cursor, outline, transition)

CSS அலகுகள்

• அலகு வகைகள்:
  • முழு அலகுகள் (e.g. px, cm, mm)
  • சார்பு அலகுகள் (e.g. %, em, rem)
  • எழுத்து அளவு அலகுகள் (e.g. ex, ch)

CSS ப்ரீ புராசெஸர்கள்

• ப்ரீ புராசெஸர்கள் உங்கள் CSS ஐ ஒரு நிரலாக்க மொழிபோல் எழுத அனுமதிக்கின்றன
• ப்ரீ புராசெஸர்கள் எடுத்துக்காட்டுகள்:
  • Sass (Syntactically Awesome StyleSheets)
  • Less (Leaner Style Sheets)

CSS ஃப்ரேம்வொர்க்குகள்

• ஃப்ரேம்வொர்க்குகள் விரைவான வளர்ச்சிக்காக முன்னேறிய CSS ஐ மற்றும் HTML ஐ வழங்குகின்றன
• ஃப்ரேம்வொர்க்குகள் எடுத்துக்காட்டுகள்:
  • Bootstrap
  • Foundation
  • Tailwind CSS

CSS மீடியா க்வேரீஸ்

• மீடியா க்வேரீஸ் உங்கள் சாதனைகளின் அடிப்படையில் வெவ்வேறு ஸ்டைல்களை பயன்படுத்த அனுமதிக்கின்றன
• மீடியா க்வேரீஸ் வகைகள்:
  • திரை அளவு (e.g. @media screen and (max-width: 768px))
  • சாதனை வகை (e.g. @media print)
  • நிலையின் அடிப்படையில் (e.g. @media screen and (orientation: landscape))