CSS How To


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


Go Back Top