-
Hajipur, Bihar, 844101
Hajipur, Bihar, 844101
HTML5 Basics
HTML Introduction
HTML Editors
HTML Basic
HTML Elements
HTML Attributes
HTML Headings
HTML Paragraphs
HTML Styles
HTML Formatting
HTML Quotations
HTML Comments
HTML Styling and Design
HTML Links and Media
HTML Layout and Structure
HTML Tables
HTML Lists
HTML Block & Inline
HTML Div
HTML Classes
HTML Id
HTML Head
HTML Layout
HTML Responsive
HTML Computercode
HTML Semantics
HTML Forms
HTML Forms
HTML Form Attributes
HTML Form Elements
HTML Input Types
HTML Input Attributes
Input Form Attributes
HTML Graphics
HTML APIs
HTML Advanced Topics
CSS (Cascading Style Sheets) is used to style and layout HTML elements — including colors, fonts, spacing, positioning, borders, and responsiveness.
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>
Applied directly to HTML elements using the style
attribute.
<p style="color: green; font-size: 16px;">This is inline CSS.</p>
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>
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.
selector {
property: value;
}
Example:
h1 {
color: darkblue;
text-align: center;
}
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; |
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.
HTML5 Basics
HTML Introduction
HTML Editors
HTML Basic
HTML Elements
HTML Attributes
HTML Headings
HTML Paragraphs
HTML Styles
HTML Formatting
HTML Quotations
HTML Comments
HTML Styling and Design
HTML Links and Media
HTML Layout and Structure
HTML Tables
HTML Lists
HTML Block & Inline
HTML Div
HTML Classes
HTML Id
HTML Head
HTML Layout
HTML Responsive
HTML Computercode
HTML Semantics
HTML Forms
HTML Forms
HTML Form Attributes
HTML Form Elements
HTML Input Types
HTML Input Attributes
Input Form Attributes
HTML Graphics
HTML APIs
HTML Advanced Topics