Scribd Logo
Upload

Welcome to Scribd!

  • CS 341 - Web Technologies: Lecture 4:-Web Content Presentation (CSS Essentials)

    Uploaded by

    Fatima Mohammed
    6 views40 pages
    This document summarizes a lecture on web content presentation using CSS. It introduces CSS and its evolution from HTML formatting. CSS allows separation of document structure and presentation through style sheets, providing solutions to issues with HTML formatting. The lecture covers the CSS box model and methods of inserting CSS like internal, external and inline styles.

    Original Description:

    Original Title

    Lecture 4

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    This document summarizes a lecture on web content presentation using CSS. It introduces CSS and its evolution from HTML formatting. CSS allows separation of document structure and presentation through style sheets, providing solutions to issues with HTML formatting. The lecture covers the CSS box model and methods of inserting CSS like internal, external and inline styles.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    6 views40 pages

    CS 341 - Web Technologies: Lecture 4:-Web Content Presentation (CSS Essentials)

    Uploaded by

    Fatima Mohammed
    This document summarizes a lecture on web content presentation using CSS. It introduces CSS and its evolution from HTML formatting. CSS allows separation of document structure and presentation through style sheets, providing solutions to issues with HTML formatting. The lecture covers the CSS box model and methods of inserting CSS like internal, external and inline styles.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 40

    CS 341 - Web

    Technologies

    David Ebo
    Adjepon-Yamoah,
    FI: Agatha Maison

    Web Content
    CS 341 - Web Technologies Presentation: CSS
    Evolution of HTML
    Formatting
    Lecture 4:- Web Content Presentation (CSS Essentials) The Solution:
    Cascading Style
    Sheets (CSS)
    CSS Box Model

    David Ebo Adjepon-Yamoah1 FI: Agatha Maison1

    1 Departmentof Computer Science


    Ashesi University College

    September 7th, 2017


    CS 341 - Web
    Outline Technologies

    David Ebo
    Adjepon-Yamoah,
    FI: Agatha Maison

    Web Content
    Presentation: CSS
    Evolution of HTML
    Formatting
    The Solution:
    Cascading Style
    Sheets (CSS)
    CSS Box Model
    Web Content Presentation: CSS
    Evolution of HTML Formatting
    The Solution: Cascading Style Sheets (CSS)
    CSS Box Model
    CS 341 - Web
    Outline Technologies

    David Ebo
    Adjepon-Yamoah,
    FI: Agatha Maison

    Web Content
    Presentation: CSS
    Evolution of HTML
    Formatting
    The Solution:
    Cascading Style
    Sheets (CSS)
    CSS Box Model
    Web Content Presentation: CSS
    Evolution of HTML Formatting
    The Solution: Cascading Style Sheets (CSS)
    CSS Box Model
    CS 341 - Web
    Evolution of HTML Formatting Technologies

    Evolution David Ebo


    Adjepon-Yamoah,
    FI: Agatha Maison

    Web Content
    Presentation: CSS
    Evolution of HTML
    Formatting
    The Solution:
    Cascading Style
    Sheets (CSS)
    CSS Box Model
    CS 341 - Web
    Outline Technologies

    David Ebo
    Adjepon-Yamoah,
    FI: Agatha Maison

    Web Content
    Presentation: CSS
    Evolution of HTML
    Formatting
    The Solution:
    Cascading Style
    Sheets (CSS)
    CSS Box Model
    Web Content Presentation: CSS
    Evolution of HTML Formatting
    The Solution: Cascading Style Sheets (CSS)
    CSS Box Model
    CS 341 - Web
    The Solution Technologies

    Cascading Style Sheets (CSS) David Ebo


    Adjepon-Yamoah,
    FI: Agatha Maison

    Web Content
    Presentation: CSS
    Evolution of HTML
    Formatting
    The Solution:
    Cascading Style
    Sheets (CSS)
    CSS Box Model
    CS 341 - Web
    Cascading Style Sheets (CSS) Technologies

    Example David Ebo


    Adjepon-Yamoah,
    FI: Agatha Maison

    Web Content
    Presentation: CSS
    Evolution of HTML
    Formatting
    The Solution:
    Cascading Style
    Sheets (CSS)
    CSS Box Model
    CS 341 - Web
    Cascading Style Sheets (CSS) Technologies

    Why CSS? David Ebo


    Adjepon-Yamoah,
    FI: Agatha Maison

    Web Content
    Presentation: CSS
    Evolution of HTML
    Formatting
    The Solution:
    Cascading Style
    Sheets (CSS)
    CSS Box Model
    CS 341 - Web
    Cascading Style Sheets (CSS) Technologies

    Enough Talk!...Real Deal David Ebo


    Adjepon-Yamoah,
    FI: Agatha Maison

    Web Content
    Presentation: CSS
    Evolution of HTML
    Formatting
    The Solution:
    Cascading Style
    Sheets (CSS)
    CSS Box Model
    CS 341 - Web
    Cascading Style Sheets (CSS) Technologies

    David Ebo
    Adjepon-Yamoah,
    FI: Agatha Maison

    Web Content
    Presentation: CSS
    Evolution of HTML
    Formatting
    The Solution:
    Cascading Style
    Sheets (CSS)
    CSS Box Model
    CS 341 - Web
    Cascading Style Sheets (CSS) Technologies

    (1) Internal CSS David Ebo


    Adjepon-Yamoah,
    FI: Agatha Maison

    Web Content
    Presentation: CSS
    Evolution of HTML
    Formatting
    The Solution:
    Cascading Style
    Sheets (CSS)
    CSS Box Model
    CS 341 - Web
    Cascading Style Sheets (CSS) Technologies

    (2) External CSS David Ebo


    Adjepon-Yamoah,
    FI: Agatha Maison

    Web Content
    Presentation: CSS
    Evolution of HTML
    Formatting
    The Solution:
    Cascading Style
    Sheets (CSS)
    CSS Box Model
    CS 341 - Web
    Cascading Style Sheets (CSS) Technologies

    (2) External CSS Alternative David Ebo


    Adjepon-Yamoah,
    FI: Agatha Maison

    Web Content
    Presentation: CSS
    Evolution of HTML
    Formatting
    The Solution:
    Cascading Style
    Sheets (CSS)
    CSS Box Model
    CS 341 - Web
    Cascading Style Sheets (CSS) Technologies

    (3) Inline CSS David Ebo


    Adjepon-Yamoah,
    FI: Agatha Maison

    Web Content
    Presentation: CSS
    Evolution of HTML
    Formatting
    The Solution:
    Cascading Style
    Sheets (CSS)
    CSS Box Model
    CS 341 - Web
    Cascading Style Sheets (CSS) Technologies

    CSS Selectors David Ebo


    Adjepon-Yamoah,
    FI: Agatha Maison

    Web Content
    Presentation: CSS
    Evolution of HTML
    Formatting
    The Solution:
    Cascading Style
    Sheets (CSS)
    CSS Box Model
    CS 341 - Web
    Cascading Style Sheets (CSS) Technologies

    Class Selectors David Ebo


    Adjepon-Yamoah,
    FI: Agatha Maison

    Web Content
    Presentation: CSS
    Evolution of HTML
    Formatting
    The Solution:
    Cascading Style
    Sheets (CSS)
    CSS Box Model
    CS 341 - Web
    Cascading Style Sheets (CSS) Technologies

    ID Selectors David Ebo


    Adjepon-Yamoah,
    FI: Agatha Maison

    Web Content
    Presentation: CSS
    Evolution of HTML
    Formatting
    The Solution:
    Cascading Style
    Sheets (CSS)
    CSS Box Model
    CS 341 - Web
    Cascading Style Sheets (CSS) Technologies

    Selector Syntax David Ebo


    Adjepon-Yamoah,
    FI: Agatha Maison

    Web Content
    Presentation: CSS
    Evolution of HTML
    Formatting
    The Solution:
    Cascading Style
    Sheets (CSS)
    CSS Box Model
    CS 341 - Web
    Cascading Style Sheets (CSS) Technologies

    Combining Selectors David Ebo


    Adjepon-Yamoah,
    FI: Agatha Maison

    Web Content
    Presentation: CSS
    Evolution of HTML
    Formatting
    The Solution:
    Cascading Style
    Sheets (CSS)
    CSS Box Model
    CS 341 - Web
    Cascading Style Sheets (CSS) Technologies

    Conflicting CSS David Ebo


    Adjepon-Yamoah,
    FI: Agatha Maison

    Web Content
    Presentation: CSS
    Evolution of HTML
    Formatting
    The Solution:
    Cascading Style
    Sheets (CSS)
    CSS Box Model
    CS 341 - Web
    Cascading Style Sheets (CSS) Technologies

    Specificity Calculator David Ebo


    Adjepon-Yamoah,
    FI: Agatha Maison

    Web Content
    Presentation: CSS
    Evolution of HTML
    Formatting
    The Solution:
    Cascading Style
    Sheets (CSS)
    CSS Box Model
    CS 341 - Web
    Cascading Style Sheets (CSS) Technologies

    CSS Measurement Units David Ebo


    Adjepon-Yamoah,
    FI: Agatha Maison

    Web Content
    Presentation: CSS
    Evolution of HTML
    Formatting
    The Solution:
    Cascading Style
    Sheets (CSS)
    CSS Box Model
    CS 341 - Web
    Cascading Style Sheets (CSS) Technologies

    CSS Colours David Ebo


    Adjepon-Yamoah,
    FI: Agatha Maison

    Web Content
    Presentation: CSS
    Evolution of HTML
    Formatting
    The Solution:
    Cascading Style
    Sheets (CSS)
    CSS Box Model
    CS 341 - Web
    Cascading Style Sheets (CSS) Technologies

    Pseudo CSS Elements/Tags David Ebo


    Adjepon-Yamoah,
    FI: Agatha Maison

    Web Content
    Presentation: CSS
    Evolution of HTML
    Formatting
    The Solution:
    Cascading Style
    Sheets (CSS)
    CSS Box Model
    CS 341 - Web
    Cascading Style Sheets (CSS) Technologies

    Pseudo CSS Classes David Ebo


    Adjepon-Yamoah,
    FI: Agatha Maison

    Web Content
    Presentation: CSS
    Evolution of HTML
    Formatting
    The Solution:
    Cascading Style
    Sheets (CSS)
    CSS Box Model
    CS 341 - Web
    Outline Technologies

    David Ebo
    Adjepon-Yamoah,
    FI: Agatha Maison

    Web Content
    Presentation: CSS
    Evolution of HTML
    Formatting
    The Solution:
    Cascading Style
    Sheets (CSS)
    CSS Box Model
    Web Content Presentation: CSS
    Evolution of HTML Formatting
    The Solution: Cascading Style Sheets (CSS)
    CSS Box Model
    CS 341 - Web
    CSS Box Model Technologies

    CSS Box Model - Simplified Perspective David Ebo


    Adjepon-Yamoah,
    FI: Agatha Maison

    Web Content
    Presentation: CSS
    Evolution of HTML
    Formatting
    The Solution:
    Cascading Style
    Sheets (CSS)
    CSS Box Model
    CS 341 - Web
    CSS Box Model Technologies

    Border David Ebo


    Adjepon-Yamoah,
    FI: Agatha Maison

    Web Content
    Presentation: CSS
    Evolution of HTML
    Formatting
    The Solution:
    Cascading Style
    Sheets (CSS)
    CSS Box Model
    CS 341 - Web
    CSS Box Model Technologies

    Margin David Ebo


    Adjepon-Yamoah,
    FI: Agatha Maison

    Web Content
    Presentation: CSS
    Evolution of HTML
    Formatting
    The Solution:
    Cascading Style
    Sheets (CSS)
    CSS Box Model
    CS 341 - Web
    CSS Box Model Technologies

    Border David Ebo


    Adjepon-Yamoah,
    FI: Agatha Maison

    Web Content
    Presentation: CSS
    Evolution of HTML
    Formatting
    The Solution:
    Cascading Style
    Sheets (CSS)
    CSS Box Model
    CS 341 - Web
    CSS Box Model Technologies

    Shorthand Declarations David Ebo


    Adjepon-Yamoah,
    FI: Agatha Maison

    Web Content
    Presentation: CSS
    Evolution of HTML
    Formatting
    The Solution:
    Cascading Style
    Sheets (CSS)
    CSS Box Model
    CS 341 - Web
    CSS Box Model Technologies

    Width & Height David Ebo


    Adjepon-Yamoah,
    FI: Agatha Maison

    Web Content
    Presentation: CSS
    Evolution of HTML
    Formatting
    The Solution:
    Cascading Style
    Sheets (CSS)
    CSS Box Model
    CS 341 - Web
    CSS Box Model Technologies

    Background David Ebo


    Adjepon-Yamoah,
    FI: Agatha Maison

    Web Content
    Presentation: CSS
    Evolution of HTML
    Formatting
    The Solution:
    Cascading Style
    Sheets (CSS)
    CSS Box Model
    CS 341 - Web
    CSS Box Model Technologies

    Background Images David Ebo


    Adjepon-Yamoah,
    FI: Agatha Maison

    Web Content
    Presentation: CSS
    Evolution of HTML
    Formatting
    The Solution:
    Cascading Style
    Sheets (CSS)
    CSS Box Model
    CS 341 - Web
    CSS Box Model Technologies

    Placing Background Images David Ebo


    Adjepon-Yamoah,
    FI: Agatha Maison

    Web Content
    Presentation: CSS
    Evolution of HTML
    Formatting
    The Solution:
    Cascading Style
    Sheets (CSS)
    CSS Box Model
    CS 341 - Web
    CSS Box Model Technologies

    Content Overflow David Ebo


    Adjepon-Yamoah,
    FI: Agatha Maison

    Web Content
    Presentation: CSS
    Evolution of HTML
    Formatting
    The Solution:
    Cascading Style
    Sheets (CSS)
    CSS Box Model
    CS 341 - Web
    CSS Box Model Technologies

    Display and Visibility David Ebo


    Adjepon-Yamoah,
    FI: Agatha Maison

    Web Content
    Presentation: CSS
    Evolution of HTML
    Formatting
    The Solution:
    Cascading Style
    Sheets (CSS)
    CSS Box Model
    CS 341 - Web
    CSS Box Model Technologies

    Display and Visibility David Ebo


    Adjepon-Yamoah,
    FI: Agatha Maison

    Web Content
    Presentation: CSS
    Evolution of HTML
    Formatting
    The Solution:
    Cascading Style
    Sheets (CSS)
    CSS Box Model
    CS 341 - Web
    CSS Box Model Technologies

    Possibilities of Positioning David Ebo


    Adjepon-Yamoah,
    FI: Agatha Maison

    Web Content
    Presentation: CSS
    Evolution of HTML
    Formatting
    The Solution:
    Cascading Style
    Sheets (CSS)
    CSS Box Model
    CS 341 - Web
    Web Content Structure Technologies

    Slides Reference David Ebo


    Adjepon-Yamoah,
    FI: Agatha Maison

    Web Content
    Presentation: CSS
    Evolution of HTML
    Formatting
    The Solution:
    Cascading Style
    Sheets (CSS)
    CSS Box Model

    Reference:
    www.jiscnetskills.com
    (School of Computing Science, Newcastle University, UK)

    You might also like