It seems like you are using an ad blocker. To enhance your experience and support our website, please consider:

  1. Signing in to disable ads on our site.
  2. Sign up if you don't have an account yet.
  3. Or, disable your ad blocker by doing this:
    • Click on the ad blocker icon in your browser's toolbar.
    • Select "Pause on this site" or a similar option for lancecourse.com.

LCC: Web Apps Development Essentials

Course by zooboole,

Last Updated on 2024-09-05 14:50:08

Day 8: Introduction to CSS

Quiz ahead

In this lesson, we’ll explore the fundamentals of CSS (Cascading Style Sheets), a crucial technology for designing web pages. While HTML structures a web document, CSS is responsible for how it looks. We’ll walk through how the browser interprets HTML and CSS, the different types of HTML elements, and the key concepts in writing CSS rules to style your content.

1. Understanding How the Browser Renders HTML

The browser is the engine that reads your HTML code and displays it on the screen. It follows a specific order to render HTML elements. First, it reads the structure and determines the size and position of each element before applying any styling.

Two main types of HTML elements are rendered differently:

Block Elements: These occupy the entire width of their container, stacking vertically. Examples include <div>, <h1>, <p>, and <section>. These elements create "blocks" that take up the full width of the page unless otherwise specified.

Inline Elements: These only take up as much width as their content needs, and they can sit next to other inline elements. Examples include <span>, <a>, <img>, and <em>. Inline elements flow along the same line.

Understanding how elements are displayed by default helps you know what to expect when building the layout of a page, and why you need CSS to design it.

2. Why We Care About Design

While HTML structures a document’s content, it’s reduced to just this functional purpose. To add visual design, CSS comes into play. This distinction allows developers to focus on content with HTML and styling with CSS, separating structure from aesthetics.

3. Ways to Combine HTML and CSS

There are several ways to integrate CSS with HTML:

* Inline CSS:** CSS rules are added directly within the HTML element using the style attribute. Example: <p style="color: blue;">This text is blue.</p>

* Embedded (Internal) CSS:** CSS is placed inside a <style> tag within the HTML document’s <head>.

Example:

<style>
  p { color: blue; }
</style>

* External CSS:** CSS is stored in a separate file with a .css extension and linked to the HTML document via a <link> tag in the <head>.

Example:

<head>
    <link rel="stylesheet" href="styles.css">
</head>

4. Anatomy of a CSS Rule

A CSS rule consists of two parts:

* Selector:** Identifies which HTML element(s) the rule applies to.

* Declaration:* Describes how to style the selected element(s). Declarations consist of property-value* pairs.

Example:

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

In the above example, the selector p targets all <p> tags, and the declarations set the text color to blue and the font size to 16 pixels.

5. Selectors in CSS

CSS selectors are powerful tools that help you target HTML elements in different ways. Here are some common selectors:

- Type Selector: Selects elements by their tag name.

Example: p { color: blue; } targets all <p> elements.

- Grouping Selector: Applies the same style to multiple elements by separating them with commas.

Example: h1, h2, h3 { color: green; } targets all <h1>, <h2>, and <h3> elements.

- Universal Selector: Targets all elements on the page.

Example: * { margin: 0; padding: 0; } removes margin and padding from all elements.

- Class Selector: Targets elements with a specific class attribute. Example: .intro { color: red; } targets any element with class="intro".

- ID Selector: Targets a single element with a unique ID attribute.

Example: #header { background-color: gray; } targets the element with id="header".

6. Combining Multiple Rules in a CSS Class

In CSS, you can apply multiple rules to a single class. For instance, a class can define multiple aspects of an element’s appearance, such as color, font size, and margins

Example:

.intro {
  color: blue;
  font-size: 20px;
  margin-bottom: 15px;
}

Here, the .intro class applies three different styles to the same element.

Conclusion

By now, you’ve learned how CSS works alongside HTML to style web pages. You understand the browser’s role, the difference between block and inline elements, how to integrate CSS with HTML, and the basics of writing CSS rules and using selectors. With these skills, you’re on your way to creating visually appealing web pages!

Assignment 8

With your new knowledge in CSS, style the headings, strong, lists from your project from Day 7.

Take Quiz