Cascading Style Sheet
What is CSS?
• CSS = Cascading Style Sheets
• A language used to describe the presentation of a document written in HTML
• It controls the layout, colors, fonts, and overall visual style of web pages
• Separation of Concerns: CSS allows you to separate content (HTML) from
presentation (CSS)
Types of CSS
There are three types of The 3 types of CSS
CSS namely:
• [Link]
• [Link]
• [Link]
1. Inline CSS
• Styles are applied directly to an HTML element using the
style attribute
• Use Case: Quick, one off styles Not recommended for
large projects
Example:
• <p style="color: red; font size: 20px;">This is a red,
large paragraph</p>
2. Internal (Embedded) CSS
• Styles are defined within a <style> tag in the <head> section
of an HTML document
• Use Case: Single page styles
Example:
Html
<head>
<style>
body { background color: lightblue; }h1 { color: navy; }
</style>
</head>
3. External CSS
• Styles are written in a separate css file and linked to the HTML document
• Use Case: Best practice - Allows styling multiple pages from one file
HTML File:
html
<head>
<link rel="stylesheet" href="stylescss">
</head>
CSS File ( stylescss ):
p{
font family: Arial;
}
CSS Rule Structure
selector {
property: value;
property: value;
}
Selector: The HTML element you want to style (e.g., h1 , p , .class ).
Declaration Block: Everything inside the curly braces { } .
Property: The style attribute you want to change (e.g., color , font size ).
Value: The setting for the property (e.g., red , 16px ).
Example:
css
body {
background color: blue;
color: white;
}
CSS Selectors
CSS Core Selectors
• Selectors are one of the most fundamental and powerful parts of CSS.
They are the patterns used to select and style the HTML element(s) you
want to target.
1. Element Selector
Selects all instances of a specific HTML element.
css
p{
text align: center;
}
Other examples include h1-h6, list, image, div, Nav,etc.
CSS Core Selectors continued
2. Class Selector
Selects all elements with a specific `class` attribute. Prefixed with a dot (.).
Use Case: Styling multiple elements the same way.
html
<p class="important">This is important.</p>
<div class="important">This is also important.</div>
css
.important {
color: red;
font weight: bold;
}
CSS Core Selectors continued
3. ID Selector
Selects a single, unique element with a specific `id` attribute. Prefixed with a hash (``).
Use Case: Styling one specific element.
html
<div id="header">Welcome to my Site</div>
css
header {
background color: black;
padding: 20px;
}
4. Universal Selector
• [Link] Selector
• What it does: Selects ALL elements on the page. Use with caution!
Syntax:(*)
Example:
css
*{
margin: 0;
padding: 0;
}
This is often used in a "CSS reset" to remove default margins and padding from
every element.
Working with Color and Font
Color Properties
css
h1 {
color: ff5733; / Hexadecimal /
color: rgb(255, 87, 51); / RGB /
color: coral; / Named Color /
background color: azure;
}
Font Properties
css
p{
font family: 'Arial', sans serif; / Fallback font /
font size: 16px; / px, em, rem /
color: 333; / Dark gray /
font style: italic;
text decoration: underline;
}
•
The Box Model: Margin & Padding
• The CSS Box Model is a box that wraps around every HTML element. It
consists of content, padding, border, and margin. These layers are built up
around the content, one after the other.
• Every element is a rectangular box. The CSS Box Model describes its
structure:
1. Content: The actual text/image.
2. Padding: Space inside the border, around the content.
3. Border: A line that surrounds the padding and content.
4. Margin: Space outside the border, separating the element from
others.
CSS Box-Model Structure
The Box Model: Margin & Padding
Code Example:
css
.box {
width: 200px;
padding: 20px; / Space inside /
border: 5px solid black; / Solid black border /
margin: 30px; / Space outside /
background color: lightgrey;
}
Borders in CSS
• In the CSS Box Model, the border is the layer that sits between an
element's padding and its margin. It's a stylistic line that wraps
around the content and padding of an element.
Borders are incredibly versatile and are used for:
• Outlining elements (like buttons, cards, or images).
• Creating decorative lines and separators.
• Providing visual feedback (e.g., highlighting an invalid form input).
• Adding design flourishes without needing extra HTML elements.
Common Border Styles in CSS
Styling Borders
css
special div {
border width: 3px;
border style: dashed; / solid, dotted, dashed, double /
border color: green;
border radius: 10px; / Rounded corners! /
}
/ Shorthand is very common /
special div {
border: 3px dashed green;
border radius: 10px;
}
Styling Borders: Targeting specific sides
Different sides of the
Styling sides of the border border
special div {
border-top-style: solid;
border-bottom-width: 5px;
border-left-color: red;
}
The CSS background property
• The CSS background property is a powerful shorthand used to set all background
style properties for an element at once. It's not just for solid colors; it allows you to
add images, control their positioning and repetition, create gradients, and even set
multiple backgrounds on a single element.
• The background is painted within the element's padding and content area, extending
to the outer edge of the element's border (by default, it shows through transparent
parts of the border).
Background Properties
• css
.hero banner {
background color: f0f0f0; / Fallback color /
background image: url('hero [Link]');
background repeat: no repeat; / Prevent tiling /
background position: center; / Center the image /
background size: cover; / Resize to cover container /
height: 400px;
}
/ Shorthand /
.hero banner {
background: f0f0f0 url('hero [Link]') no repeat center / cover;
}
The float Property
• Positions an element to the left or right of its container, allowing text and other inline elements to wrap
around it.
• Crucial for old layouts, but largely replaced by Flexbox and Grid for modern layout.
html
<img src="[Link]" alt="A cat">
<p>This text will wrap around the floated image...</p>
css
img {
float: left; / or 'right' /
margin right: 15px;
width: 150px;
}
The CSS Float Property
: Pseudo classes
A keyword added to a selector to define a special state of the selected element(s).
Link:
css
a:link { color: blue; } / Unvisited link /
a:visited { color: purple; } / Visited link /
a:hover { color: red; } / Mouse over link /
a:active { color: yellow; } / Selected link (as it's being clicked) /
CSS Pseudo Classes
: Pseudo classes
Other Common Examples:
css
button:hover {
background color: darkblue; / Change color on hover /
cursor: pointer;
}
tr:nth child(even) {
background color: f2f2f2; / Zebra striping for tables /
}
Adding Depth with Shadows
Text Shadow
css
h1 {
/ offset x | offset y | blur radius | color /
text shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}
Box Shadow
css
.card {
/ offset x | offset y | blur radius | spread radius | color /
box shadow: 5px 5px 15px 5px rgba(0, 0, 0, 0.3);
/ Inset shadow /
box shadow: inset 0px 0px 10px black;
Text Shadow
Box Shadow
CSS Animations
CSS animations allow you to change the style properties of an element over time,
creating smooth, gradual transitions without needing JavaScript.
To create an animation in CSS, you need to define two main things:
1. @keyframes Rule:
The blueprint of the animation.
It defines what the animation does at various stages.
2. Animation Properties:
Applied to the element you want to animate.
They define how the animation behaves (duration, timing, etc.).
The @keyframes Rule
• This is where you create the animation sequence.
Syntax:
css:
@keyframes animation-name {
from { / Starting state / }
to { / Ending state / }
}
Or using percentages for more control:
css:
@keyframes bounce {
0% { top: 0px; }
50% { top: -30px; }
100% { top: 0px; }
The Animation Properties
Property Description Example Values
Animation-name Name of the @keyframes rule Bounce, slideIn
Animation-duration How long the animation lasts 2s, 500ms
animation-timing-function Pace of the animation ease, linear, ease-in-out
animation-delay Time before animation starts 1s, 0ms
animation-iteration-count How many times it plays 1, infinite, 3
animation-direction Direction of play normal, reverse, alternate
animation-fill-mode Styles before/after animation forwards, backwards, both
The Animation Shorthand
The Animation shorthand is a quicker way to write all the properties at once.
Syntax:
css
animation: [name] [duration] [timing-function] [delay]
[iteration-count] [direction] [fill-mode];
Example:
css
.box {
animation: bounce 2s ease-in-out 0.5s infinite alternate;
}
Note: The first time value is always duration, the second is always delay.
Animation: Class Exercise
Goal: Make a circle that
pulses Applying the Animation
Step 1: Define the Keyframes Step 2: Apply the Animation
css
css:
.circle {
@keyframes pulse {
width: 100px;
0% { transform: scale(1); } height: 100px;
50% { transform: scale(1.2); } background-color: coral;
100% { transform: scale(1); } border-radius: 50%;
} animation: pulse 3s ease-in-out infinite;
}