Personal tools
 

HTML and CSS

UChicago_DSCN0496
(The University of Chicago - Maya Lim)

     

    - Overview 

    HTML (HyperText Markup Language) and CSS (Cascading Style Sheets) are the fundamental technologies used to build and design everything seen on the World Wide Web. They work together as a "power couple" where HTML provides the structure and CSS provides the visual presentation. 

    1. HTML (The Structure): 

    HTML is a markup language used to define the layout and content of a web page.

    • Function: It tells the browser what the elements are, such as headings, paragraphs, images, and links.
    • Core Components: It uses tags (e.g., <h1>, <p>, <a>) and attributes to organize information into a hierarchy.
    • Evolution: The current standard is HTML5, which introduced semantic tags like <header>, <footer>, and <article> to improve accessibility and SEO.


    2. CSS (The Presentation): 

    CSS is a style sheet language used to describe how HTML elements should be rendered on screen.

    • Function: It controls the design, including colors, fonts, spacing, and layouts.
    • Key Feature: It enables responsive design, allowing websites to adapt their layout for different devices like smartphones and tablets.
    • Implementation: CSS can be applied in three ways: Inline (within an HTML element), Internal (inside a <style> tag), or External (via a separate .css file for site-wide consistency).


    3. How They Work Together: 

    In web development, these technologies are often compared to the parts of a house:

    • HTML is the structure (the walls, doors, and roof).
    • CSS is the interior design (the paint, furniture, and decorations).
    • JavaScript is typically added as a third layer to provide interactivity (the lights, heating, and smart devices).


    4. Modern Tools and Standards:

    • Preprocessors: Tools like Sass and Less allow developers to write more advanced CSS with programming logic that then compiles back to standard CSS.
    • Frameworks: Popular frameworks like Bootstrap and Tailwind CSS provide pre-designed components to speed up the development process.
    • Governance: These standards are maintained and updated by the World Wide Web Consortium (W3C) to ensure universal compatibility across all web browsers.

     

    Please refer to the following for more information:

     

    [More to come ...]


     

     

    Document Actions