• Hajipur, Bihar, 844101

☰
❮
❯

HTML

HTML5 Basics

HTML Styling and Design

HTML Links and Media

HTML Layout and Structure

HTML Forms

HTML Graphics

HTML APIs

HTML Advanced Topics

HTML CSS

← Previous Next →

🔹 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.

HTML CSS Quiz

Q1: What does CSS stand for?

A. Creative Style Sheets
B. Cascading Style Sheets
C. Computer Style Sheets
D. Colorful Style Sheets

Q2: Which tag is used to define internal CSS?

A. <style>
B. <css>
C. <script>
D. <link>

Q3: How do you apply external CSS to an HTML page?

A. <css src="style.css">
B. <style href="style.css">
C. <link rel="stylesheet" href="style.css">
D. <script src="style.css">

Q4: Which CSS property changes text color?

A. font-color
B. text-color
C. color
D. foreground-color

Q5: Where should you place the <style> tag for internal CSS?

A. Inside the <body>
B. Inside the <head>
C. Before the <html>
D. At the bottom of the page

Q6: Which symbol is used to apply a style to a class in CSS?

A. .
B. #
C. *
D. $

Q7: How do you apply CSS to all <p> elements?

A. p { ... }
B. #p { ... }
C. .p { ... }
D. <p> { ... }

Q8: Which CSS property controls inside spacing of an element?

A. margin
B. spacing
C. border
D. padding

Q9: Which CSS property is used to set space around elements (outside border)?

A. margin
B. padding
C. spacing
D. gap

Q10: Which is the most preferred method for styling large websites?

A. Inline CSS
B. Internal CSS
C. External CSS
D. Browser Default CSS
← Previous Next →
Login
Go Back Top