Topic
Cascading Style Sheets
Chapter: CSS
Overview
CSS is a stylesheet language used to describe the presentation and layout of a web document. It separates the content (HTML) from the design (CSS), allowing you to change the look of an entire website by editing just one file. In the M2-R5 syllabus, it is a core module that covers how to make pages responsive and visually appealing.
1. Types of CSS
There are three ways to apply CSS to your HTML:
- Inline CSS: Applied directly inside an HTML tag using the
styleattribute. - Example:
<p style="color: blue;">Hello</p>(Best for quick, one-off changes). - Internal (Embedded) CSS: Defined in the
<style>tag within the<head>section of a single HTML page. - External CSS: Styles are written in a separate
.cssfile and linked to the HTML using the<link>tag. This is the most professional method and what you'll use for your Laravel projects to keep code clean.
2. CSS Selectors
Selectors "point" to the HTML elements you want to style:
- Universal Selector (
*): Targets every single element on the page. - Element Selector: Targets tags (e.g.,
h1,p). - Class Selector (
.className): Targets elements with a specific class. Used frequently for grouping (e.g.,.btn-primary). - ID Selector (
#idName): Targets a unique element. High priority but used sparingly. - Pseudo-classes: Used for states, like
:hoverfor when a mouse is over a button.
3. Key CSS Properties
To achieve that "Myntra look" for your e-commerce project, you'll need to master these:
- Box Model: Every element is a box. It consists of Margin (outer space), Border, Padding (inner space), and Content.
- Flexbox & Grid: Modern layout tools used to align items easily (essential for responsive product grids).
- Color & Typography:
color,background-color,font-family, andfont-size. - Positioning:
static,relative,absolute, andfixedfor placing elements exactly where you want them.
4. CSS Frameworks (W3.CSS)
Since you are studying the W3.CSS framework for your exam and using it on mcqvidya.com, remember that it provides pre-written classes (like w3-container, w3-card, w3-red) to speed up your development. It is lightweight and works without JavaScript.
Quick Info
Course
M2R5 – Web Designing and Publishing
Chapter
CSS
Quick Actions
Study Tip
Make notes while reading this topic. Practice related MCQs to reinforce your understanding.