CSS-FULL-OVERVIEWS

Objectives: CSS-FULL-OVERVIEWS

CSS Full Notes

FULL CSS NOTES WITH EXAMPLES

1. What is CSS?

CSS (Cascading Style Sheets) is used to style HTML elements. It controls layout, colors, fonts, spacing, positioning, and responsiveness of web pages.

2. Types of CSS

  • Inline CSS: Written inside the HTML element using style attribute.
  • Internal CSS: Written inside a <style> tag in the <head> section.
  • External CSS: Written in a separate .css file and linked using <link>.
<p style="color: red;">This is inline CSS</p>

3. CSS Syntax

selector {
  property: value;
  property2: value2;
}

4. CSS Selectors

  • element - e.g., p
  • #id - select by id
  • .class - select by class
  • * - universal selector
  • div p - descendant selector
  • div > p - child selector

5. Colors in CSS

color: red;
color: #ff0000;
color: rgb(255, 0, 0);

6. CSS Box Model

The box model includes: Content, Padding, Border, and Margin.

div {
  margin: 10px;
  padding: 20px;
  border: 1px solid black;
}

7. CSS Positioning

  • static (default)
  • relative
  • absolute
  • fixed
  • sticky

8. Flexbox

display: flex;
justify-content: center;
align-items: center;

Used to layout items in rows or columns responsively.

9. CSS Grid

display: grid;
grid-template-columns: repeat(3, 1fr);

Powerful system for 2D layout.

10. Responsive Design (Media Queries)

@media (max-width: 768px) {
  body {
    background: lightblue;
  }
}

11. Pseudo-classes & Elements

a:hover {
  color: green;
}
p::first-line {
  font-weight: bold;
}

12. CSS Animation

@keyframes slide {
  from { left: 0; }
  to { left: 100px; }
}
div {
  position: relative;
  animation: slide 2s infinite;
}

13. Practical Task

Create a styled personal card:

  • Name and photo
  • Background color, border, padding
  • Hover effect to change card color
  • Use Flexbox to center the card

14. Tips for CSS Mastery

  • Practice with live editors (e.g., CodePen, JSFiddle)
  • Read CSS docs: MDN Web Docs
  • Use browser dev tools to test styles

Prepared for Mastering CSS Practical and Theory Exams.

Reference Book: N/A

Author name: SIR H.A.Mwala Work email: biasharaboraofficials@gmail.com
#MWALA_LEARN Powered by MwalaJS #https://mwalajs.biasharabora.com
#https://educenter.biasharabora.com

:: 1.2::

➡