HTML Styles – CSS

HTML Styles क्या होते हैं?

HTML Styles का मतलब है HTML elements की appearance को control करना, जैसे text color, background, font size, alignment आदि।
HTML में styling का काम CSS (Cascading Style Sheets) के द्वारा किया जाता है।

CSS HTML content को visually attractive, readable और structured बनाता है।

CSS क्या है?

CSS एक stylesheet language है जिसका उपयोग HTML elements को style करने के लिए किया जाता है।
CSS यह decide करता है कि web page browser में कैसा दिखेगा।

CSS के बिना HTML सिर्फ plain text structure होता है।

HTML में CSS कैसे Apply किया जाता है?

HTML में CSS apply करने के तीन तरीके होते हैं:

  • Inline CSS
  • Internal CSS
  • External CSS

Inline CSS

Inline CSS directly HTML element के अंदर style attribute में लिखा जाता है।

Example:

<p style="color:red; font-size:18px;">Red Text</p>

Inline CSS small changes के लिए useful होता है, लेकिन large websites के लिए recommended नहीं है।

Internal CSS

Internal CSS <style> tag के अंदर लिखा जाता है और <head> section में रखा जाता है।

Example:

<head>
  <style>
    p {
      color: blue;
      font-size: 16px;
    }
  </style>
</head>

Internal CSS single page styling के लिए suitable होता है।

External CSS

External CSS एक अलग .css file में लिखा जाता है और HTML file से link किया जाता है।

Example:

<link rel="stylesheet" href="style.css">

style.css file:

p {
  color: green;
  font-size: 16px;
}

External CSS professional websites के लिए best practice है।

CSS Syntax

CSS rule तीन parts में होती है:

  • Selector
  • Property
  • Value

Syntax:

selector {
  property: value;
}

Example:

h1 {
  color: purple;
}

Common CSS Properties

कुछ commonly used CSS properties:

  • color – text color
  • background-color – background color
  • font-size – text size
  • font-family – font style
  • text-align – text alignment
  • margin – outer space
  • padding – inner space

HTML Styles और CSS Priority

जब multiple CSS rules apply होती हैं, तो priority इस order में होती है:

  1. Inline CSS
  2. Internal CSS
  3. External CSS

इसी behavior को CSS Cascade कहा जाता है।

HTML Styles और Reusability

CSS का main advantage है reusability।
एक बार style define करने के बाद उसे multiple elements और pages पर apply किया जा सकता है।

Example:

.button {
  background-color: blue;
  color: white;
}

HTML Styles और SEO

CSS direct SEO factor नहीं है, लेकिन:

  • Clean design user experience improve करता है
  • Better readability bounce rate reduce करती है
  • Mobile-friendly styling SEO को indirectly help करती है

Common Beginner Mistakes

  • Inline CSS का excessive use
  • CSS file को properly link न करना
  • Same styles बार-बार repeat करना
  • Readability को ignore करना

HTML Styles – CSS Best Practices

  • External CSS prefer करें
  • Meaningful class names use करें
  • Consistent design follow करें
  • Inline CSS minimum रखें
  • Responsive styling पर focus करें

Share your love

Related Posts