CSS Intro

1. HTML Structure vs.
CSS Style: Separation of Concerns
• HTML provides the structure and content of your webpage (headings, paragraphs,
images, etc.).
• CSS styles the appearance of that content (colors, fonts, layouts, animations).
This separation allows for:
• Maintainability: Easily change styles across multiple pages without altering content.
• Clarity: Code becomes more organized and readable.
• Reusability: Create styles once and apply them to various elements.
2. History of CSS and the Need for Styling
• Before CSS, styling was directly embedded in HTML using tags like <font> and <center>.
• This made pages inflexible and difficult to maintain.
• CSS arose in the mid-1990s to separate style from structure.
3. Other Styling Languages (Preprocessors):
• While CSS is the core styling language, preprocessors like SASS and LESS offer additional
features:
• Variables: Store values and reuse them throughout your styles.
• Nesting: Indent code to create more readable, hierarchical structures.
• Mixins: Define reusable blocks of styles.
• Functions: Perform calculations and manipulations within styles.
These preprocessors compile into regular CSS before being used by the browser.
4. Adding CSS to your page:
There are three main ways to add CSS to your HTML:
a) Inline Styles:
• Use the style attribute within HTML elements.
• Example: <h1 style="color: red">This is a red heading</h1>
• Pros: Quick and easy for small changes.
• Cons: Not maintainable for large websites, clutters HTML code.
b) Internal Styles:
• Define styles within a <style> tag in the <head> section of your HTML.
• Example:
<head>
<style>
h1 {
color: blue;
}
p {
font-size: 16px;
}
</style>
</head>
• Pros: More organized than inline styles, applies to all elements on the page.
• Cons: Still embedded in HTML, not reusable across multiple pages.
c) External Styles:
• Create a separate .css file and link it to your HTML using the <link> tag in the <head>
section.
• Example:
<head>
<link rel="stylesheet" href="style.css">
</head>
• Pros: Most recommended approach, highly reusable, styles kept separate from HTML.
• Cons: Requires creating an extra file, initial setup might be less intuitive.
5. CSS Syntax:
• Properties: Define an aspect of an element's appearance (e.g., color, font-size, margin).

• Values: Set the specific value for a property (e.g., red, 18px, 10px).
• Example: Example: h1 { color: red; font-size: 24px; }
Common Properties:
• color: Text color.
• font-family: Font type.
• font-size: Text size.
• background-color: Background color.
• margin: Spacing around elements.
• padding: Spacing inside elements.
6. CSS Selectors:
• Target specific elements in your HTML to apply styles.
Basic Selectors:
• tag: Selects all elements of a specific tag (e.g., h1, p).

• class: Selects elements with a specific class name (e.g., .my-class).
• id: Selects the element with a unique ID (e.g., #unique-id).
• Other type of selectors such as attribute selectors
Combined Selectors:
• Combine selectors to target specific groups of elements (e.g., h1.special, p:first-child).

Now that we are familiar with the basics of CSS, let's get deeper into the world of selectors. These
powerful tools allow us to precisely target specific elements on your web page and apply unique
styles.
7. Detailed CSS Selectors:

• Tag Selectors: Target elements based on their HTML tag (e.g., h1, p, li).
o Example: h1 { color: blue; } (All h1 headings will be blue)
• Class Selectors: Target elements with a specific class name applied in their HTML (using
the .class-name syntax).
o Example: .special-button { background-color: green; } (All elements with the class
special-button will have a green background)
• Id Selectors: Target a unique element using its HTML ID (preceded by #). IDs must be
unique within the page.
o Example: #unique-id { font-size: 30px; } (Only the element with the ID unique-id
will have a font size of 30px)
• Attribute Selectors: Target elements based on their attributes and their values.
o Example: [href^="https"] { color: purple; } (All elements with an href attribute
starting with "https" will have purple text)
• Pseudo-Classes: Target elements based on their state or position within the document
structure.
o Example: a:hover { text-decoration: underline; } (Links will gain an underline when
hovered over)
• Pseudo-Elements: Target specific parts of an element.
o Example: h1::first-letter { color: red; } (Only the first letter of every h1 heading will
be red)
8. Tag Selectors with Examples:
• p: Selects all <p> paragraphs.
• div: Selects all <div> elements.
• img: Targets all <img> images.
• h1, h2, h3: Targets headings from h1 to h3.
9. Class Selectors with Examples:
• .important: Targets any element with the class important.
• .button: Targets all elements with the class button.
• .error-message: Targets elements with the class error-message.
10. ID Selectors with Examples:
• #main-navigation: Targets the element with the ID main-navigation.
• #footer: Targets the element with the ID footer.
• #product-123: Targets the element with the ID product-123.
11. Attribute Selectors with Examples:
• [title="Learn CSS"]: Targets elements with a title attribute of "Learn CSS".
• [data-type="image"]: Targets elements with a data-type attribute of "image".
• input[type="text"]: Targets all <input> elements with a type of "text".
12. Combined Selectors:
You can combine selectors using commas, spaces, and child combinators to create more specific
targets:
• h1.large: Targets h1 elements with the class large.

• p:first-child: Targets the first <p> element within its parent element.
• .menu li a: Targets all <a> elements within <li> elements inside the element with the class
menu.
Remember: Specificity rules determine which style applies when multiple selectors target the
same element. A more specific selector (e.g., #unique-id) will override a less specific one (e.g., p).
Resouces for Detailed Help on CSS:
• List of CSS Properties at https://www.w3schools.com/cssref/index.php

• List of CSS Selectors with examples at
https://www.w3schools.com/cssref/css_selectors.php
• Browser Support for CSS at
https://www.w3schools.com/cssref/css3_browsersupport.php
• CSS Cheat Sheet by CodeWithHarry at https://www.codewithharry.com/blogpost/css-
cheatsheet/

CSS Intro

Uploaded by

Copyright:

Available Formats

CSS Intro

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

CSS Intro

Uploaded by

Copyright:

Available Formats

1. HTML Structure vs.

CSS Style: Separation of Concerns

This separation allows for:

2. History of CSS and the Need for Styling

3. Other Styling Languages (Preprocessors):

4. Adding CSS to your page:

There are three main ways to add CSS to your HTML:

• Properties: Define an aspect of an element's appearance (e.g., color, font-size, margin).

• Target specific elements in your HTML to apply styles.

• tag: Selects all elements of a specific tag (e.g., h1, p).

• Combine selectors to target specific groups of elements (e.g., h1.special, p:first-child).

7. Detailed CSS Selectors:

• h1.large: Targets h1 elements with the class large.

Resouces for Detailed Help on CSS:

• List of CSS Properties at https://www.w3schools.com/cssref/index.php

You might also like