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.
Programming assignments can often feel overwhelming, especially when dealing with complex logic and tight deadlines. This is why many students explore options like programming assignment help to better understand difficult concepts and stay on track. While guidance can be useful, it’s important to actively engage in coding practice and problem-solving. Building your own skills not only improves academic performance but also prepares you for real-world challenges. Consistent effort, curiosity, and using resources wisely can make a significant difference in mastering programming.
ReplyDelete