Week 2: CSS Basics and
Advanced CSS
This presentation introduces the foundational concepts of CSS (Cascading
Style Sheets) essential for web development students. We will explore CSS
syntax, colors, units, selectors, and the core box model. Additionally, we'll
cover styling elements using borders, padding, and margins. Mastering
these topics will empower you to create visually appealing and well-
structured web pages through effective styling techniques.
U±deñÿča±du±g CSS a±d Ičÿ
Sō±čaŊ
Whač uÿ CSS? CSS Sō±čaŊ Baÿucÿ
CSS is a stylesheet language CSS rules consist of selectors
used to describe the and declaration blocks:
presentation of an HTML selectors target HTML
document. It controls layout, elements, and declarations
colors, fonts, and spacing. specify property-value pairs.
C¿««¿± CSS Sō±čaŊ Paččeñ±ÿ
Examples include element selectors (e.g., h1), class selectors (e.g.,
.className), and ID selectors (e.g., #idName).
CSS Colors and Units
Color Formats CSS Units
Hexadecimal (#RRGGBB) - compact and widely used Absolute units: px, cm, in
RGB/RGBA - red, green, blue with optional alpha for Relative units: em, rem, %, vw, vh
transparency Units affect sizing, spacing, and responsiveness
HSL/HSLA - hue, saturation, lightness with alpha channel
Named colors - predefined color names like 'red' or 'blue'
Selectors in CSS
Element Selectors
Target HTML tags directly, e.g., "p", "h2". They select all instances of
the tag.
Class Selectors
Use a period followed by class name (e.g., .button) to style multiple
elements sharing the same class.
ID Selectors
Use a hash symbol with an ID (e.g., #header) to style a unique
element on the page.
Attribute Selectors
Select elements based on attributes, like input[type="text"], allowing
more specific targeting.
The CSS B¿Ŋ M¿de EŊéau±ed
B¿ñdeñ
Paddu±g A line surrounding the
Space between content and padding and content,
border, providing inner customizable in width, style,
whitespace. and color. Mañgu±
C¿±če±č Outer space around the
The area where text and element, separating it from
images appear. neighbors.
2 3
1 4
C¿±čñ¿u±g Wudčh a±d Heughč u± CSS
1 2 3
Sečču±g Wudčh/Heughč Mu±/MaŊ C¿±ÿčñau±čÿ Reÿ鿱ÿuļe Behaļu¿ñ
Specify fixed or relative sizes using Use min-width, max-width, min- Percentages and viewport units
units like px, %, em, or rem. height, and max-height to set size enable elements to adapt smoothly to
boundaries. different screen sizes.
Styling Borders in CSS
Border Properties Border Styles
Set border-width, border- Options include solid,
style, and border-color dashed, dotted, double,
independently or shorthand groove, ridge, inset, outset,
in border. and none.
Rounded Corners
Use border-radius to create rounded edges for visual softness and
style variation.
U±deñÿča±du±g CSS Paddu±g
I±±eñ Séacu±g I±duļuděa Sudeÿ
Padding defines the space Use padding-top, padding-
between content and its right, padding-bottom,
border, increasing readability padding-left for precise control.
and layout balance.
Sh¿ñčha±d
Set all sides at once with padding: 10px 15px 20px 25px; (top, right,
bottom, left).
Applying Margins for Layout Control
Outer Spacing Margin Collapse Auto Margins
Margin creates space outside the Vertically adjacent margins may Set margin-left and margin-right to
element's border, pushing neighboring collapse into one, affecting vertical auto to horizontally center block
elements apart. spacing behavior. elements with fixed width.
Sě««añō a±d NeŊč Sčeéÿ
Łučh CSS
Maÿčeñ Baÿuc CSS Sō±čaŊ
Understand selectors, properties, and values to write clean
stylesheets.
EŊéeñu«e±č Łučh C¿¿ñÿ a±d U±učÿ
Practice using different color formats and CSS units for flexible
design.
Aééō B¿Ŋ M¿de C¿±ceéčÿ
Use borders, padding, and margin effectively to build well-
structured layouts.
Adļa±ce č¿ Reÿ鿱ÿuļe Deÿug±
Incorporate flexible sizing and selectors to adapt designs
for various devices.
By progressing through these steps, you'll strengthen your CSS skills and
create visually compelling, user-friendly web pages.