CSS Basics

Overview

CSS (Cascading Style Sheets) controls the visual appearance of HTML elements. While HTML provides the structure, CSS provides the presentation - colors, fonts, layouts, and positioning.

Massive Disclaimer

There are plenty of CSS tools and addons that change how you interact with CSS such as with Bootstrap or Tailwind CSS. It's still important to know some of the CSS tags if you use these frameworks, but mostly as a way to understand what's they're doing for you since the names of the styles will change and how you apply them will change.

What is CSS?

CSS stands for Cascading Style Sheets:

Cascading: Styles can be inherited and overridden in a specific order
Style: Controls visual appearance (colors, fonts, spacing)
Sheets: External files or embedded code that contain styling rules

Important for Webserver Developers

CSS files are served to the client in the same way that HTML files are given. So all the security precautions apply to CSS file as well.

Three Ways to Apply CSS

1. Inline CSS

CSS applied directly to HTML elements using the style attribute:

<p style="color: blue; font-size: 18px;">This text is blue and 18px</p>
<div style="background-color: yellow; padding: 10px;">Yellow box with padding</div>

In the above two examples, each style is separated by each other with a ;.

The p tag has a color style set to blue and a font-size style set to 18px.

When to use:

Quick testing or debugging
One-off styling that won't be reused
Dynamic styling generated by server-side code

When NOT to use:

Production websites (hard to maintain)
Styling that needs to be applied to multiple elements

In summary, avoid using this method of styling. It's much harder to scale.

2. Internal CSS

CSS placed within <style> tags in the HTML document's <head> section:

<!DOCTYPE html>
<html>
<head>
    <title>My Page</title>
    <style>
        h1 {
            color: red;
            font-size: 24px;
        }
        
        .highlight {
            background-color: yellow;
            padding: 5px;
        }
    </style>
</head>
<body>
    <h1>This heading is red</h1>
    <p class="highlight">This paragraph has a yellow background</p>
</body>
</html>

In the above example, all h1 tags will get a color: red and font-size: 24px. But this is limited to the h1 tags on this page.

When to use:

Small websites with limited styling
Page-specific styles that won't be reused
Quick prototypes or demos

When NOT to use:

Large websites (hard to maintain)
Styles that need to be shared across multiple pages

3. External CSS

CSS placed in separate .css files and linked to HTML documents:

styles.css:

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 20px;
}

.header {
    background-color: #333;
    color: white;
    padding: 10px;
}

.content {
    max-width: 800px;
    margin: 0 auto;
}

index.html:

<!DOCTYPE html>
<html>
<head>
    <title>My Page</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="header">My Website</div>
    <div class="content">Main content goes here</div>
</body>
</html>

This follows a similar format to the internal CSS, but instead of having the style rules in a style tag you have the style rules in an external file that you import with a <link>.

When to use:

Production websites (recommended)
Styles shared across multiple pages
Large projects with extensive styling

Best Practice for Webserver Developers

Always use external CSS files for production websites when possible. This makes your code more maintainable, allows for better caching, and separates content from presentation.

CSS Priority System (Cascade and Specificity)

When multiple CSS rules target the same element, CSS follows a priority system to determine which style gets applied:

Priority Order (Highest to Lowest):

Inline CSS (highest priority)
Internal CSS
External CSS (lowest priority)

Example:

external.css:

p { color: blue; }

HTML with internal CSS:

<head>
    <link rel="stylesheet" href="external.css">
    <style>
        p { color: red; }
    </style>
</head>
<body>
    <p style="color: green;">What color will this text be?</p>
</body>

Result: The text will be green because inline CSS has the highest priority.

inline > style tag > external file

Specificity Rules

When styles have the same source, CSS uses specificity to determine priority:

ID selectors (highest specificity)
Class selectors
Element selectors (lowest specificity)

Example:

p { color: blue; }           /* Element selector */
.highlight { color: red; }   /* Class selector */
#special { color: green; }   /* ID selector */

<p class="highlight" id="special">What color will this be?</p>

Result: The text will be green because ID selectors have higher specificity than class or element selectors.

id > class > tag

Cascade vs Specificity

Cascade (source) always beats specificity. Even if an external CSS file has an ID selector, inline CSS with just an element selector will still win.

Example:

/* external.css */
#special { color: blue; }

<p id="special" style="color: red;">What color will this be?</p>

Result: The text will be red because inline CSS (cascade) beats the ID selector (specificity).

Important for Webserver Developers

Understanding CSS priority helps you debug styling issues and ensures your styles are applied correctly. When styles aren't working as expected, check if they're being overridden by higher-priority rules. Remember: cascade (source) always beats specificity.

CSS Syntax

CSS follows a specific syntax:

selector {
    property: value;
    property: value;
}

Example:

h1 {
    color: blue;
    font-size: 24px;
    margin-bottom: 10px;
}

Selector: Targets HTML elements (h1, .class, #id)
Property: What you want to style (color, font-size, margin)
Value: How you want to style it (blue, 24px, 10px)

CSS Selectors

Basic Selectors

Element Selector - Targets HTML elements

h1 { color: blue; }
p { font-size: 16px; }

In this example, the CSS is targeting the h1 tag to apply color:blue and the p tag with font-size: 16px. This style rule will apply to all of those tags in whichever HTML page that uses the stylesheet.

Class Selector - Targets elements with specific class

.highlight { background-color: yellow; }
.button { padding: 10px; }

A "class" is an attribute of any tag that you can add in. For example:
<div class="highlight">Hello There</div>
The above div has a class "highlight" which is targeted by the css rule to give a background-color: yellow.

The same class can be on multiple elements and those elements do not need to be the same tag.

ID Selector - Targets element with specific ID

#header { background-color: #333; }
#main-content { max-width: 800px; }

Like classes, an ID is an attribute of any tag.
<div id="main-content">Hello There</div>
How it differs is IDs should be unique. No two tags should have the same ID.

Combining Selectors

Descendant Selector - Targets elements inside other elements

.header h1 { color: white; }
.content p { margin-bottom: 15px; }

.header h1 targets any h1 that is inside an element with class "header". For example:

<div class="header">
    <h1>This h1 will be white</h1>
    <div>
        <h1>This h1 will also be white (nested inside)</h1>
    </div>
</div>

Child Selector - Targets direct children only

.nav > li { display: inline-block; }

This targets only li elements that are direct children of an element with class "nav". For example:

<ul class="nav">
    <li>This li will be inline-block</li>
    <li>This li will also be inline-block</li>
    <div>
        <li>This li will NOT be affected (not a direct child)</li>
    </div>
</ul>

Common Layout and Positioning CSS

Display Properties

display: block - Takes full width, starts on new line

div {
    display: block; /* Default for div, p, h1, etc. */
}

display: inline - Takes only needed width, stays on same line

span {
    display: inline; /* Default for span, a, strong, etc. */
}

display: inline-block - Combines block and inline properties

.button {
    display: inline-block;
    width: 100px;
    height: 40px;
}

This makes elements behave like inline elements (stay on the same line) but allows you to set width and height like block elements. For example:
<div class="button">Button 1</div>
<div class="button">Button 2</div>
<div class="button">Button 3</div>
All three buttons will appear on the same line, each with a width of 100px and height of 40px.

display: flex - Creates flexible layout container

.container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

Positioning

position: static - Default positioning (normal document flow)

.element {
    position: static; /* Default value */
}

position: relative - Positioned relative to its normal position

.element {
    position: relative;
    top: 10px;
    left: 20px;
}

position: absolute - Positioned relative to nearest positioned parent

.element {
    position: absolute;
    top: 0;
    right: 0;
}

position: fixed - Positioned relative to viewport (stays in place when scrolling)

.navbar {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000;
}

Box Model Properties

Margin - Space outside the element (distance between element and other things)

.element {
    margin: 10px; /* All sides */
    margin-top: 20px; /* Specific side */
    margin: 10px 20px; /* Top/bottom, left/right */
    margin: 10px 20px 30px 40px; /* Top, right, bottom, left */
}

Padding - Space inside the element (distance between outside edge of element and things inside of it)

.element {
    padding: 15px; /* All sides */
    padding-left: 25px; /* Specific side */
}

Border - Line around the element

.element {
    border: 2px solid black; /* width, style, color */
    border-radius: 5px; /* Rounded corners */
}

Width and Height

.element {
    width: 300px;
    height: 200px;
    max-width: 100%; /* Responsive width */
}

Common Layout Patterns

Centering Content

/* Center block element */
.container {
    width: 800px;
    margin: 0 auto; /* Centers horizontally */
}

/* Center text */
.text-center {
    text-align: center;
}

Two-Column Layout

.sidebar {
    width: 200px;
    float: left;
}

.main-content {
    margin-left: 220px; /* 200px + 20px gap */
}

Flexbox Layout

.flex-container {
    display: flex;
    justify-content: space-between; /* Distribute space */
    align-items: center; /* Vertical alignment */
}

.flex-item {
    flex: 1; /* Grow to fill available space */
}

Best Practices for Webserver Developers

1. Use External CSS Files

Separate content from presentation
Better caching and performance
Easier maintenance

2. Use Semantic Class Names

/* Good */
.header { }
.navigation { }
.main-content { }

/* Avoid */
.red-box { }
.big-text { }
.left-side { }

3. Mobile-First Design

/* Start with mobile styles */
.container {
    width: 100%;
    padding: 10px;
}

/* Add larger screen styles */
@media (min-width: 768px) {
    .container {
        width: 800px;
        margin: 0 auto;
        padding: 20px;
    }
}

The @media (min-width: 768px) means "apply these styles only when the screen width is 768 pixels or wider." This allows you to have different styles for mobile devices (under 768px) and larger screens (768px and above).


### 4. Use CSS Reset or Normalize
```css
/* Basic reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

Common CSS Issues

My CSS isn't showing up?

Common culprits:

Mistyped css property name or value.
Other CSS with higher priority is overwriting.

I can't get this damn element centered!

Common culprits:

Using text-align: center on block elements (only works for inline content)
Forgetting to set a width on the element you're trying to center
Using margin: 0 auto on inline elements (doesn't work)
Parent element doesn't have enough width for the centering to be visible

Solutions:

/* Center block elements horizontally */
.block-element {
    width: 300px; /* Must have a defined width */
    margin: 0 auto; /* Centers horizontally */
}

/* Center inline content */
.text-center {
    text-align: center; /* Works for text and inline elements */
}

/* Center with flexbox (modern approach) */
.flex-center {
    display: flex;
    justify-content: center; /* Horizontal centering */
    align-items: center; /* Vertical centering */
}

HTML Examples:

<!-- Block element centering -->
<div class="block-element">This div will be centered horizontally</div>

<!-- Text/inline content centering -->
<div class="text-center">
    <p>This text will be centered</p>
    <span>This span will also be centered</span>
</div>

<!-- Flexbox centering -->
<div class="flex-center" style="height: 200px;">
    <div>This content will be centered both horizontally and vertically</div>
</div>

Next Steps

Now that you understand CSS basics, you can start styling your HTML content. Practice with different selectors, properties, and layout techniques to get a handle on how these two systems interact with each other.

For this class you will not be expected to be experts with HTML and CSS, but a certain amount of knowledge will be needed to understand how to properly serve the client the right information.