Short Notes on CSS

-

What is CSS?

  • CSS is used to style HTML elements.
  • It stands for Cascading Style Sheets.

Ways to Apply CSS

  1. Inline CSS: Directly inside an element (style="color: red;").
  2. Internal CSS: Inside <style> tags in <head>.
  3. External CSS: In a separate .css file and linked via <link>.

CSS Syntax:


selector {
  property: value;
}

e.g;

h1 {
  color: blue;
  font-size: 20px;
}

CSS Selectors

Types of Selectors:

  • Universal (*) → * { margin: 0; }
  • Element (h1, p) → p { color: green; }
  • Class (.class-name) → .box { border: 1px solid black; }
  • ID (#id-name) → #header { background: gray; }
  • Group (h1, p) → h1, p { color: red; }
  • Descendant (div p) → div p { font-size: 14px; }
  • Child (div > p) → div > p { color: blue; }
  • Adjacent (h1 + p) → h1 + p { margin-top: 10px; }

CSS Box Model

Understanding Box Model Components:

  • Content → Actual text/image inside the element.
  • Padding → Space around content.
  • Border → Line around padding.
  • Margin → Space outside the border.

Example:


CSS Positioning

Position Properties:

  • static (default)
  • relative (relative to itself)
  • absolute (relative to nearest positioned ancestor)
  • fixed (relative to viewport)
  • sticky (sticks to position on scroll)

Example:


CSS Flexbox (Responsive Layouts)

Key Properties:

  • display: flex; → Enables Flexbox
  • justify-content → Aligns items horizontally
    • flex-start | flex-end | center | space-between | space-around
  • align-items → Aligns items vertically
    • flex-start | flex-end | center | stretch
  • flex-direction → Controls layout direction
    • row | row-reverse | column | column-reverse

Example:



CSS Grid (Advanced Layouts)

Key Properties:

  • display: grid; → Enables Grid
  • grid-template-columns → Defines columns
  • grid-template-rows → Defines rows
  • gap → Space between grid items
  • grid-area → Name grid sections

Example:


CSS Transitions & Animations

Transitions:


 Animations:


Media Queries (Responsive Design)

Make websites mobile-friendly:


Advanced Concepts

CSS Variables:


 Pseudo-classes & Pseudo-elements:


Z-index (Stacking Order):


CSS Frameworks & Preprocessors
Popular Frameworks:
  • Bootstrap
    • 

  • Tailwind CSS
Preprocessors:
  • SASS/SCSS:


Check out the Alison Certificate Courses for deeper understanding with certificates.

Comments

Post a Comment

Popular posts from this blog

Short Notes On HTML

-
Image
Introduction HTML stands for Hyper Text Markup Language, it is an scripting language, NOT a programming language, a programming language includes loops, conditional statements and object oriented programming in order for making the program respond based on the conditions, or in other words, giving the capability to computer to think, while scripting languages are used by Browsers to render the UI(User Interface), looks of a page. Softwares needed to run HTML Code Editor: Notepad, Notepad++, Visual Studio Code Browser: Google Chrome, Mozilla Firefox, Microsoft Edge etc. How HTML runs on Browser?, What really happens? When an HTML file is opened in a web browser, the browser acts as an interpreter , reading and processing the HTML code to display the web page. If the file is stored locally, the browser accesses it directly; if it's hosted on a web server, the browser sends an HTTP request to fetch the HTML document. Once received, the browser parses the HTML line by line, construct...
Read more