Back to Subject
Practice MCQ

Unit 3 - Notes

CSE326

Unit 3: Introduction to Cascading Style Sheets

1. Introduction to CSS

CSS (Cascading Style Sheets) is a language used to describe the presentation of a document written in a markup language like HTML. While HTML provides the structure (paragraphs, headings, images), CSS provides the style (layout, colors, fonts).

Why use CSS?

  • Separation of Concerns: Separates content (HTML) from design (CSS).
  • Efficiency: Styles can be reused across multiple pages.
  • Maintainability: Changing a style in one place updates it globally.

2. Types of CSS (Insertion Methods)

There are three ways to apply CSS to an HTML document.

A. Inline CSS

Styles are applied directly to a specific HTML element using the style attribute.

  • Priority: Highest priority (overrides external and internal styles).
  • Use Case: Quick fixes or testing; generally discouraged for large projects.

HTML
<p style="color: blue; font-size: 14px;">This is an inline style.</p>

B. Internal CSS

Styles are defined within the <style> tag inside the <head> section of the HTML document.

  • Scope: Applies to the specific single HTML page.

HTML
<head>
    <style>
        h1 {
            color: red;
        }
        p {
            font-family: Arial;
        }
    </style>
</head>

C. External CSS

Styles are written in a separate file with a .css extension and linked to the HTML document using the <link> tag.

  • Best Practice: Used for styling entire websites.
  • Syntax: The <link> tag goes inside the <head>.

HTML File (index.html):

HTML
<head>
    <link rel="stylesheet" type="text/css" href="styles.css">
</head>

CSS File (styles.css):

CSS
body {
    background-color: #f0f0f0;
}

3. CSS Selectors

Selectors represent the HTML elements you want to style.

A. Type Selector (Element Selector)

Selects elements based on the tag name.

CSS
/* Selects all <p> tags */
p {
    color: darkblue;
}

B. ID Selector

Selects a single element with a specific id attribute.

  • Syntax: Starts with a hash character (#).
  • Note: IDs must be unique within a page.

CSS
/* HTML: <div id="header"> */
#header {
    background-color: grey;
}

C. Class Selector

Selects elements with a specific class attribute.

  • Syntax: Starts with a period (.).
  • Note: Classes can be reused on multiple elements.

CSS
/* HTML: <p class="highlight"> and <span class="highlight"> */
.highlight {
    background-color: yellow;
    font-weight: bold;
}

4. Text Controlling and Typography

CSS provides comprehensive properties to format text and fonts.

Font Properties

  • font-family: Specifies the typeface. It is best to provide a "stack" of fonts as fallbacks.
    CSS
        p { font-family: "Times New Roman", Times, serif; }
  • font-size: Sets the size of the text (px, em, rem, %).
    CSS
        h1 { font-size: 24px; }
  • font-weight: Sets the thickness of characters (normal, bold, 100-900).
    CSS
        strong { font-weight: bold; }

Text Formatting Properties

  • text-align: Aligns text horizontally (left, right, center, justify).
    CSS
        h1 { text-align: center; }
  • line-height: Sets the vertical space between lines of text.
    CSS
        p { line-height: 1.5; }
  • text-decoration: Used to add or remove decorations (underline, overline, line-through, none). Often used to remove underlines from links.
    CSS
        a { text-decoration: none; }
  • text-transform: Controls capitalization (uppercase, lowercase, capitalize).
    CSS
        h2 { text-transform: uppercase; }

5. The CSS Box Model

Every element in HTML is essentially a rectangular box. The CSS Box Model describes the rectangular boxes generated for elements in the document tree and consists of margins, borders, padding, and the actual content.

Layers of the Box Model (Inside Out):

  1. Content: The actual content of the box (text, image).
  2. Padding: Clears an area around the content. The padding is transparent.
  3. Border: A border that goes around the padding and content.
  4. Margin: Clears an area outside the border. The margin is transparent.

Code Example

CSS
div {
    width: 300px;           /* Content width */
    padding: 20px;          /* Space between content and border */
    border: 5px solid black;/* The border */
    margin: 15px;           /* Space outside the border */
}

Detailed Properties

  • Padding: padding-top, padding-right, padding-bottom, padding-left (or shorthand padding: 10px 5px 10px 5px;).
  • Margin: margin-top, margin-right, margin-bottom, margin-left (supports negative values to overlap elements).
  • Border: Requires width, style, and color.
    CSS
        border-style: solid; /* solid, dotted, dashed, double */
    border-width: 2px;
    border-color: red;
    /* Shorthand */
    border: 2px solid red;

6. Div and Span Tags

<div> Tag (Block-level)

  • Definition: Defines a division or a section in an HTML document.
  • Behavior: It is a block-level element, meaning it starts on a new line and takes up the full width available.
  • Usage: Used as a container for layout structure (headers, footers, sidebars).

HTML
<div class="container">
    <h1>Header</h1>
    <p>Some content.</p>
</div>

<span> Tag (Inline)

  • Definition: Defines an inline section within a document.
  • Behavior: It is an inline element, meaning it does not start on a new line and only takes up as much width as necessary.
  • Usage: Used to style a specific part of a text.

HTML
<p>My favorite color is <span style="color: blue;">blue</span>.</p>

7. Working with Background Images

CSS allows you to set background colors and images for elements.

  • background-image: Sets an image as the background.
    CSS
        body {
        background-image: url("paper.gif");
    }
  • background-repeat: Defines if/how the image repeats.
    • repeat (default): Repeats vertically and horizontally.
    • no-repeat: Image appears once.
    • repeat-x: Repeats horizontally only.
  • background-position: Specifies the starting position (e.g., center, top right).
  • background-size: Specifies the size of the image.
    • cover: Scales image to cover the entire container.
    • contain: Scales image to be fully visible.

CSS
div {
    background-image: url('bg.jpg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

8. Applying CSS on Tables

Tables can be styled to look professional using borders, padding, and alignment.

Basic Table Styling

CSS
table {
    width: 100%;
    border-collapse: collapse; /* Removes double borders */
}

th, td {
    padding: 12px;
    text-align: left;
    border-bottom: 1px solid #ddd;
}

Creating Hoverable Tables

To highlight a table row when the user moves the mouse over it, use the :hover pseudo-class on the <tr> element.

CSS
tr:hover {
    background-color: #f5f5f5;
}

9. Applying CSS on Forms

CSS allows full customization of form controls to improve User Experience (UX).

Styling Input Fields

Target inputs generally or by type:

CSS
/* Target all text inputs */
input[type=text], select, textarea {
    width: 100%;
    padding: 12px 20px;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box; /* Ensures padding doesn't increase width */
}

Styling Input Focus

Change the look when the user clicks into the field using :focus.

CSS
input[type=text]:focus {
    border: 2px solid #555;
    background-color: lightblue;
    outline: none;
}

Styling Buttons

CSS
input[type=button], input[type=submit], button {
    width: 100%;
    background-color: #4CAF50;
    color: white;
    padding: 14px 20px;
    margin: 8px 0;
    border: none;
    border-radius: 4px;
    cursor: pointer; /* Changes mouse cursor to a hand */
}

button:hover {
    background-color: #45a049;
}