Date: 27-05-2026
===================================================================
Topic 1: CSS Selectors
A CSS selector is the first part of a CSS Rule. It is a pattern of elements and other terms that tell the browser which HTML elements should have the CSS property values inside the rule applied to them. The element or elements selected by the selector are referred to as the subject of the selector.
Basic CSS Selectors
A CSS selector targets the specific HTML elements we want to style. Here are the core basic selectors:
Type selectors (Element Selector): Targets elements directly by their HTML tag name.
Class selectors: Target elements using a dot (.) followed by the class name.
ID selectors: Targets a single unique element using a hash (#) followed by the ID name.
Universal Selector (*): Matches and applies styles to every single element on the page.
Code Example:
/* Universal Selector */
{
margin: 0;
padding: 0;
}
/* Type / Element Selector */
p {
font-size: 16px;
}
/* Class Selector */
.card-box {
padding: 20px;
}
/* ID Selector */
#unique-profile {
border-radius: 50%;
}
Combinator Selectors
Combinators show the relationship between different selectors to precisely target nested elements.
Descendant Selectors (space): Matches all specified elements nested inside a parent element.
Child Selector (>): Matches only the immediate, direct children of a parent element.
Adjacent Sibling Selector (+): Matches an element that directly follows another element.
General Sibling Selector (~): Matches all sibling elements that follow another element.
Code Example:
/* Descendant Selector */
div p {
color: blue;
}
/* Child Selector */
ul > li {
list-style: none;
}
/* Adjacent Siblincolourector */
h1 + p {
margin-top: 5px;
}
/* General Sibling Selector */
h2 ~ p {
color: gray;
}
Attribute Selectors
Attribute selectors target elements based on the source patterns inside their HTML attributes.
Presence Selector: Targets an element if it has a specific attribute, regardless of its value.
Attribute Value Selector: Targets an element with an exact attribute match.
Substring Matching (^=): Matches if the attribute value starts with the specified text.
Wildcard Selector (*=): Matches if the attribute value contains the specified text anywhere inside it.
Ends With Selector ($=): Matches if the attribute value ends with the specified text.
Word Match Selector (~=): Matches if the attribute value contains a specific word in a space-separated list.
Hyphen Match Selector (|=): Matches if the attribute value is exactly the specified text or starts with it, followed by a hyphen.
Code Example:
/* Presence Selector */
input[disabled] {
background-color: #eee;
}
/* Attribute Value Selector */
input[type="text"] {
border: 1px solid black;
}
/* Substring Matching (Starts with) */
a[href^="https"] {
colour: green;
}
/* Wildcard Selector (Contains) /
div[class="btn"] {
cursor: pointer;
}
/* Ends With Selector */
a[href$=".png"] {
border: 1px solid red;
}
Pseudo-Classes
Pseudo-classes define a special state of an element, such as user interaction or structural placement.
:hover: Styles the element when the user moves their mouse pointer over it.
:focus: Styles the elements when the user focuses on any particular element (like clicking an input field).
:first-child: Styles the element which is the first child of its parent.
:last-child: Styles the element which is the last child of its parent.
Code Example:
/* Hover state */
button: hover {
background-colour: darkblue;
}
/* Focus state */
input: focus {
border-colour: blue;
}
/* First Child placement */
li:first-child {
font-weight: bold;
}
/* Last Child placement */
li:last-child {
border-bottom: none;
}
Pseudo-Elements
Pseudo-elements are used to style specific parts of an element or insert virtual content.
::before: Inserts some content before an element.
::after: Inserts some content after an element.
::first-line: Styles the first line of text within a block element. Line breaks mark the beginning of a new line.
::first-letter: Styles the first letter of a word or a sentence.
::placeholder: Styles the placeholder text of a specific input field.
Code Example:
/* Inject content before an item */
h2::before {
content: "📌 ";
}
/* Inject content after an item */
span::after {
content: " (read more)";
}
/* Style the first letter */
p::first-letter {
font-size: 24px;
colour: red;
}
/* Style the placeholder text */
input::placeholder {
colour: lightgray;
font-style: italic;
}
===================================================================
Topic 2: CSS Outline
CSS outline is a property used to draw a line around an element's border. It does not affect the layout, unlike borders. It's often used to highlight elements, providing a visual emphasis without altering the dimensions of the element.
Layout Isolation: Outlines are drawn outside the element's border boundaries and do not add to the element's calculated width or height.
Visual Focus: Commonly applied by browsers to form fields and buttons during keyboard navigation to indicate focus state.
Code Example:
/* Highlight a box with an outline without moving nearby text /
.focused-box {
outline: 3px dashed red;
outline-offset: 4px; / Space between border and outline */
}
===================================================================
Topic 3: CSS Media Queries
CSS media queries allow you to apply styles based on the characteristics of a device or the environment displaying the web page. They are essential for creating responsive web pages. The CSS @media rule is used to add media queries to your style sheet.
Media Query Syntax:
A media query consists of an optional media-type and one or more media-features, which resolve to either true or false.
@media [not] media-type and (media-feature: value) and (media-feature: value) {
/* CSS rules to apply */
}
The media-type is optional. However, if you do not, you must also specify mediatype.
The result of a media query is true if the specified media-type matches the type of device, and all media-features are true.
Keyword Meanings:
not: This optional keyword inverts the meaning of the entire media query.
and: This keyword combines a media-type and one or more media-features.
Code Example:
/* Apply responsive background styling for mobile devices up to 768px wide */
@media screen and (max-width: 768px) {
body {
background-colour: lightblue;
}
}
===================================================================
Topic 4: Transitions
CSS transitions are used to create smooth animations between two states of an element, enhancing interactivity and user experience.
Transitions can animate properties like colour, size, opacity, and position.
Use selectors and pseudo-classes (e.g., hover: focus) to trigger transitions smoothly.
Key Transition Properties:
transition-property: Specifies the name of the CSS property you want to animate (e.g., background-colour, all).
transition-duration: Specifies how many seconds or milliseconds the transition takes to complete (e.g., 0.3s).
transition-timing-function: Specifies the speed curve of the transition (e.g., linear, ease-in-out).
transition-delay: Specifies a delay (in seconds) before the transition animation actually starts.
Code Example:
/* Smoothly animate a button colour change on hover /
.interactive-btn background-colour: blue;
colour: white;
padding: 12px 24px;
/ Shorthand configuration property | duration | timing */
transitionbackground-colouror 0.4s ease-in-out;
}
.interactive-btn: hoverbackground-colour: darkblue;
}
===================================================================
Topic 5: Em and REM
Both em and rem are relative units of measurement in CSS, but they calculate their values based on completely different structural reference points.
rem (Root EM): Calculates its size relative to the root element () font size of the browser. By default, most browsers set the root font size to 16px. Therefore, 1rem is equal to 16px everywhere on the page.
em: Calculates its size relative to the font size of its immediate parent element (or the element itself when used for properties like margins and padding).
Code Example:
/* Reference sizing example /
html {
font-size: 16px; / Base root element */
}
.parent-card {
font-size: 20px; /* Parent element container override */
}
/* rem values remain tied to root 16px /
.rem-text {
font-size: 2rem; / Calculates to 2 * 16px = 32px */
}
/* em values look at parent container 20px /
.em-text {
font-size: 2em; / Calculates to 2 * 20px = 40px */
}
===================================================================
Top comments (0)