Chapter 10: Getting Started with CSS

By Rohit Gawande

Welcome back, developers! In Chapter 10 of our Full Stack Web Development journey , we will be diving into CSS (Cascading Style Sheets). CSS is a powerful tool that allows us to style and design our web pages, giving them a visually appealing and polished look. This chapter is all about understanding the fundamentals of CSS and how to use it effectively.

What We'll Learn in This Chapter:

What is CSS?
Basic CSS Format
Including CSS in HTML
Color Properties
Background Color
Practice Questions
Color Systems (Names, RGB, Hex Codes)
Text Alignment
Font Weight and Text Decoration
Line Height and Letter Spacing
Units in CSS (Pixels)
Font Family
Practice Questions
Assignments

Let's jump right in!

1. What is CSS?

CSS stands for Cascading Style Sheets. It’s a language used to describe the presentation of HTML elements. CSS allows you to control the layout, colors, fonts, and other visual aspects of a webpage. Think of CSS as the tool that transforms a plain HTML page into an attractive, visually engaging website.

2. Basic CSS Format

To start using CSS, we need to understand its basic structure. The format is simple, and it allows you to style HTML elements effectively. Let’s break it down:

CSS consists of selectors, properties, and values. The structure looks like this:

selector {
    property: value;
}

What is a Selector?

A selector is used to target the HTML element you want to style. It could be a tag name, class, ID, or any other specific element you choose.

Example:

h1 {
    color: red;
}

In this example:

h1 is the selector, which targets all <h1> elements.
color is the property, and red is its value. Together, they form a property-value pair that defines the text color of the <h1> element.

Notice that each property-value pair ends with a semicolon (;), indicating that the line is complete. Multiple properties can be applied to a single selector.

Another Example:

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

Here, h1 is the selector, and it has two properties:

color with a value of blue
font-size with a value of 24px

These properties control the appearance of all <h1> elements on the page.

Important Note:

We’ll dive deeper into CSS properties and how to use them later on. For now, focus on getting familiar with this basic structure.

To explore more CSS properties, you can check out resources like MDN CSS Properties. It’s a comprehensive guide for everything CSS!

3. Including CSS in HTML

To style your HTML elements with CSS, there are three ways to include CSS in HTML:

Inline CSS: Directly in the HTML tag using the style attribute.
Internal CSS: Inside the <style> tag within the HTML file.
External CSS: In a separate CSS file linked to the HTML using the <link> tag.

3.1. Inline Styles

Inline styles involve adding CSS directly within an HTML tag using the style attribute. This method is useful for quick, one-off changes to individual elements.

Here's an example:

<h1 style="color: rgb(110, 12, 12);">Rohit Gawande</h1>

We are using colors here because it’s easy to see the effect. Inline styles apply CSS rules directly to the specific HTML element, making it quick and effective for small adjustments.

Examples:

<p style="color: rgb(110, 12, 12);">This is a Paragraph</p>
<button style="color: rgb(241, 19, 3); background-color: orange;">Help</button>

The color property changes the text color, and the background-color property sets the button's background color.
Inline styles are useful but should be used sparingly, as they can make your code harder to maintain when applied extensively.

Full Code Example:

Below is a complete HTML example demonstrating how to use inline styles. It includes comments for clarity:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Chapter 1</title>
</head>
<body>
    <!-- Inline Style Example -->
    <h1 style="color: rgb(110, 12, 12);">Rohit Gawande</h1>
    <p style="color: rgb(110, 12, 12);">This is a Paragraph</p>
    <button style="color: rgb(241, 19, 3); background-color: orange;">Help</button>
</body>
</html>

Output:

This code will display:

Here's the section on Using the <style> Tag for your Hashnode post, formatted and explained clearly:

3.2.Internal CSS (Using the `<style>` Tag)

While Inline Styles are great for making quick changes, they’re not practical for larger projects. Imagine having thousands of tags or multiple files where you have to repeat the same style—it's not efficient. That's why we don’t use inline styles for large-scale styling.

Now, let's move on to the second method:

Using the `<style>` Tag

The <style> tag allows us to write CSS directly within the same HTML document, but it applies styles across multiple elements without repeating code. This makes it much more efficient than inline styles. The CSS is written within the <style> tag, typically inside the <head> section of the HTML document.

Here’s how we can write it:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Chapter 1</title>
    <style>
        h1 {
            color: rgb(9, 9, 149);
            background-color: #0ba93d;
        }
    </style>
</head>
<body>
    <!-- Style Tag Example -->
    <h1>Rohit Gawande</h1>
    <h1>BTech CSE</h1>
    <h1>Java Developer</h1>
</body>
</html>

Explanation:

The CSS rules are placed within the <style> tag inside the <head> section.
The h1 selector applies the style to all <h1> elements on the page.
The CSS properties:
- color sets the text color to rgb(9, 9, 149).
- background-color changes the background color to #0ba93d (a shade of green).

Benefits:

The styles are applied consistently to all matching elements, making it much easier to maintain.
We don't have to repeat code for each tag, which keeps our HTML clean and efficient.

Output:

When you run the code above, all <h1> elements will have:

By using the <style> tag, you can quickly style multiple elements across your page without duplicating code, making it an ideal approach for medium-sized projects or single-page applications.

Here's the section on External Stylesheets for your Hashnode post, formatted and explained clearly:

3.3. External Stylesheets

Using the <style> tag is convenient, but it has its limitations. The styles you write are contained within the same HTML file, which can become unmanageable in larger projects where multiple files need consistent styling. In real-world scenarios, we use a much more efficient method: External Stylesheets.

An External Stylesheet involves writing CSS in a separate file (usually with a .css extension) and linking it to your HTML document. This allows you to keep all your styles in one place and apply them consistently across multiple pages, making your code cleaner and more maintainable.

Steps to Use an External Stylesheet:

Create a CSS file:
- Write your CSS rules in a separate file, typically named style.css.

CSS File (style.css):

h1 {
    color: rgb(225, 25, 119);
    background-color: #081d79;
}

Create an HTML file:
- Write the HTML code in a separate file, and include a <link> tag in the <head> section to connect the HTML file to the CSS file.

HTML File (index.html):

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Chapter 1</title>
    <!-- Linking External CSS -->
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>Rohit Gawande</h1>
    <h1>BTech CSE</h1>
    <h1>Java Developer</h1>
</body>
</html>

Explanation:

The <link> tag in the HTML file links the external CSS file to the HTML document.
- rel="stylesheet" specifies the relationship between the HTML and CSS files.
- href="style.css" provides the path to the CSS file. If the CSS file is located in a different folder, you need to specify the complete path (e.g., css/style.css).
The styles defined in style.css are now applied to all <h1> elements in the HTML file.

Benefits:

Consistency: You can apply the same style across multiple pages of your website by linking the same stylesheet.
Maintenance: Updating a single CSS file automatically updates the styles for all linked HTML files, making it easy to manage and update.
Separation of Concerns: HTML is responsible for structure, while CSS handles styling. This separation makes your code cleaner and easier to understand.

Example:

When you run the code above, all <h1> elements will have:

This is the most commonly used method in professional projects, and in almost all cases, we use external stylesheets for scalability and efficiency.

4. Color Property

The color property is used to set the text color of an element. It applies to the foreground of an element, which is the part of the element containing the text. In CSS, you can define colors using several methods, including color names, hex codes, RGB, HSL, and more.

Example:

/* CSS File (style.css) */
h1 {
    color: aquamarine; /* Sets the text color of all <h1> elements to aquamarine */
}

p {
    color: red; /* Sets the text color of all <p> elements to red */
}

button {
    color: darkcyan; /* Sets the text color of all <button> elements to dark cyan */
}

CSS Color Formats

When setting the color, you have several options. Some examples include:

Named Color: color: rebeccapurple;
Hex Code: color: #00a400;
RGB: color: rgb(214, 122, 127);
HSL: color: hsl(30deg 82% 43%);
HSLA: color: hsla(237deg 74% 33% / 61%);
HWB: color: hwb(152deg 0% 58% / 70%);

While there are many ways to define colors, the most commonly used are:

Named Colors (e.g., rebeccapurple)
Hex Codes (e.g., #00a400)
RGB (e.g., rgb(214, 122, 127))

Full HTML and CSS Example

Here's an example of how to use the color property in a basic HTML file with an external CSS file:

CSS File (style.css):

/* Styling the text color for different elements */

/* Sets the color of all <h1> elements to aquamarine */
h1 {
    color: aquamarine;
}

/* Sets the color of all <p> elements to red */
p {
    color: red;
}

/* Sets the color of all <button> elements to dark cyan */
button {
    color: darkcyan;
}

HTML File (index.html):

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Color Property</title>
    <!-- Linking the CSS file -->
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <!-- Header Section -->
    <h1>Rohit Gawande</h1>
    <h1>BTech CSE</h1>
    <h1>Java Developer</h1>

    <!-- Paragraph Section -->
    <p>This is Paragraph 1</p>
    <p>This is Paragraph 2</p>

    <!-- Button Element -->
    <button>Button 1</button>
</body>
</html>

Explanation:

CSS File:
- Styles for the <h1>, <p>, and <button> elements are defined separately in the CSS file.
- The color of <h1> elements is set to aquamarine.
- The color of <p> elements is set to red.
- The color of <button> elements is set to dark cyan.
HTML File:
- The HTML structure contains multiple <h1>, <p>, and <button> elements.
- The CSS file is linked using the <link> tag, ensuring that the styles apply to the respective elements.

By keeping the CSS separate and linking it, you can easily manage and update the styles for all your HTML files without duplicating code.

This approach ensures clean and scalable development, especially when building larger web projects.

5. Background Color Property

The background-color property sets the background color of an element. For example:

div {
    background-color: lightblue;
}

6. Practice Questions

Create a simple HTML file and style the text and background colors using the color and background-color properties.

7. Color Systems: Names, RGB, and Hex Codes

CSS allows you to specify colors in different ways:

Color Names: e.g., red, blue, green.
RGB Values: rgb(255, 0, 0) for red.
Hex Codes: #ff0000 for red.

8. Hex Codes

Hexadecimal color codes are six-digit codes that represent colors in CSS. They start with a # followed by digits ranging from 0-9 and A-F.

9. Practice Questions

Experiment with different color systems and apply them to various HTML elements.

10. Text Alignment Property

The text-align property is used to align text within an element:

p {
    text-align: center;
}

It can take values like left, right, center, or justify.

11. Font Weight and Text Decoration

Font Weight: Sets the boldness of text. Example: font-weight: bold;
Text Decoration: Adds effects like underlining or strikethrough. Example: text-decoration: underline;

12. Line Height and Letter Spacing

Line Height: Sets the space between lines. Example: line-height: 1.5;
Letter Spacing: Adjusts the space between characters. Example: letter-spacing: 2px;

13. Units in CSS (Pixels)

CSS uses units like pixels (px) to define measurements such as font size, width, height, etc.

14. Font Family

The font-family property sets the typeface for text. Example:

body {
    font-family: Arial, sans-serif;
}

15. Practice Question

Create a webpage with a header, paragraph, and a list, and style them using the properties we’ve discussed.

16. Assignment Questions

Style a webpage using CSS that includes:
- A header with a specific font.
- A paragraph with custom colors.
- An element with specific dimensions using pixels.

Conclusion

This chapter introduces the essential CSS properties and concepts you need to style your web pages effectively. Practice these concepts, try out the assignments, and you’ll gain a solid foundation in CSS.

Feel free to leave comments or connect with me on LinkedIn and GitHub for more updates on my learning journey. Don’t forget to check out my previous posts on HTML and Full Stack Development!

Happy coding!

Rohit Gawande

Chapter 10: Getting Started with CSS

What We'll Learn in This Chapter:

1. What is CSS?

2. Basic CSS Format

What is a Selector?

Example:

Another Example:

Important Note:

3. Including CSS in HTML

3.1. Inline Styles

Examples:

Full Code Example:

Output:

3.2.Internal CSS (Using the <style> Tag)

Using the <style> Tag

Explanation:

Benefits:

Output:

3.3. External Stylesheets

Steps to Use an External Stylesheet:

Explanation:

Benefits:

Example:

4. Color Property

Example:

CSS Color Formats

Full HTML and CSS Example

Explanation:

5. Background Color Property

6. Practice Questions

7. Color Systems: Names, RGB, and Hex Codes

8. Hex Codes

9. Practice Questions

10. Text Alignment Property

11. Font Weight and Text Decoration

12. Line Height and Letter Spacing

13. Units in CSS (Pixels)

14. Font Family

15. Practice Question

16. Assignment Questions

Conclusion

3.2.Internal CSS (Using the `<style>` Tag)

Using the `<style>` Tag