Scribd
Upload
9 views25 pages

Understanding CSS: Syntax and Types

Wowee

Uploaded by

gohelmeet547
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
9 views25 pages

Understanding CSS: Syntax and Types

Wowee

Uploaded by

gohelmeet547
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd

Chapter 4

CSS stands for Cascading Style Sheet.

Structure or Syntax of CSS


✓ The syntax of CSS is slightly different from that of an HTML.
✓ CSS uses (curly braces { } ), (colons : ) and (semicolon ; ).
Syntax:
selector
{
property : value;
property : value;
| |
property : value;
}

Types of CSS
Type of CSS Description Where It Is Written Syntax (Example)
Used to style a single
Inside the HTML tag
HTML element directly. <h1 style="color:blue; font-
1. Inline CSS using the style
It has the highest size:25px;">Heading</h1>
attribute.
priority.
Inside the <style> tag
2. Internal Used to style elements
in the <head> section <head><style> p { color: red; font-size:
(Embedded) within the same HTML
of the HTML 18px; } </style></head>
CSS page.
document.
Used to apply styles to In an external
<head><link rel="stylesheet"
multiple web pages stylesheet linked using
3. External CSS href="[Link]"></head>([Link] file
using a separate .css the <link> tag in the
contains CSS rules)
file. <head> section.

1|Page
Various CSS Selectors
Selector Type Description Syntax Example

Element Selects all elements of a specific type/tag.


element p { color: black; }
Selector Lowest specificity (except universal).

Selects a single element with a specific id


ID Selector #id #header { color: red; }
attribute. Very high specificity.

Selects elements with a specific class. Medium


Class Selector .class .menu { font-size: 16px; }
specificity.

Attribute Selects elements based on an attribute or [attr], [type="text"] { border:


Selector attribute value. [attr=value] 1px solid #ccc; }

Universal
Selects all elements. Lowest specificity. * * { margin: 0; padding: 0; }
Selector

Descendant Selects elements that are descendants (any ancestor


div p { color: blue; }
Selector level) of a specified ancestor. descendant

Selects elements that are direct children of a


Child Selector parent > child ul > li { list-style: none; }
specified parent.

Grouping Groups multiple selectors and applies the selector1, h1, h2, h3 { font-family:
Selector same styles. selector2 Arial; }

2|Page
CSS Specificity (Priority Order)
Priority Level Selector Type Example

1 (Highest) Inline Styles <h1 style="color:pink;">Heading</h1>

2 IDs #title { color: red; }

3 Classes, pseudo-classes, attribute selectors .title { color: green; }, :hover, [type='text']

4 (Lowest) Elements and pseudo-elements h1 { color: blue; }, ::before

Text Properties
These properties are used to style, format, and control the appearance of text on a webpage, including
alignment, spacing, transformation, decoration, font type, and size.

Text Properties
Property Description Syntax Possible Values
Named colors (e.g., red), HEX (#ff0000),
color Sets the color of the text color: color;
RGB (rgb(255,0,0)), RGBA
Aligns text inside an
text-align text-align: value; left, right, center, justify, start, end
element
Adds indentation to the
text-indent text-indent: length; Any length (px, em, %)
first line
text- Controls text
text-transform: value; none, capitalize, uppercase, lowercase
transform capitalization
text- Adds decoration like none, underline, overline, line-through,
text-decoration: value;
decoration underline or line-through underline overline
letter- Controls space between Normal (normal), or custom spacing (px,
letter-spacing: length;
spacing letters em). Negative values are allowed.
word- Controls space between Normal (normal), or custom spacing (px,
word-spacing: length;
spacing words em). Negative values are allowed.
normal, number (e.g., 1.5), length (px,
line-height Sets space between lines line-height: value;
em), %. Negative values are not allowed.
none or values like 2px 2px 5px gray (can
text-shadow: h-shadow
text-shadow Adds shadow to text add multiple shadows separated by
v-shadow blur color;
commas)

3|Page
Font Properties
Property Description Syntax Example Possible Values
font-family: font-family: Any font name: "Arial", "Times New Roman",
font- Specifies the
"FontName", "Arial", sans- "Courier New", generic families: serif, sans-
family font type
fallback; serif; serif, monospace, cursive, fantasy
Length units: px, em, rem, %; Keywords: xx-
Sets the font font-size:
font-size font-size: size; small, x-small, small, medium, large, x-large,
size 20px;
xx-large, smaller, larger
Defines style of font-style:
font-style font-style: value; normal, italic
text italic;
font- Sets font font-weight: normal, bold, bolder, lighter, 100, 200, 300,
font-weight: value;
weight thickness bold; 400, 500, 600, 700, 800, 900
font- Displays text in font-variant:
font-variant: value; normal, small-caps
variant small-caps small-caps;

Google Fonts
How to Embed Google Fonts
• Method 1: Using <link> tag (Recommended)
• Method 2: Using @import in CSS

4|Page
CSS Borders
A border is a line that wraps around an HTML element’s content and padding. It visually separates elements
or highlights them on a web page.

Property Description Why to Use Possible Values / Syntax


Defines the style of the To give different visual effects none, solid, dashed, dotted,
border-style
border like solid, dashed, dotted, etc. double
Sets the thickness of the
border-width To adjust border size length (px, em, rem)
border
Sets the color of the To visually match design or Named colors (red), hex
border-color
border highlight elements (#FF0000), RGB (rgb(255,0,0))
border Combines style, width, To quickly define a complete
border: 2px solid red;
(shorthand) color in one line border
Sets border properties for
border-top To style only the top edge border-top: 3px dashed blue;
the top side
Sets border properties for
border-right To style only the right edge border-right: 2px solid green;
the right side
Sets border properties for border-bottom: 4px dotted
border-bottom To style only the bottom edge
the bottom side orange;
Sets border properties for
border-left To style only the left edge border-left: 5px double purple;
the left side

5|Page
Box Properties
Property Description Why to Use Possible Values / Syntax / Examples
Values:
• auto → browser calculates margin (useful
for centering)
• length → px, em, %, negative values
allowed
Shorthand examples:
To separate
Creates space outside the • 4 values → margin: 25px 50px 75px 100px;
margin elements on the
element (outside border). → top=25px, right=50px, bottom=75px,
page.
left=100px
• 3 values → margin: 25px 50px 75px; →
top=25px, right/left=50px, bottom=75px
• 2 values → margin: 25px 50px; →
top/bottom=25px, right/left=50px
• 1 value → margin: 25px; → all sides=25px
Values:
• length → px, em, %
Shorthand examples:
• 4 values → padding: 25px 50px 75px 100px;
Creates space inside the To add inner → top=25px, right=50px, bottom=75px,
padding element (between content & spacing inside the left=100px
border). element. • 3 values → padding: 25px 50px 75px; →
top=25px, right/left=50px, bottom=75px
• 2 values → padding: 25px 50px; →
top/bottom=25px, right/left=50px
• 1 value → padding: 25px; → all sides=25px
To control
Specifies the width of an
width horizontal size of Values: auto, length (px, em, %),
element’s content area.
the element.
Specifies the height of an To control vertical
height Values: auto, length (px, em, %),
element’s content area. size of the element.
Values:
Defines how width and height To control layout
• content-box (default): width/height exclude
box- are calculated whether behavior when
padding & border.
sizing padding and borders are adding
• border-box: width/height include padding
included. padding/borders.
& border.
To add depth, Syntax: box-shadow: h-offset v-offset blur
box- Adds shadow effects around
hover effects, or spread color;
shadow an element’s frame.
visual highlights. Example: box-shadow: 2px 2px 5px gray;

6|Page
CSS background properties
Property Description Syntax Key Values / Notes
Sets the background color of Any valid color (red, #ffc0cb,
background-color background-color: color;
an element rgb(255,0,0))
Sets an image as the background-image:
background-image Use image URL;
background url("[Link]");
repeat, repeat-x, repeat-y,
background- Controls how background background-repeat: no-repeat
repeat image repeats repeat; default repeats if not
specified
background- Sets the starting position of a top, bottom, left, right,
background-position: top;
position background image center, x% y%
Specifies the size of the auto, cover, contain, width
background-size background-size: auto;
background image height
background- Sets whether background background-attachment:
scroll, fixed, local
attachment scrolls with content scroll;
Determines how far the background-clip: border- border-box, padding-box,
background-clip
background extends box; content-box

7|Page
Pseudo classes
Pseudo-class What It Does
:hover Changes color when mouse hovers
:active Changes color when clicked
:focus Highlights input field when clicked
:link / :visited Colors for unvisited/visited links
:nth-child(2) Targets the 2nd list item
:not(.special) Styles all list items except .special

Pseudo Elements
Pseudo-
Description Syntax Example Result / Effect
element
First line of the
Styles the first line of a p::first-line { p::first-line { color: red;
::first-line paragraph appears red
block-level element. property: value; } font-weight: bold; }
and bold.
First letter of the
Styles the first letter of p::first-letter { p::first-letter { font-
::first-letter paragraph becomes large
a block-level element. property: value; } size: 50px; color: red; }
and red.
Inserts content before
selector::before { p::before { content: Adds “Note:” before
::before an element’s actual
content: "..."; } "Note: "; color: red; } each paragraph.
content.
Inserts content after
selector::after { p::after { content: " Adds a green checkmark
::after an element’s actual
content: "..."; } ✔"; color: green; } after the paragraph.
content.
Styles the marker
li::marker { li::marker { color: red; List bullets or numbers
::marker (bullet or number) of
property: value; } font-size: 20px; } appear red and large.
list items.
Styles the highlighted ::selection { Selected text appears
::selection {
::selection text selected by the background: blueviolet; white on a blue-violet
property: value; }
user. color: white; } background.

8|Page
Display Property
Display
Description Behavior / Use Case Visual Behavior
Type
Displays elements in a line, Does not accept width/height.
Elements sit side by side in a
inline without starting on a new Common for <span>, <a>,
single line.
line. <strong>.
Displays element as a block, Takes full width available and Each element appears on a new
block
starting on a new line. allows width/height to be set. line.
inline- Combines features of inline Appears inline, but allows width Boxes are side by side, but size-
block and block. and height. controllable.
Hides the element
Element takes no space on the The element is invisible and
none completely (removed from
page. does not occupy space.
layout).
Displays element as a flex Allows flexible alignment and Items are arranged in a row (or
flex
container. distribution of child elements. column) with flexible spacing.
Displays element as a grid Divides layout into rows and Elements are placed in a grid
grid
container. columns for advanced control. layout (rows and columns).

9|Page
Flexbox
Property Description Possible Values Syntax / Example
display: Defines a flex container to
flex, inline-flex div { display: flex; }
flex arrange items flexibly.
flex- Defines the direction of flex row (default), row-reverse, column,
flex-direction: row;
direction items. column-reverse
justify- Aligns items horizontally (along flex-start, flex-end, center, space- justify-content:
content the main axis). between, space-around, space-evenly space-between;
Aligns items vertically (along the stretch (default), flex-start, flex-end,
align-items align-items: center;
cross axis). center
Determines whether flex items
flex-wrap nowrap (default), wrap, wrap-reverse flex-wrap: wrap;
wrap onto multiple lines.
Defines the space between flex
gap Any CSS length unit (px, em, %) gap: 15px;
items.
Specifies the display order of flex Integer values (0 default, can be
order order: 2;
items. positive or negative)

Flex Example
<head>
<style>
.container {
display: flex; /* Creates a flex container. Change values and check effects */
flex-direction: row; /* Arranges items in a row (default). Change values and check effects */
justify-content: space-between; /* Spaces items horizontally. Change values and check effects */
align-items: center; /* Aligns items vertically in the center. Change values and check effects */
flex-wrap: wrap; /* Wraps items to next line if space runs out */
gap: 15px; /* Adds space between items */
background-color: lightgray;
padding: 15px;
}
.item {
background-color: steelblue;
color: white;
padding: 20px;
text-align: center;
border-radius: 5px;
width: 200px;
}
.item:nth-child(2) {
order: 1; /* This will move the item to appear after others. Change values and check
effects(POSITIVE,NEGATIVE,0) */

10 | P a g e
/* flex: 1 1 100px; */ /* Remove comments from this line to check effect. flex-grow: 1, flex-shrink: 1,
flex-basis: 100px */
background-color: orange;
}
</style>
</head>
<body>
<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2 (Order 1)</div>
<div class="item">Item 3</div>
</div>
</body>

11 | P a g e
Grid Layout Properties
Default
Property Description Possible Values Syntax / Example
Value

grid-template- Defines the number and width grid-template-columns:


Fixed units (px, em, %) none
columns of columns in a grid layout. 200px 1fr 2fr;

grid-template- Defines the number and height grid-template-rows:


Fixed units (px, em, %), none
rows of rows in a grid layout. 100px auto 100px;

Defines the space between gap: 10px; or gap: 20px


gap Any CSS length (px, em, %) 0
rows and columns. 40px;

<head>
<style>
.grid1 {
display: grid;
grid-template-columns: repeat(2,1fr);
grid-template-rows: auto;
gap: 10px;
background-color: lightgray;
padding: 10px;
}
.item {
background-color: steelblue;
color: white;
text-align: center;
padding: 20px;
}
</style></head>
<body>
<div class="grid1">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
<div class="item">Item 4</div>
</div>
</body>

12 | P a g e
CSS Positioning Properties
Default Syntax /
Property Description Possible Values
Value Example

Defines how an element is positioned static, relative, absolute,


position static position: absolute;
in the document. fixed, sticky

Distance between element and top Any CSS length (px, %,


top auto top: 20px;
edge of container. auto)

Distance between element and right Any CSS length (px, %,


right auto right: 10px;
edge of container. auto)

Distance between element and Any CSS length (px, %,


bottom auto bottom: 15px;
bottom edge of container. auto)

Distance between element and left Any CSS length (px, %,


left auto left: 30px;
edge of container. auto)

Controls stack order of overlapping Integer (auto, positive or z-index: 2; (Higher


z-index auto
elements. negative values) = on top)

✓ static: Default, element follows normal document flow.


✓ relative: Moved relative to its normal position.
✓ absolute: Positioned relative to the nearest positioned ancestor.
✓ fixed: Stays fixed in place even when scrolling.
✓ z-index: Controls which element appears on top of others.

<head>
<style>
.container{
height: 300px;
width: 400px;
border: 1px solid red;
position: relative;
}
.test {
height: 100px;
width : 100px;
text-align: center;
13 | P a g e
font-size:30px;
}
#test1{
background-color: aqua;
position: relative;
top: 30px;
left: 40px;
}
#test2{
background-color: blue;
position: absolute;
}
#test3{
background-color: pink;
position: absolute;
left: 30px;
}
</style>
</head>
<body>
<div class="container">
<div class="test" id="test1">1</div>
<div class="test" id="test2">2</div>
<div class="test" id="test3">3</div>
</div>
</body>

✓ .container is position: relative, so absolutely positioned elements use it as their reference.


✓ #test1 is relative and moved 30px down and 40px right from its normal spot.
✓ #test2 is absolute with no top/left values, so it sits at the top-left of the container (0,0).
✓ #test3 is absolute with left: 30px, so it appears at the top, 30px from the left, overlapping #test2

14 | P a g e
#test2 (blue box) has z-index: 1 → it appears in front of #test3 (pink box) when they overlap.

Adding z-index: 1 to #test2 makes box 2 appear on top of any other overlapping elements.

15 | P a g e
Chapter 5
CSS Multiple Column Properties
Property Description
column-count Specifies the number of columns an element should be divided into.

column-gap Specifies the gap between the columns.


column-rule-style Specifies the style of the rule between columns (none, dotted, dashed, solid, double).
column-rule-color Specifies the color of the rule between columns.

column-rule-width Specifies the width of the rule between columns.


Shorthand column-rule: width style color; e.g., column-rule: 1px dotted red;

Image Properties
Property Syntax Example Description
border-radius border-radius: border-radius: 20px; Sets the corner rounding for all
radius; four corners.
border-top-left-radius border-top-left- border-top-left- Rounds only the top-left corner.
radius: radius; radius: 15px;
border-top-right-radius border-top-right- border-top-right- Rounds only the top-right corner.
radius: radius; radius: 15px;
border-bottom-right-radius border-bottom- border-bottom- Rounds only the bottom-right
right-radius: radius; right-radius: 15px; corner.
border-bottom-left-radius border-bottom-left- border-bottom-left- Rounds only the bottom-left
radius: radius; radius: 15px; corner.
opacity opacity:value opacity:0.5 Sets the transparency level of an
element, where 1 is fully opaque
and 0 is fully transparent.

16 | P a g e
CSS Transform Functions
Transform Function Example Description / Effect
Translate (move element)
Equivalent to translateX(20px) — moves along
translate(20px) Moves element 20px right
X-axis only.
Moves element 20px right and
translate(20px, 20px) First value = X, second = Y.
20px down
translateX(20px) Moves element 20px right Positive → right, negative → left.
translateY(20px) Moves element 20px down Positive → down, negative → up.
Scale (resize element)
scale(1) No change 1 means 100% original size.
scale(2, 1.5) Width ×2, Height ×1.5 First = X scale, second = Y scale.
Doubles size both horizontally
scale(2) Equivalent to scale(2, 2).
and vertically
scaleX(2) Doubles width only Height remains unchanged.
scaleY(2) Doubles height only Width remains unchanged.
Flips element horizontally and
scale(-1) Same as scale(-1, -1) → mirrored both axes.
vertically
Flips horizontally (mirror image
scaleX(-1) Common trick to flip images or icons.
left–right)
Flips vertically (mirror image
scaleY(-1) Often used for reflection effects.
top–bottom)
Rotate (turn element)
Rotation center is by default the element’s
rotate(45deg) Rotates element 45° clockwise
center.
Rotates element 45°
rotate(-45deg) Negative values rotate opposite direction.
counterclockwise
Skew (tilt element)
skew(45deg) Tilts element 45° along X-axis Equivalent to skewX(45deg).
skew(45deg, 20deg) Tilts element 45° on X, 20° on Y Creates a combined shearing effect.
skewX(15deg) Tilts only along X-axis Top edge stays still, bottom edge moves.
skew(15deg, 0deg) Tilts 15° along X, none along Y Same as skewX(15deg).
skewY(15deg) Tilts only along Y-axis Left edge stays still, right edge moves.

transform: rotate(45deg) scale(1.5) translate(50px, 50px) skew(15deg,15deg);

17 | P a g e
Transition Properties
Property Syntax Possible Values Default Value Required?
- all → applies to all animatable
properties
transition- transition-property: - Single property: background-color,
all No
property property-name; width, transform, etc.
- Multiple properties separated by
commas
- Time in seconds (s) or milliseconds
transition- transition-duration: 0s (no
(ms) Yes
duration time; transition)
- e.g. 1s, 500ms
- ease → starts slow, speeds up,
slows down (default)
- linear → constant speed
- ease-in → starts slow
transition-timing- transition-timing-
- ease-out → ends slow ease No
function function: value;
- ease-in-out → starts & ends slow
- steps(n) → jumps in n equal steps
- cubic-bezier(x1, y1, x2, y2) →
custom curve
- Time before transition starts
transition-delay transition-delay: time; - Can be positive or negative 0s No
- e.g. 1s, 0.5s, -2s

transition: property duration timing-function delay;

Create a CSS program that demonstrates the use of multiple transitions on a single element.
When the user hovers over the div, it should:
• Increase in size,
• Change background color,
• Rotate 360 degrees,
• Become circular,
all with smooth timing, delay, and different transition durations.
<head>
<style>
div {
width: 100px;
height: 100px;
background: rgb(142, 7, 233);

/* Transition for multiple properties including transform */


transition-property: width, height, transform, background-color,border-radius;
transition-duration: 3s, 5s, 4s,6s,6s;
18 | P a g e
transition-delay: 2s; /* Wait 2s before starting transition */
transition-timing-function: ease-in-out;
}
div:hover {
width: 150px;
height: 150px;
transform: rotate(360deg);
background-color: yellow;
border-radius:50%;
}
</style>
</head>
<body>
<div></div>
</body>

19 | P a g e
Animation Properties
Property Purpose Possible Values / Examples

animation-name Specifies the name of the Any valid animation name defined with
@keyframes animation to @keyframes.
apply. Example: animation-name: bounce;
animation-duration Defines how long one Time value in seconds (s) or milliseconds (ms).
animation cycle takes to Examples: 2s, 500ms
complete.
animation-delay Specifies the time to wait Time value (seconds or milliseconds). Can be
before starting the negative.
animation. Examples: 1s, -2s
animation-iteration-count Defines how many times A number or 'infinite'.
the animation repeats. Examples: 3, infinite
animation-direction Defines whether the normal – runs forward (default)
animation runs forward, reverse – runs backward
backward, or alternates. alternate – runs forward then backward
alternate-reverse – runs backward then forward
animation-timing-function Controls the speed curve linear – constant speed
of the animation. ease – starts slow, speeds up, slows down (default)
ease-in – starts slow
ease-out – ends slow
ease-in-out – starts and ends slow
animation (shorthand) Combines all animation Syntax: animation: name duration timing-function
properties in one line. delay iteration-count direction;
Example: animation: bounce 2s ease-in-out 1s
infinite alternate;
Animation in reverse direction with infinite iteration count

<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background-color: red;
position: relative;
animation-name: example;
animation-duration: 4s;
animation-direction: reverse;
animation-iteration-count: infinite;
animation-delay:2s;
animation-timing-function:ease-in;
}
@keyframes example {
0% {background-color:red; left:0px; top:0px;}
20 | P a g e
25% {background-color:yellow; left:200px; top:0px;}
50% {background-color:blue; left:200px; top:200px;}
75% {background-color:green; left:0px; top:200px;}
100% {background-color:red; left:0px; top:0px;}
}
</style>
</head>
<body>
<div></div>
</body>
</html>

21 | P a g e
Gradients
Gradient Values /
Property / Syntax Example Description
Type Options
background-image:
Linear background-image:
linear-
Gradient Any number of linear-gradient(to Creates rainbow or multi-color
gradient(direction,
(Multiple colors right, red, orange, transitions.
color1, color2, color3,
Colors) yellow, green, blue);
...);
0deg = to
background-image: top,90deg = to background-image:
Linear
linear-gradient(angle, right,180deg = linear- Controls gradient direction
Gradient
color-stop1, color- to gradient(45deg, precisely using angles.
(Angle)
stop2, ...); bottom,270deg blue, pink);
= to left
background-image:
Linear
background-image: Percentages linear-gradient(red
Gradient Controls where each color begins
linear-gradient(color1 for exact color 20%, yellow 50%,
(Color and ends in the gradient.
stop%, color2 stop%); positions green 80%,purple
Stops %)
100%);
background-image: background-image:
Shapes: circle,
Radial radial-gradient(shape radial- Creates circular or elliptical
ellipse
Gradient ,color-stop1, color- gradient(circle, red, gradients radiating from a center.
(default)
stop2, ...); yellow, blue);
Radial background-image:
Gradient background-image: radial-
Percent values Controls how quickly colors
(Different radial-gradient(color1 gradient(yellow
for spread transition in circular gradient.
Color %, color2 %, color3 %); 10%, red 25%, pink
Stops) 50%);
background-image: Colors blend background-image:
Conic Colors rotate around the center
conic-gradient(color1, around a conic-gradient(red,
Gradient like a color wheel. Default 0deg
color2, ...); center point yellow, green, blue);
Conic background-image: background-image:
Gradient conic-gradient(from Starting angle conic-gradient(from Rotates the starting point of the
(from angle, color1, color2, in degrees 90deg, red, yellow, conic gradient.
angle) ...); green);
background-image:
conic-gradient(from
Conic background-image:
Degrees define 90deg, red 0deg, red
Gradient conic-gradient(color1 Creates pie-chart-like color
color segment 45deg, green 45deg,
(Color startdeg enddeg, color2 sections.
ranges green 90deg, blue
Segments) startdeg enddeg, ...);
90deg, blue 180deg,
yellow 180deg,

22 | P a g e
Gradient Values /
Property / Syntax Example Description
Type Options
yellow 315deg, pink
315deg);
or
background-image:
conic-gradient(from
90deg, red 0deg
45deg, green 45deg
90deg, blue 90deg
180deg, yellow
180deg 315deg, pink
315deg);

background-image: linear-gradient(to right top, purple, yellow);


background-image: radial-gradient(circle, blue, yellow, pink);
background-image: conic-gradient(from 90deg, red, yellow, green);

Variables
Category Property / Syntax Values / Example Description / Usage
Defines a CSS variable (custom
--variable-name:
Definition --main-color: blue; property). Must start with two dashes (-
value;
-).
Usage var(--variable-name) color: var(--main-color); Retrieves the value of the variable.
Declared inside Can be accessed by all elements
Global Variable :root { --text-color: green; }
:root throughout the document.
Declared inside a Accessible only within that selector’s
Local Variable p { --border: solid; }
selector scope.
Variable names are
Case Sensitivity --Color ≠ --color Ensure consistent naming.
case-sensitive
Overriding (Local Local variable :root { --b: blue; } p { --b: Local value (brown) will apply to <p>
> Global) overrides global brown; color: var(--b); } instead of global (blue).
Example:
:root{ --b : black; }
p{ --b: blue; color:var(--b); }

23 | P a g e
Media queries
To make your webpage responsive ( adapt its layout properly to different screen sizes like phones, tablets, and
desktops), you must include this line inside the <head> section of your HTML document:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Attribute / Setting Meaning

Tells the browser that this meta tag controls the viewport (visible area of the
name="viewport"
web page).

content="width=device- Sets the page width to match the device’s screen width (so it doesn’t zoom out
width" to a fixed desktop width).

initial-scale=1.0 Sets the initial zoom level when the page is first loaded (1.0 = 100% zoom).

Possible
Category Property / Syntax Example Description / Usage
Values
@media not|only mediatype
and (mediafeature) and|or Defines conditional
@media screen and (max-
Basic Syntax (mediafeature) { - styles based on
width: 600px) { ... }
/* CSS rules go here */ device features.
}
Specifies the type of
Media Types all, screen - @media screen { ... } output device the
styles apply to.
(orientation: Adjusts styles based
portrait / @media (orientation:
Orientation portrait)(orientation: on device
landscape portrait) { ... }
landscape) orientation.
@media screen and (min- Combines multiple
Combining logical
and, or, not width: 600px) and media features for
Conditions operators
(orientation: landscape) precise control.
@media (min-width: Styles apply only
Range @media (min-width: 500px) 500px) and (max-width: between 500px and
width range
Example and (max-width: 700px) 700px) { body { 700px viewport
background: lightblue; } } widths.
@media not (orientation: Excludes landscape
Negation @media not (orientation: not +
landscape) { body { orientation (applies
Example landscape) feature
background: pink; } } to portrait).

24 | P a g e
Possible
Category Property / Syntax Example Description / Usage
Values
‘only’ Ensures old browsers
@media only screen and only +
Keyword ignore unsupported
(max-width: 600px) mediatype
Example queries.
Device
@media screen and (max- body { background: Styles for small
Adaptation mobile
width: 400px) orange; color: white; } screens like phones.
Example
@media screen and (min-
Tablet View body { background: pink; Styles for tablets or
width: 401px) and (max-width: tablet
Example color: blue; } medium devices.
1024px)

If you don’t specify a media type like screen, the media query applies to all media types (by default = all).

If you do specify screen, it applies only when the output device is a screen (computer, tablet, mobile, etc.)
not printers or other media types.

25 | P a g e

You might also like