CSS stands for Cascading Style Sheets.
It is a language used to control the presentation
of HTML documents. CSS defines how web pages should look, including colors, fonts,
spacing, and layout. The "cascading" refers to how style rules are applied based on
parent-child relationships. A style sheet is a centralized set of style rules.
Advantages of CSS: better website speed, easier to maintain, consistent design across
pages, time-saving, better device compatibility, and ability to position design elements.
Disadvantages of CSS: confusion due to multiple CSS levels (CSS2, CSS3), cross-
browser issues, limited security, and extra work for developers to test compatibility.
Common CSS text editors: Sublime Text, Notepad++, Atom, Stylizer, Espresso, Brackets,
Visual Studio Code.
Role of CSS: styling, responsive design, layout control, accessibility, consistency across
pages, ease of maintenance, and creating animations/e ects.
CSS syntax consists of selectors and declarations. A selector targets an HTML element.
A declaration contains a property and a value separated by a colon and ended with a
semicolon. Declarations are inside curly braces. Example: p {color: red;}
Types of selectors: element selector (p), id selector (#idName), class selector
(.className), universal selector (*), group selector (h1, p), attribute selector (a[target]),
descendant selector (nav ul), child selector (parent > child).
Precedence of selectors: id has highest specificity, then class, then element/tag name.
CSS comments: single-line (/* comment /) and multi-line (/ line1 line2 */). Comments
are not rendered in the browser.
Methods to insert CSS: Inline (inside style attribute), Internal (inside <style> tag
in <head>), External (linked .css file). Precedence: Inline has highest priority, then
Internal, then External.
CSS properties include typography (font-family, font-size, font-weight, font-style, text-
align, text-decoration), colors and backgrounds (color, background-color, opacity),
layout and box model (width, height, margin, padding, border).
Text properties: color, text-align, line-height, letter-spacing, text-transform, text-
decoration, word-spacing, white-space, text-shadow.
Font properties: font-family, font-size, font-weight, font-style, font-variant, font-stretch.
Background properties: background-color, background-image, background-repeat,
background-position, background-size, background-attachment, background-blend-
mode, background-origin, background-clip.
Margin properties: margin, margin-top, margin-right, margin-bottom, margin-left. Margin
creates space outside the border.
Padding properties: padding, padding-top, padding-right, padding-bottom, padding-left.
Padding creates space inside the border.
Border properties: border, border-width, border-style, border-color, border-radius.
Width and height properties: width, min-width, max-width, height, min-height, max-
height.
CSS Box Model consists of four components: Content (actual text or images), Padding
(space between content and border), Border (surrounds padding and content), Margin
(space outside the border). The box model influences total width and height
calculation.
Positioning properties: static (default normal flow), relative (relative to normal position),
absolute (relative to nearest positioned ancestor), fixed (relative to viewport), sticky
(hybrid of relative and fixed based on scroll).
Display properties: block (takes full width), inline (takes only needed width), inline-
block (inline but with block properties), none (element not displayed).
Float and clear properties: float moves element left or right; clear specifies whether
element should be next to floating elements.
Flexbox: one-dimensional layout using display: flex. Properties include flex-direction,
justify-content, align-items, flex-wrap, order, flex-grow.
Grid: two-dimensional layout using display: grid. Properties include grid-template-
columns, grid-template-rows, grid-area, grid-gap.
Division and multicolumn layouts: A website is often divided into Header (top, contains
logo/title), Menu/Navigation (links to pages), Content (main information), and Footer
(bottom, contains copyright/author info).
Common column layouts: 1-column (mobile), 2-column (tablets/laptops), 3-column
(desktops).
Methods to create layouts: CSS frameworks (Bootstrap), CSS float property, CSS
flexbox, CSS grid, CSS positioning.
Layout using div tags: <div> elements group blocks of content. Use float and clear for
columns. Example structure: container > header, wrapper (nav + section), footer.
Layout using table tags: Uses <table>, <tr>, <td> with colspan attribute. Not
recommended for modern layouts because tables render slowly and are not responsive.
Layout using semantic HTML5 elements: <header> (introductory
content), <footer> (footer info), <nav> (navigation links), <section> (thematic
grouping), <article> (self-contained content), <aside> (sidebar), <main> (dominant
content). These replace generic classes like .header, .footer.
Navigation formatting: Includes hierarchy (general to specific), consistency (same
across pages), clarity (descriptive labels), accessibility (screen reader compatible),
responsiveness (adapts to screen sizes).
Best practices: Group related links, use visual cues (hover e ects, active link
highlighting), keep navigation simple and uncluttered.
Horizontal navbar: Use <ul> with list-style-type: none, li with float: left, a with display:
block and padding. Hover e ect changes background color.
Vertical navbar: Similar to horizontal but li are not floated. Width is set (e.g., 200px),
text-align: center.
Dropdown navbar: Nested <ul> inside li. Dropdown content hidden by default (display:
none). On hover, display: block. Dropdown uses position: absolute.
Fixed navbar: position: fixed; top: 0; width: 100%. Stays at top when scrolling.
Sticky navbar: position: sticky; top: 0. Behaves like relative until scroll point, then
becomes fixed.
CSS properties for navigation bar: background-color, color, padding, margin, list-style-
type (none), text-align, text-decoration (none), display (flex, block, inline-block), flex
properties (justify-content, align-items), width/height, border, box-shadow, hover
e ects (:hover), positioning (fixed, sticky), font properties.
Important notes for exam: No code writing required. Focus on concepts, definitions,
di erences, and purposes. Know the three CSS insertion methods and their
precedence. Know the box model components. Know the di erence between margin
and padding. Know positioning values (static, relative, absolute, fixed, sticky). Know
display values (block, inline, inline-block, none). Know semantic HTML5 elements.
Know navbar types (horizontal, vertical, dropdown, fixed, sticky). Know advantages and
disadvantages of CSS.
Common multiple-choice topics: What CSS stands for, which HTML element links
external CSS (<link>), which selector targets id (#) or class (.), which property changes
background color (background-color) or text color (color), font-size for text size, text-
transform: capitalize for capitalizing words, letter-spacing for spacing between letters,
line-height for line spacing, text-align for alignment, padding for inner space, margin for
outer space, border-width for border thickness, font-family for font, font-weight: bold for
bold text, order property in flexbox, display: grid for grid layout, display: none to hide
element without a ecting layout.
Key terms to remember: CSS, properties, div, selector, id, class, inline, internal,
external, layout, position, headers, menu, navigation, content, footer.
Final reminders: The "cascading" means styles inherit or override from parent to child.
External CSS is best for global changes across multiple pages. Inline CSS has highest
priority but is hardest to maintain. Internal CSS is page-specific. Flexbox is one-
dimensional; Grid is two-dimensional. Float layouts are older method. Semantic
elements improve code readability and accessibility. Navbars can be horizontal,
vertical, dropdown, fixed, or sticky. Comments help developers but don't a ect the
browser output.