HTML and CSS

🌐 The World Wide Web

  • Inventor: Tim Berners-Lee, British scientist at CERN, 1989.

  • Purpose: Created to facilitate automated information-sharing among scientists globally.

  • Key Contributions:

    • Developed the first web client and server.

    • Defined foundational web standards:

      • URL (Uniform Resource Locator)

      • HTTP (HyperText Transfer Protocol)

      • HTML (HyperText Markup Language)

  • Browser Interpretation:

    • Web browsers follow standardized rules to interpret and display HTML/CSS consistently across devices.

    • Ensures universal accessibility and presentation of web content.

🧱 HTML (HyperText Markup Language)

  • Function: Describes the structure and content of web pages.

  • File Type: Plain text files with .html extension.

  • Tag System:

    • Uses opening <tag> and closing </tag> syntax.

    • Tags define elements like paragraphs, headings, links, images, lists, etc.

  • Key Tags:

    • <p>: Paragraph

    • <a href="URL">: Hyperlink

    • <img src="image.jpg">: Image

    • <ol> / <ul>: Ordered/Unordered lists

    • <li>: List item

    • <title>: Page title (shown in browser tab)

    • <head>: Metadata section

    • <body>: Main content section

  • Viewing HTML:

    • Use Ctrl+U or browser menu: View > Source.

🎨 CSS (Cascading Style Sheets)

  • Purpose: Defines the visual style and layout of HTML elements.

  • Scope:

    • Can style a single element, a page, or an entire website.

    • Separates content (HTML) from presentation (CSS).

  • Syntax:

    selector {
  property: value;
}

    Example:

    h1 {
  
  text-align: center;
}

  • Application Methods:

    1. Inline CSS: Directly within HTML tags using style="".

      • Example: <h2 style="text-align:center">

    2. Internal CSS: Within <style> tags in the <head> section.

      • Example: 

        <style>
  h1 { text-align: center; }
</style>

    3. External CSS: Linked via <link> tag to a .css file.

      • Example: 

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

  • Best Practice: External CSS is preferred for consistency across multiple pages and easier maintenance.

Common CSS Properties

Property

Description

background-color

Sets background color of an element

font-family

Defines font style (e.g., Arial, Helvetica)

font-size

Sets font size (measured in px)

text-align

Aligns text (left, center, right)

margin

Space outside the element

padding

Space inside the element

  • Font Units:

    • px (pixels): Precise control over size.

    • pt (points): Less common in web design.

🎨 Colour in CSS

  • Named Colours: e.g., red, blue, green

  • Hex Codes: e.g., #FF0000 (red), #00FF00 (green)

    • Format: #RRGGBB

    • Each pair represents Red, Green, Blue values (00 to FF).

    • Example: #11AAFF = light blue

  • Deep Purple Example: Could be #660066 or similar.

📦 Box Model & Borders

  • All HTML elements are treated as boxes.

  • Border Properties:

    • border-color, border-style, border-width

    • Invisible borders default to 0px and none.

🧱 HTML Divisions with <div>

  • <div>: Groups content into blocks.

  • Can be styled independently using CSS.

  • Example:

    <div id="page">
  <h1>La Tour Eiffel</h1>
  <h2>Paris, France</h2>
</div>

  • CSS for Div:

    #page {
  max-width: 800px;
  margin: 20px auto;
  padding: 30px;
  
}

🧩 Classes vs Identifiers

Type

Syntax

Usage

Identifier

#id

Unique to one element per page

Class

.class

Can be reused across multiple elements

  • Example:

    .list {
  
}

  • Application:

    <div class="list">...</div>

🧭 Layout with Floats

  • Float Property: Positions elements side-by-side.

    • float: left; or float: right;

    • Used for column layouts.

  • Example:

    #right-column {
  float: right;
  width: 350px;
  text-align: left;
}

  • Clearing Floats:

    <div style="clear:both;"></div>

🧪 Inline CSS Example

<div id="left-column" style="float:left; text-align:center; width:400px;">
  <img src="tour_eiffel.jpg" width="400" height="320">
  <p style="margin: 10px 0px;">
    <a href="https://www.youtube.com/watch?v=r65KAj2sB0U">Watch</a>
  </p>
</div>

🧠 Targeted Styling

  • Apply styles to elements within specific blocks: 

    #right-column h2 {
  
  font-weight: bold;
}

Ordered Lists

  • Has the tag of <ol> </ol>

  • This is a numbered list going from

/

📝 Key details

Title

Meaning