Last Updated: 

City College of San Francisco: Mastering HTML and CSS

The City College of San Francisco (CCSF) offers a rich curriculum in web development, where HTML (Hypertext Markup Language) and CSS (Cascading Style Sheets) are fundamental building blocks. HTML is used to structure the content of a web page, while CSS is responsible for styling that content, making it visually appealing. This blog will explore the fundamental concepts, usage methods, common practices, and best practices of HTML and CSS as taught at CCSF.

Table of Contents#

  1. Fundamental Concepts
  2. Usage Methods
  3. Common Practices
  4. Best Practices
  5. Conclusion
  6. References

Fundamental Concepts#

HTML#

HTML uses tags to define the structure of a web page. Tags are enclosed in angle brackets (<>). For example, the <html> tag is the root tag of an HTML document, and it has an opening tag (<html>) and a closing tag (</html>).

<!DOCTYPE html>
<html>
<head>
    <title>My First Web Page</title>
</head>
<body>
    <h1>Welcome to My Web Page</h1>
    <p>This is a paragraph of text.</p>
</body>
</html>

In this example:

  • <!DOCTYPE html> declares the document type as HTML5.
  • The <head> section contains metadata about the page, such as the title.
  • The <body> section contains the visible content of the page, including a heading (<h1>) and a paragraph (<p>).

CSS#

CSS is used to style HTML elements. It can be applied in three ways: inline, internal, and external.

Inline CSS#

Inline CSS is applied directly to an HTML element using the style attribute.

<p style="color: blue; font-size: 16px;">This is a blue paragraph with a font size of 16px.</p>

Internal CSS#

Internal CSS is placed in the <style> tag within the <head> section of an HTML document.

<!DOCTYPE html>
<html>
<head>
    <style>
        p {
            color: green;
            font-size: 14px;
        }
    </style>
</head>
<body>
    <p>This is a green paragraph with a font size of 14px.</p>
</body>
</html>

External CSS#

External CSS is stored in a separate .css file and linked to the HTML document using the <link> tag.

style.css

p {
    color: red;
    font-size: 18px;
}

index.html

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <p>This is a red paragraph with a font size of 18px.</p>
</body>
</html>

Usage Methods#

HTML#

  • Creating Lists: HTML supports ordered (<ol>) and unordered (<ul>) lists.
<h2>Ordered List</h2>
<ol>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ol>
 
<h2>Unordered List</h2>
<ul>
    <li>Apple</li>
    <li>Banana</li>
    <li>Orange</li>
</ul>
  • Adding Images: Use the <img> tag to add images to a web page.
<img src="image.jpg" alt="A beautiful image">

CSS#

  • Selectors: CSS selectors are used to target HTML elements. Common selectors include element selectors, class selectors, and ID selectors.
/* Element selector */
h2 {
    color: purple;
}
 
/* Class selector */
.my-class {
    background-color: yellow;
}
 
/* ID selector */
#my-id {
    border: 1px solid black;
}
  • Box Model: The box model consists of content, padding, border, and margin.
div {
    width: 200px;
    padding: 20px;
    border: 1px solid gray;
    margin: 10px;
}

Common Practices#

HTML#

  • Semantic HTML: Use semantic tags like <header>, <nav>, <main>, <article>, <section>, and <footer> to improve the structure and accessibility of a web page.
<header>
    <h1>My Website</h1>
    <nav>
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </nav>
</header>
<main>
    <article>
        <h2>Article Title</h2>
        <p>Article content goes here.</p>
    </article>
</main>
<footer>
    <p>&copy; 2024 My Website</p>
</footer>

CSS#

  • Responsive Design: Use media queries to make a web page responsive on different devices.
@media screen and (max-width: 600px) {
    body {
        font-size: 12px;
    }
}

Best Practices#

HTML#

  • Proper Indentation: Indent HTML code to improve readability.
<!DOCTYPE html>
<html>
    <head>
        <title>Well - Indented Page</title>
    </head>
    <body>
        <h1>Hello, World!</h1>
    </body>
</html>
  • Validate HTML: Use online validators like the W3C Markup Validation Service to ensure your HTML code is error-free.

CSS#

  • Separation of Concerns: Keep HTML for structure and CSS for styling. Avoid using too much inline CSS.
  • Minimize CSS Files: Combine and minify CSS files to reduce page load times.

Conclusion#

HTML and CSS are essential skills for web development, and the City College of San Francisco provides a solid foundation in these areas. By understanding the fundamental concepts, mastering usage methods, following common practices, and adhering to best practices, you can create well-structured, visually appealing, and responsive web pages. Remember to practice regularly and stay updated with the latest web development trends.

References#

This blog provides a comprehensive overview of HTML and CSS as taught at the City College of San Francisco. By following these guidelines, readers can enhance their web development skills and create professional-quality web pages.

2025-10