Module V: CSS

Introduction:
Welcome to Module V, focusing on Cascading Style Sheets (CSS). This module is essential for
taking your HTML content and making it visually appealing and well-structured. We'll cover how
CSS works, its syntax, how to apply it, and key properties for styling text, colors, backgrounds,
spacing, and layout. We'll also look specifically at creating page layouts and navigation bars.

Unit 1: Basic of Cascading Style Sheets

1.1 Overview of CSS

• What is CSS? CSS stands for Cascading Style Sheets. It's not a programming language
but a stylesheet language used to describe the presentation (look and formatting) of a
document written in HTML. While HTML defines the structure and content (like "this is
a heading," "this is a paragraph"), CSS defines the style (like "make that heading blue,"
"make that paragraph text size 16 pixels").

• Separation of Concerns: CSS allows you to separate the styling rules from the HTML
structure. This makes the HTML cleaner and the styles reusable and easier to manage.

o Example: Instead of putting <font color="red"> (outdated HTML) on every

paragraph you want red, you define a single CSS rule.

• History: CSS was developed to solve the limitations of styling with just HTML. Key
figures include Håkon Wium Lie and Bert Bos, working with the W3C. It evolved through
versions CSS1, CSS2, and CSS3, with new features added modularly over time.

• Advantages:

o Consistency: Apply the same style across many pages easily.

o Maintenance: Update the look of an entire website by changing one CSS file.

o Efficiency: Reduces HTML code complexity and file size.

o Speed: Pages often load faster as styling is cached.

 o Compatibility: Better control over appearance across different devices.

o Power: Advanced layout and presentation capabilities beyond basic HTML.

• Disadvantages:

o Complexity: Different CSS levels (1, 2, 3, modules) can be initially confusing.

o Cross-Browser Issues: Browsers might interpret CSS slightly differently,

requiring testing.

o Security: CSS itself has limited security features; security is handled by other
layers.

o Testing: Requires testing across various browsers and devices.

1.2 Role of CSS

• Styling: The primary role. Controls fonts (font-family, font-size), colors

(color, background-color), spacing (margin, padding), borders (border), etc.

• Layout Control: Defines the arrangement of elements on the page using techniques like
Flexbox (display: flex), Grid (display: grid), and positioning (position: absolute).

• Responsive Design: Allows websites to adapt their layout and appearance to different
screen sizes (desktops, tablets, phones) using techniques like media queries.

o Example: @media (max-width: 768px) { nav ul { display: block; } } might stack

navigation links vertically on smaller screens.

• Accessibility: Proper use of CSS (e.g., sufficient color contrast, hiding content correctly)
helps make websites usable for people with disabilities.

• Maintenance: Separating styles into CSS files simplifies updates and reduces errors.

• Animation & Effects: Enables visual effects like transitions (transition: opacity 0.5s;) and
animations without needing JavaScript for simpler cases.

1.3 CSS Syntax and Structure

• CSS Rule: The basic unit of CSS, consisting of a Selector and a Declaration Block.
• Selector: Identifies the HTML element(s) the rule applies to.

• Declaration Block: Contains one or more declarations enclosed in curly braces {}.

• Declaration: A property-value pair that applies a style. It has a property (the style
attribute, e.g., color) and a Value (the setting for the property, e.g., blue), separated by a
colon (:), and ends with a semicolon (;).

o Example Rule: h2 { color: green; text-decoration: underline; }

▪ h2 is the selector.

▪ { color: green; text-decoration: underline; } is the declaration block.

▪ color: green; and text-decoration: underline; are declarations.

▪ color and text-decoration are properties.

▪ green and underline are values.

• Types of Selectors:

o Element (Tag) Selector: Selects all elements of a specific type.

▪ Example: p { margin-bottom: 1em; }

o ID Selector: Selects the single element with a specific id. Uses #. IDs must be
unique.

▪ Example: #main-logo { width: 150px; } (targets <img id="main-logo">)

o Class Selector: Selects all elements with a specific class. Uses .. Can be applied to
many elements.

▪ Example: .warning { color: red; font-weight: bold; } (targets <p

class="warning">)

o Universal Selector: Selects all elements. Uses *. Often used for resets.

▪ Example: * { margin: 0; padding: 0; }

o Group Selector: Applies the same style rules to multiple selectors. Uses ,.
 ▪ Example: h1, h2, h3 { color: darkblue; }

o Attribute Selector: Selects elements based on their attributes or attribute values.

▪ Example: input[type="submit"] { background-color: lightgreen; }

o Descendant Selector: Selects an element nested inside another. Uses space.

▪ Example: nav ul { list-style: none; } (targets ul inside nav)

o Child Selector: Selects a direct child element. Uses >.

▪ Example: article > p { font-size: 1.1em; } (targets p directly inside article,

not nested deeper)

• Precedence/Specificity: The browser decides which rule applies if multiple rules target
the same element. More specific selectors (ID > Class > Element) override less specific
ones. If specificity is equal, the rule defined later wins. Inline styles have the highest
specificity.

1.4 CSS Comments

• Purpose: Add notes to explain the code or temporarily disable styles without deleting
them. Comments are ignored by the browser.

• Syntax: Enclose comments within /* and */.

o Example:

/* This rule styles the main navigation */

nav { background-color: #eee; }

/* Old style - keeping for reference

nav { background-color: #ccc; }

*/

1.5 Method to insert style sheets in HTML document

 • Inline Styles: Using the style attribute directly on an HTML tag. Highest priority, but
mixes style and structure.

o Example: <p style="color: red; margin-left: 10px;">Red text with left margin. </p>

• Internal Stylesheet: Using <style> tags within the <head> of the HTML document.
Styles apply only to that page.

Example:

<head>

<style>

h1 { font-size: 2em; }

p { color: gray; }

</style>

</head>

• External Stylesheet: Creating a separate file with a .css extension (e.g., style.css) and
linking it in the <head> using the <link> tag. This is the best practice for site consistency
and maintenance.

o Example (HTML): <link rel="stylesheet" href="style.css">

o Example (style.css): body { background-color: lightyellow; }

• Cascading Order (Priority): 1. Inline Styles -> 2. Internal/External Styles (later

rules/more specific selectors override) -> 3. Browser Default Styles.

1.6 CSS Properties

• Concept: These are the specific styling instructions applied using selectors. Key groups
include:

• Text Properties: Control text appearance.

 o Example: p { color: #444; text-align: center; line-height: 1.5; text-decoration: none;
font-family: 'Helvetica', sans-serif; font-size: 16px; font-weight: normal; font-style:
italic; letter-spacing: 1px; word-spacing: 3px; text-transform: lowercase; }

• Font Properties: Specific controls for fonts. (Note: Many are covered under Text
Properties). font-variant: small-caps; turns text into small capital letters. font-stretch:
condensed; makes the font narrower if available.

• Colors and Backgrounds: Setting colors and background styles.

o Example: .hero-section { background-color: hsl(210, 50%, 95%); background-

image: url('../images/hero.jpg'); background-repeat: no-repeat; background-
position: center center; background-size: cover; opacity: 0.9; }

• Box Model Properties (Margin, Padding, Border): Control spacing and borders around
elements.

o Example: .card { width: 300px; height: 400px; margin: 20px auto; /* 20px
top/bottom, auto left/right centers it */ padding: 15px; border: 1px solid #ddd;
border-radius: 5px; /* Rounded corners */ background-color: #fff; box-shadow:
2px 2px 5px rgba(0,0,0,0.1); /* Subtle shadow */ }

• Dimension Properties: width, height, min-width, max-width, min-height, max-height.

o Example: textarea { width: 100%; min-height: 100px; max-height: 300px; }

1.7 CSS positioning and layout Properties

• Concept: These properties are crucial for arranging elements on the page beyond the
default flow.

• position Property:

o static: Default, follows normal HTML flow.

o relative: Positioned relative to its normal

position; top, right, bottom, left properties work.
 o absolute: Positioned relative to its nearest positioned ancestor (not static). Taken
out of normal flow.

o fixed: Positioned relative to the viewport (browser window). Stays in place when
scrolling.

o sticky: A mix of relative and fixed. Scrolls normally until it hits a specified offset
(e.g., top: 0;), then sticks.

o Example: .sidebar { position: sticky; top: 10px; }

• display Property: Changes how an element is displayed.

o block: Takes full width, starts on a new line (e.g., div, p, h1).

o inline: Flows with text, width/height don't apply (e.g., span, a, strong).

o inline-block: Flows like inline, but width/height/margin/padding apply.

o none: Hides the element completely.

o flex: Enables Flexbox layout for child items.

o grid: Enables Grid layout for child items.

o Example: button { display: inline-block; padding: 10px 20px; }

• float and clear: (Legacy layout technique)

o float: left; or float: right; allows elements (like images) to sit side-by-side with text
wrapping around them.

o clear: both; (or left/right) is used on an element after floated elements to ensure it
starts below them, preventing layout issues.

o Example: .article-image { float: left; margin: 0 15px 10px 0; } .article-footer {

clear: both; }

• Flexbox (display: flex): Excellent for arranging items in one dimension (a row or a
column) and distributing space.
 o Example: .nav-menu { display: flex; justify-content: space-between; /* Space items
out */ align-items: center; /* Vertically center */ }

• Grid (display: grid): Ideal for complex, two-dimensional layouts with precise control over
rows and columns.

o Example: .photo-gallery { display: grid; grid-template-columns: repeat(3, 1fr); /* 3

equal columns */ grid-gap: 10px; /* Space between items */ }
Unit 2: Layout and navigation of a web page

2.1 Division and multicolumn layouts

• Concept: Websites typically have standard sections (header, nav, main content, footer).
The main content area is often divided into multiple columns for better organization and
readability, especially on wider screens.

• Techniques: Layouts can be created using CSS frameworks (like Bootstrap), older
methods like float, or modern methods like Flexbox and Grid, which are preferred for
responsiveness and flexibility.

• Example (Conceptual 2-column): A blog layout might have a main content area (flex:
2; or grid-column: span 2;) and a sidebar (flex: 1; or grid-column: span 1;).

2.2 Layout using HTML div and table tags

• <div> Tag: A generic block-level container used extensively with CSS to group content
and create structural divisions for layout purposes.

o Example: <div class="row"><div class="column-left">...</div><div

class="column-right">...</div></div> (often styled with CSS floats, flex, or grid).

• Semantic HTML5 Elements: Modern best practice involves using tags

like <header>, <nav>, <main>, <section>, <article>, <aside>, <footer> instead of
just <div>s where appropriate. These tags provide meaning to the structure, improving
SEO and accessibility. They are then styled using CSS.

o Example: Using <main> for the primary content and <aside> for a sidebar is
semantically clearer than using <div class="main"> and <div class="sidebar">.

• <table> Tag for Layout: Using HTML tables (<table>, <tr>, <td>) purely for structuring
the layout of a page (e.g., creating columns) is an outdated and discouraged practice. It
makes the HTML less semantic, can be less flexible for responsive design, and may cause
rendering issues. Use tables only for displaying actual tabular data.

2.3 Navigation Formatting

 • Concept: Designing the website's navigation menus (usually lists of links) to be clear,
intuitive, consistent, and easy to use across different devices. Good navigation is key to
user experience.

• HTML Structure: Navigation is typically created using an unordered list (<ul>) nested
within a <nav> element, with each list item (<li>) containing an anchor tag (<a>).

o Example Structure:

<nav>

<ul>

<li><a href="/">Home</a></li>

<li><a href="/about">About</a></li>

<li><a href="/products">Products</a>

<ul> <!-- Submenu example -->

<li><a href="/products/widgets">Widgets</a></li>

<li><a href="/products/gadgets">Gadgets</a></li>

</ul>

</li>

<li><a href="/contact">Contact</a></li>

</ul>

</nav>

• Best Practices: Use clear labels, maintain consistency across pages, group related items,
ensure accessibility (keyboard navigation, screen reader compatibility), make it responsive
(e.g., hamburger menu on mobile), don't overcrowd.

2.4 CSS properties for the navigation bar

• Concept: Applying CSS rules to style the HTML structure of the navigation bar (like the
example in 2.3).

• Common Properties & Examples:

o Remove list bullets: nav ul { list-style-type: none; }

o Reset default spacing: nav ul { margin: 0; padding: 0; }

o Horizontal layout (inline-block): nav ul li { display: inline-block; margin-right:

20px; }

o Horizontal layout (flexbox): nav ul { display: flex; gap: 20px; }

o Link styling: nav a { color: white; text-decoration: none; padding: 10px; }

o Background: nav { background-color: #333; }

o Hover effect: nav a:hover { background-color: #555; color: yellow; }

o Active link style: nav a.active { font-weight: bold; border-bottom: 2px solid gold;
} (requires adding class="active" to the current page's link in HTML)

o Dropdowns (basic hide/show): nav ul ul { display: none; position: absolute; } nav

ul li:hover > ul { display: block; } (Submenu hidden by default, shown on hover of
parent list item).

o Fixed/Sticky: nav { position: fixed; top: 0; left: 0; width: 100%; z-index: 1000;
} (Makes navbar stick to the top).