• Hajipur, Bihar, 844101

☰
❮
❯

CSS

CSS Basics

CSS Styling Properties

CSS Advanced Selectors & Features

CSS Media and Image Styling

CSS Layout Techniques

CSS Flexbox

CSS Grid

CSS Responsive Design (RWD)

CSS How To

← Previous Next →

🔹 How To Add CSS

There are three ways to insert CSS into an HTML document:

1. Inline CSS

CSS is added directly to an HTML element using the style attribute.

<p style="color: red;">This is a paragraph.</p>

✅ Used for quick, one-off styling.

2. Internal CSS

CSS is written inside a <style> tag within the <head> section of the HTML document.

<!DOCTYPE html>
<html>
<head>
  <style>
    p {
      color: blue;
    }
  </style>
</head>
<body>
  <p>This is styled using internal CSS.</p>
</body>
</html>

✅ Used when styling a single HTML page.

3. External CSS

CSS is written in a separate .css file and linked to the HTML using the <link> tag.

style.css

p {
  color: green;
}

index.html

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

✅ Best practice for styling multiple web pages.

🔸 CSS File Extension

CSS files must end with the .css extension.

Practice Questions

Q1. Use inline CSS to make a paragraph's text green.

Q2. Use internal CSS to change all <h1> text to blue.

Q3. Use external CSS to change the background color of the page to lightgray.

Q4. Write HTML code to link an external CSS file named main.css.

Q5. Use internal CSS to change all <div> elements to have 20px padding.

Q6. Write inline CSS to set the font size of a paragraph to 18px.

Q7. Use internal CSS to center-align all <h2> headings.

Q8. Use external CSS to make all links have no underline.

Q9. Use internal CSS to set a black border around all images.

Q10. Write the HTML and CSS to apply Arial font to all <body> text using external CSS.

CSS How To Quiz

Q1: Which tag is used for internal CSS?

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

Q2: What is the correct HTML tag to link an external CSS file?

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

Q3: Where is inline CSS written?

A. Inside the <head> tag
B. In an external file
C. Inside the style attribute
D. Inside a <css> block

Q4: What is the file extension for CSS files?

A. .html
B. .css
C. .js
D. .style

Q5: Which CSS method is best for large websites with many pages?

A. Inline CSS
B. Internal CSS
C. External CSS
D. Embedded CSS

Q6: Which of the following is an example of inline CSS?

A. <style>p { color: red; }</style>
B. <p style="color: red;">Text</p>
C. p { color: red; }
D. <link href="style.css">

Q7: Where is the <link> tag placed in HTML?

A. Inside the <body> tag
B. At the end of the document
C. Inside the <head> section
D. Inside <footer>

Q8: What does external CSS allow?

A. Styling only one element
B. Styling only a single HTML file
C. Reusing styles across multiple HTML files
D. Adding JavaScript

Q9: Which method overrides all others if used on the same element?

A. Internal CSS
B. External CSS
C. Inline CSS
D. Universal CSS

Q10: Which method is not valid in CSS usage?

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