Introduction to CSS
Introduction to CSS (Cascading Style Sheets)
What is CSS?
CSS is the language we use to style an HTML document. While HTML provides the structure of a web page, CSS describes how HTML elements should be displayed on screen, paper, or in other media.
CSS Syntax
A CSS rule consists of a selector and a declaration block.
selector { property: value; }
- Selector: The HTML element you want to style (e.g., h1, p).
- Property: The style attribute you want to change (e.g., color, font-size).
- Value: The setting applied to the property (e.g., red, 20px).
Three Methods of Applying CSS
A. Inline CSS
Applied directly to a single element using the style attribute. It is written inside the HTML tag and not in the head.
<!-- Example: Styling a specific paragraph and a button -->
<p style="color: blue; font-size: 18px;">This is an inline styled paragraph.</p>
<button style="background-color: green; color: white; padding: 10px;">Click Me</button>B. Internal CSS
Defined within the <style> tag in the <head> section of an HTML page.
<head>
<style>
body { background-color: lightyellow; }
h2 { color: navy; text-decoration: underline; }
.note-text { font-style: italic; color: gray; }
</style>
</head>C. External CSS
Styles are placed in a separate .css file and linked using the <link> tag. This is the most efficient method for large sites.
<!-- In your HTML head -->
<link rel="stylesheet" href="mystyle.css">
/* Inside mystyle.css */
p { line-height: 1.5; color: #333; }
footer { text-align: center; padding: 20px; }The CSS Box Model
| Component | Description |
|---|---|
| Content | The text or images of the element. |
| Padding | Transparent area inside the border. |
| Border | A line that goes around the padding and content. |
| Margin | Transparent area outside the border. |
Test Your Knowledge
Select the correct answer for each question and click 'Submit' to see your score.
Comments
Post a Comment