Notifications
Clear all
HTML, CSS & PHP
1
Posts
1
Users
0
Reactions
6
Views
Topic starter
02/04/2025 2:59 pm
1. What is CSS?
CSS (Cascading Style Sheets) is used to style HTML elements. It allows you to change colors, layouts, fonts, spacing, and more.
2. Adding CSS to Your Website
There are three ways to apply CSS to a webpage:
a) Inline CSS (applied directly to an element)
<p style="color: red; font-size: 20px;">This is a red text.</p>
b) Internal CSS (added inside <style> in the HTML <head>)
<style>
p {
color: blue;
font-size: 18px;
}
</style>
c) External CSS (linked via a separate .css file)
Create a file styles.css and link it in the HTML file:
<link rel="stylesheet" href="styles.css">
Then, in styles.css:
p {
color: green;
font-size: 18px;
}
3. Basic CSS Selectors
a) Selecting by Tag Name
p {
color: blue;
}
b) Selecting by Class
.my-class {
font-weight: bold;
background-color: yellow;
}
Usage in HTML:
<p class="my-class">This text is bold and has a yellow background.</p>
c) Selecting by ID
#my-id {
text-align: center;
font-size: 24px;
}
Usage in HTML:
<p id="my-id">This is centered text.</p>
4. Common CSS Properties
| Property | Description | Example |
|---|---|---|
color |
Text color | color: red; |
font-size |
Font size | font-size: 16px; |
font-family |
Text font | font-family: Arial, sans-serif; |
background-color |
Background color | background-color: lightgray; |
margin |
Space outside element | margin: 10px; |
padding |
Space inside element | padding: 10px; |
border |
Border around an element | border: 1px solid black; |
width & height |
Size of an element | width: 100px; height: 50px; |
5. Positioning & Layout
a) Display Property
-
block: Takes full width (e.g.,<div>,<p>) -
inline: Takes only necessary space (e.g.,<span>) -
inline-block: Likeinline, but allows width & height
span {
display: block;
}
b) Position Property
-
static(default) -
relative(moves relative to its original position) -
absolute(positions relative to the nearest positioned ancestor) -
fixed(stays fixed when scrolling)
.fixed-box {
position: fixed;
top: 10px;
right: 10px;
}
6. Responsive Design
To make your website mobile-friendly, use media queries:
@media (max-width: 600px) {
body {
background-color: lightblue;
}
}
This changes the background color when the screen width is less than 600px.
Next Steps
Now that you know the basics, try practicing HTML on https://www.w3schools.com/
If you need further support, feel free to ask here.
This topic was modified 1 week ago by Muslims Forum
