Week 3 – Advanced CSS and Layout Techniques – Vieira

What is an External Style Sheet?

CSS file linked to HTML for styling
Helps define all the styles for a website and can easily update all pages from one place vs every page

How to link

<head> <title>My Website</title> <link rel="stylesheet" href="css/style.css"> </head>

Layout Control with Organizational Tags

To achieve better control over your layout, it’s helpful to group similar types of content together using organizational tags such as <header>, <article>, <nav>, <footer>, and <div>.

For example, the most important information is typically found within the <header> of a page. (Note: <header>, <head>, and <h1> serve different purposes.)

<!doctype HTML>
<html>
<head>
    <title>Page Title</title>
    <style>/* CSS rules */</style>
</head>
<body>
    <header>
        <h1>My Biggest Headline</h1>
        <h2>My Subhead</h2>
        <p>Some copy</p>
        <p>More copy</p>
    </header>
    <article>
        <h2>My Subhead</h2>
        <p>Some copy</p>
        <p>More copy</p>
    </article>
</body>
</html>

*This structure helps organize your content for clarity and accessibility.

Custom CSS Selectors and Positioning

With CSS, you can style not only existing HTML elements but also create your own selectors, known as “class” and “id,” which can be applied to any HTML element.

ID Selector:

Defined with a # symbol and uses the id attribute in HTML.
Example CSS rule:

#big_red_text {
    font-size: 72px;
    color: red;
    font-family: Verdana;
}

Applied to a single paragraph:

<p id="big_red_text">Some big red text</p>
<p>Some text that looks like all of my other paragraphs</p>

Note: IDs must be unique and used only once in your HTML document.