2.0 KiB
CSS Notes
Introduction to CSS
CSS (Cascading Style Sheets) is used to style and visually format HTML elements. It controls layout, colors, fonts, spacing, and overall presentation of web pages. CSS helps maintain separation between content (HTML) and design (CSS).
Ways to Apply CSS
1. Inline CSS
CSS written directly inside an HTML tag.
Hello World
Not recommended for large projects.2. Internal CSS
CSS written inside a <style> tag in the <head>.
<style> p { color: red; } </style>3. External CSS (Preferred)
CSS written in a separate .css file.
Reusable, clean and professionalCSS Selectors
Element Selector
p { color: green; }
Class Selector
.box { background-color: yellow; }
ID Selector
#main { width: 100%; }
Group Selector
h1, h2, h3 { font-family: Arial; }
Colors in CSS
Color Formats
Named colors: red, blue Hex: #ff5733 RGB: rgb(255, 87, 51) RGBA: rgba(0, 0, 0, 0.5)
Text & Font Styling
Common Properties p { font-size: 16px; font-family: Arial, sans-serif; font-weight: bold; text-align: center; }
Text Decoration
a { text-decoration: none; }
CSS Box Model (Very Important)
Every HTML element consists of: Content Padding Border Margin div { padding: 10px; border: 2px solid black; margin: 15px; } Understanding the box model is crucial for layout control.
Width, Height & Units
Units Used px – fixed size % – relative em – relative to parent rem – relative to root element .container { width: 80%; height: 200px; }
Display Property
Common Values block inline inline-block none span { display: inline-block; width: 100px; }
Position Property (Basics)
Types static (default) relative absolute fixed .box { position: relative; top: 10px; left: 20px; }
Background Styling
body { background-color: #f5f5f5; }
Background image:
div { background-image: url("image.jpg"); background-size: cover; }