HTML CSS


🔹 What is CSS?

CSS (Cascading Style Sheets) is used to style and layout HTML elements — including colors, fonts, spacing, positioning, borders, and responsiveness.


🔹 Why Use CSS in HTML?

HTML is used to structure content, while CSS is used to design and style it.

Without CSS:

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

With CSS:

<h1 style="color: blue; font-family: Arial;">This is a styled heading</h1>
<p style="color: gray; font-size: 18px;">Styled paragraph.</p>

🔹 Three Ways to Apply CSS in HTML

1️⃣ Inline CSS
  • Applied directly to HTML elements using the style attribute.

<p style="color: green; font-size: 16px;">This is inline CSS.</p>

2️⃣ Internal CSS
  • Written inside the <style> tag in the <head> section of the HTML document.

<!DOCTYPE html>
<html>
<head>
  <style>
    p {
      color: blue;
      font-size: 18px;
    }
  </style>
</head>
<body>
  <p>This is styled with internal CSS.</p>
</body>
</html>

3️⃣ External CSS
  • Stored in a separate .css file and linked to the HTML document using the <link> tag.

HTML:

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

styles.css:

p {
  color: red;
  font-size: 20px;
}

✅ Best practice: Use external CSS for large websites to separate content and design.


🔹 CSS Syntax

selector {
  property: value;
}

Example:

h1 {
  color: darkblue;
  text-align: center;
}

🔹 Common CSS Properties

Property Description Example
color Text color color: red;
background-color Background color background-color: yellow;
font-size Size of text font-size: 16px;
font-family Font style font-family: Arial;
text-align Alignment of text text-align: center;
margin Space outside element margin: 10px;
padding Space inside element padding: 10px;
border Border around element border: 1px solid black;

Practice Questions

Q1. Write a paragraph using inline CSS with green text and 16px font.

Q2. Create an HTML page with internal CSS that centers all headings.

Q3. Create an external CSS file and link it to your HTML page.

Q4. Apply a red border to all <div> elements using CSS.

Q5. Use internal CSS to change the background color of the page to lightgray.

Q6. Create a heading with font-size 30px and font-family Arial using inline CSS.

Q7. Write a CSS rule that makes all <p> elements blue and bold.

Q8. Add margin and padding to a paragraph using inline CSS.

Q9. Create a CSS rule in an external file that styles all buttons with rounded borders.

Q10. Create a website with internal CSS that applies a different background to the header, content, and footer.


Go Back Top