Master CSS: Beginner’s Introduction to Web Page Styling

FYGS \_°<FYGS \_°<
13 min read

Table of contents

Introduction to CSS

Session Objectives

  • Understand what CSS is and its importance in web development

  • Learn how to link a CSS file to an HTML document

  • Master basic CSS selectors

Wat is CSS and why use it?

CSS stands for Cascading Style Sheets.

  • Definition: A language used to describe the presentation of a document written in HTML or XML.

  • Role of CSS:

    • Control the layout of a web page

    • Define colors, fonts, text sizes

    • Manage spacing and alignments

    • Create animations and visual effects

Why use CSS?

  • Separation of content (HTML) and presentation (CSS)

  • Consistent design across the entire site

  • Ease of maintenance and updates

  • Adaptability to different devices (responsive design)

Three methods to add CSS to HTML:

  1. External CSS (recommended): Link an external CSS file to your HTML document using the <link> tag within the <head> section. This method is preferred for maintaining a clean separation between content and styling, allowing for easier updates and consistent styling across multiple pages.
<head>
  <link rel="stylesheet" href="styles.css">
</head>
  1. Internal CSS.
<head>
  <style>
    body { background-color: lightblue; }
  </style>
</head>
  1. Inline CSS.
<p style="color: red;">This text is red.</p>

Advantages of External CSS:

  • Clear separation of HTML and CSS

  • Ease of maintenance

Ability to reuse the same CSS across multiple pages

Basic Selectors: Element, Class, ID

Selectors define the HTML elements to which styles apply.

  1. Element Selector: Targets all elements of a specific type.
p { color: blue; }
  1. Class Selector: Targets elements with a specific class.
.highlight { background-color: yellow; }
  1. ID Selector: Targets a unique element with a specific ID.
#header { font-size: 24px; }

Combined Example:

p { color: black; }
.important { font-weight: bold; }
#main-title { color: navy; }

Practical Exercise

  1. Create a simple HTML file with a few paragraphs, a heading, and a list.

  2. Add classes and IDs to some elements.

  3. Create an external CSS file and link it to your HTML.

  4. Use different types of selectors to style your page.

Styling Our Recipe Page with CSS (from previous lesson)

Objective:
Apply the CSS concepts learned to enhance the appearance of our recipe page.

Step 1: Preparing the HTML File

Take the HTML file of the recipe created in lesson 1 and add classes and IDs.

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Recipe for Spaghetti Bolognese</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header id="page-header">
        <h1 class="main-title">Recipe for Spaghetti Bolognese</h1>
    </header>

    <main>
        <section id="ingredients">
            <h2 class="section-title">Ingredients :</h2>
            <ul class="ingredient-list">
                <li>400g of spaghetti</li>
                <li>500g of ground beef</li>
                <li>1 onion</li>
                <li>2 garlic cloves</li>
                <li>400g of chopped tomatoes</li>
                <li class="important">2 tablespoons of olive oil</li>
                <li>Salt and pepper</li>
            </ul>
        </section>

        <section id="preparation">
            <h2 class="section-title">Preparation :</h2>
            <ol class="prep-steps">
                <li>Heat the oil in a saucepan and sauté the chopped onion and garlic.</li>
                <li>Add ground meat and cook until golden brown.</li>
                <li>Add the crushed tomatoes and season with salt and pepper. Simmer for 20 minutes.</li>
                <li>Meanwhile, cook the spaghetti in a large pot of boiling salted water.</li>
                <li class="final-step">Drain pasta and serve with Bolognese sauce.</li>
            </ol>
        </section>

        <section id="image-section">
            <h2 class="section-title">The end result :</h2>
            <img src="spaghetti-bolognaise.jpg" alt="Bolognaise spaghetti" class="recipe-image">
        </section>
    </main>

    <footer id="page-footer">
        <p>Do you like pasta? Discover our <a href="recette-carbonara.html" class="recipe-link">Spaghetti Carbonara Recipe</a>.</p>
    </footer>
</body>
</html>

Step 2: Creating the External CSS File

Create a file named styles.css in the same folder as your HTML file.

Step 3: Styling the Page with Different Types of Selectors

In the styles.css file, add the following styles:

/* General styles */
body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    color: #333;
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
}

/* ID selector */
#page-header {
    background-color: #f4f4f4;
    padding: 20px;
    text-align: center;
}

/* Class selector */
.main-title {
    color: #2c3e50;
}

.section-title {
    color: #e74c3c;
    border-bottom: 2px solid #e74c3c;
    padding-bottom: 5px;
}

/* Element selector */
ul, ol {
    padding-left: 20px;
}

/* Selector combination */
#ingredients .ingredient-list {
    list-style-type: square;
}

#preparation .prep-steps {
    background-color: #ecf0f1;
    padding: 15px;
    border-radius: 5px;
}

/* Specific class selector */
.important {
    font-weight: bold;
    color: #e74c3c;
}

.final-step {
    font-style: italic;
}

/* Attribute selector */
[class^="recipe-"] {
    border: 1px solid #bdc3c7;
    padding: 10px;
}

/* Pseudo-classes */
a:hover {
    color: #e74c3c;
    text-decoration: none;
}

/* Direct child selector */
#page-footer > p {
    text-align: center;
    font-size: 0.9em;
    margin-top: 30px;
}

Step 4: Verification and Adjustments

Open your HTML file in a browser to see the changes. Ensure that all styles are correctly applied. Experiment by modifying colors, font sizes, or adding new CSS rules to further customize your page.

Conclusion of the Exercise

This exercise allows to:

  • Practice adding classes and IDs to HTML elements

  • Experiment with different types of CSS selectors

  • See how CSS can dramatically transform the appearance of a web page

  • Understand the importance of HTML structure for effective styling

Basic Styling with CSS

Colors and Backgrounds

  • Typography: size, font, style

  • Margins and Padding

  • Borders

  1. Colors and Backgrounds
    a) Text Colors
p {
    color: blue; /* Name */
    color: #333333; /* Hexadecimal */
    color: rgb(51, 51, 51); /* RGB */
    color: rgba(51, 51, 51, 0.8); /* RGBA with transparency */
}

b) Backgrounds

In CSS, backgrounds can be styled using various properties to enhance the visual appeal of a web page. You can set background colors, images, and even gradients. Here are some basic properties:

  • background-color: Sets the background color of an element.

      body {
      background-color: lightblue;
  }

  • background-image: Sets an image as the background.

      body {
      background-image: url('background.jpg');
  }

  • background-repeat: Controls the repetition of the background image.

      body {
      background-repeat: no-repeat;
  }

  • background-size: Specifies the size of the background image.

      body {
      background-size: cover;
  }

These properties allow you to customize the background to fit the design and layout of your web page.

Typography: Size, Font, Style

a) Font Size

In CSS, the font size of text can be controlled using the font-size property. This property allows you to specify the size of the text in various units such as pixels (px), ems (em), rems (rem), percentages (%), and more. Here are some examples:

  • Pixels (px): A fixed size unit.

      p {
      font-size: 16px;
  }

  • Ems (em): A relative unit based on the font size of the element's parent.

      p {
      font-size: 1.2em;
  }

  • Rems (rem): A relative unit based on the font size of the root element (usually the <html> element).

      p {
      font-size: 1rem;
  }

  • Percentages (%): A relative unit based on the font size of the element's parent.

      p {
      font-size: 100%;
  }

These options provide flexibility in designing responsive and accessible web pages.

b) Font Family

In CSS, the font family of text is specified using the font-family property. This property allows you to define the typeface that should be used for the text. You can specify multiple font families as a fallback system, in case the first choice is not available. Here are some examples:

  • Single Font Family:

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

  • Multiple Font Families:

      p {
      font-family: "Times New Roman", Times, serif;
  }

When specifying font families, it's a good practice to include a generic family name (like serif, sans-serif, or monospace) as a fallback. This ensures that the text is displayed in a similar style if the preferred font is not available.

c) Font Style

In CSS, the font style of text is controlled using the font-style property. This property allows you to specify whether the text should be displayed in a normal, italic, or oblique style. Here are some examples:

  • Normal Style:

      p {
      font-style: normal;
  }

  • Italic Style:

      p {
      font-style: italic;
  }

  • Oblique Style:

      p {
      font-style: oblique;
  }

These styles can be used to emphasize text or to match the design requirements of your web page.

d) Text Alignment

In CSS, text alignment is controlled using the text-align property. This property allows you to specify the horizontal alignment of text within an element. Here are some common values:

  • Left Alignment:

      p {
      text-align: left;
  }

  • Center Alignment:

      p {
      text-align: center;
  }

  • Right Alignment:

      p {
      text-align: right;
  }

  • Justify Alignment:

      p {
      text-align: justify;
  }

These options help in arranging text to fit the design and readability requirements of your web page.

Margins and Padding

a) Margins (Outer Space)

In CSS, margins are used to create space around elements, outside of any defined borders. The margin property can be used to set the space on all four sides of an element, or you can specify each side individually. Here are some examples:

  • Uniform Margin:

      div {
      margin: 20px;
  }

  • Individual Margins:

      div {
      margin-top: 10px;
      margin-right: 15px;
      margin-bottom: 10px;
      margin-left: 15px;
  }

  • Shorthand Margin:

      div {
      margin: 10px 15px 10px 15px; /* top, right, bottom, left */
  }

Margins are useful for controlling the spacing between elements and ensuring a clean layout.

b) Padding (Inner Space)

In CSS, padding is used to create space around the content inside an element, within any defined borders. The padding property can be used to set the space on all four sides of an element, or you can specify each side individually. Here are some examples:

  • Uniform Padding:

      div {
      padding: 20px;
  }

  • Individual Padding:

      div {
      padding-top: 10px;
      padding-right: 15px;
      padding-bottom: 10px;
      padding-left: 15px;
  }

  • Shorthand Padding:

      div {
      padding: 10px 15px 10px 15px; /* top, right, bottom, left */
  }

Padding is useful for controlling the space between the content of an element and its border, enhancing the overall layout and readability.

c) Box-Sizing

In CSS, the box-sizing property is used to alter the default CSS box model used to calculate widths and heights of elements. It defines how the total width and height of an element is calculated, including padding and borders. The most common values are:

  • content-box: This is the default value. The width and height properties include only the content, not the padding, border, or margin.

      div {
      box-sizing: content-box;
  }

  • border-box: The width and height properties include the content, padding, and border, but not the margin. This makes it easier to set the size of an element and ensures that padding and border are included in the total size.

      div {
      box-sizing: border-box;
  }

Using border-box is often preferred for layout design as it simplifies the calculation of element sizes, making it easier to create responsive designs.

Borders

In CSS, borders are used to create a visible outline around an element. The border property allows you to set the width, style, and color of an element's border. Here are some examples:

  • Border Width:

      div {
      border-width: 2px;
  }

  • Border Style:

      div {
      border-style: solid;
  }

  • Border Color:

      div {
      border-color: black;
  }

  • Shorthand Border:

      div {
      border: 2px solid black;
  }

Borders can be customized further by setting individual sides (top, right, bottom, left) with properties like border-top, border-right, border-bottom, and border-left. This allows for detailed styling to match the design needs of your web page.

In CSS, you can apply various styles to borders to enhance the design of your web elements. Here are some common border styles:

  • Solid Border:

      div {
      border: 2px solid black;
  }

  • Dashed Border:

      div {
      border: 2px dashed black;
  }

  • Dotted Border:

      div {
      border: 2px dotted black;
  }

  • Double Border:

      div {
      border: 4px double black;
  }

  • Groove Border:

      div {
      border: 2px groove black;
  }

  • Ridge Border:

      div {
      border: 2px ridge black;
  }

  • Inset Border:

      div {
      border: 2px inset black;
  }

  • Outset Border:

      div {
      border: 2px outset black;
  }

To round the corners of an element, you can use the border-radius property. Here’s how you can apply it:

  • Rounded Corners:

      div {
      border: 2px solid black;
      border-radius: 10px;
  }

The border-radius property can take one or more values to specify different radii for each corner, allowing for a variety of shapes and styles. For example, border-radius: 10px 20px 30px 40px; will apply different radii to the top-left, top-right, bottom-right, and bottom-left corners, respectively.

Practical Exercise

Apply styles to the recipe page:

  • Change the background color of the page

  • Modify the size and style of the main heading

  • Add margins and padding to the sections

  • Apply a border to the recipe image

Objective:
Apply the CSS styling concepts we just learned to your Spaghetti Bolognese recipe page.

Instructions:

  1. Change the background color of the page.
    Add the following code to your CSS file:
body {
    background-color: #f5e6d3; /* A light beige tint. */
}

  1. Modify the size and style of the main heading

    Find the selector for your main heading (.main-title) and add these properties:

.main-title {
    font-size: 2.5rem;
    font-weight: bold;
    color: #8b4513; /* Marrone */
    text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}
  1. Add margins and padding to the sections

For the ingredients and preparation sections, add:

#ingredients, #preparation {
    margin: 20px 0;
    padding: 15px;
    background-color: #ffffff;
    border-radius: 8px;
}
  1. Apply a border to the recipe image

Find the selector for the recipe image (.recipe-image) and add:

.recipe-image {
    border: 3px solid #8b4513;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

Additional Instructions:

  • Ensure that all changes are correctly applied by checking your HTML file in the browser.

  • Experiment with different colors, sizes, and styles to further customize your page.

  • If you finish quickly, try adding a hover effect to the links on the page:

a:hover {
    color: #ff6347; /* Tomato */
    text-decoration: underline;
}

Expected Outcome:

Your recipe page should now have:

  • A light beige background color

  • A larger and stylized main heading

  • Ingredients and preparation sections with a white background and rounded corners

  • A recipe image with a brown border and rounded corners

Tip: Feel free to adjust the colors and values to match your aesthetic vision for the recipe page.

Reflection: After applying these changes, consider how these modifications enhance the readability and visual appeal of your page. What other changes could you make to further improve the design?

Practical Exercise: Deeply Style Your Recipe Page

Objective:
Apply a variety of CSS styles to your recipe page to make it visually appealing and professional.

Instructions:

  1. Change the text and background color
body {
    background-color: #f5e6d3; /* Light beige */
    color: #333333; /* Dark gray text */
}

.main-title {
    color: #8b4513; /* Brown for the main title */
}

.section-title {
    color: #d2691e; /* Chocolate for subtitles */
}
  1. Modify the font and text size.
body {
    font-family: 'Arial', sans-serif;
    font-size: 16px;
}

.main-title {
    font-family: 'Georgia', serif;
    font-size: 2.5rem;
    font-weight: bold;
}

.section-title {
    font-size: 1.5rem;
    font-weight: bold;
}

p, li {
    line-height: 1.6;
}
  1. Add margins and padding.
body {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
}

#ingredients, #preparation {
    background-color: #ffffff;
    margin: 20px 0;
    padding: 15px;
    border-radius: 8px;
}

.recipe-image {
    margin: 20px 0;
    padding: 5px;
}
  1. Style the lists and links.
.ingredient-list, .prep-steps {
    padding-left: 20px;
}

.ingredient-list li {
    list-style-type: square;
    margin-bottom: 5px;
}

.prep-steps li {
    margin-bottom: 10px;
}

a {
    color: #d2691e;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}
  1. Add finishing touches.
/* Image border */
.recipe-image {
    border: 3px solid #8b4513;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

/* Footer style */
#page-footer {
    margin-top: 30px;
    text-align: center;
    font-style: italic;
}

/* Highlighting milestones */
.important, .final-step {
    font-weight: bold;
    color: #d2691e;
}

Additional Instructions:

  • Apply these styles to your CSS file and check the result in your browser.

  • Experiment with the values to further customize the design according to your preferences.

  • If you finish quickly, try adding transition effects to the links or interactive elements:

a {
    transition: color 0.3s ease;
}

.recipe-image:hover {
    transform: scale(1.05);
    transition: transform 0.3s ease;
}

Bonus Challenge:

Try adding a gradient effect to the background of the body or sections:

body {
    background: linear-gradient(to bottom, #f5e6d3, #e6ccb3);
}

Conclusion

In conclusion, applying CSS styling techniques to your web pages not only enhances their visual appeal but also improves user experience by making content more accessible and engaging. By experimenting with colors, fonts, layouts, and effects, you can create a unique and professional look that aligns with your design vision. As you continue to refine your skills, consider how each change impacts the overall readability and functionality of your site. Embrace creativity and keep exploring new styles to further elevate your web design projects.

In the next lesson, we will cover advanced CSS and Responsive Design.

0
Subscribe to my newsletter

Read articles from FYGS \_°< directly inside your inbox. Subscribe to the newsletter, and don't miss out.

CSS3Web DevelopmentStyleSheetBeginner Developers

Written by

FYGS \_°<
FYGS \_°<

I'm a software Engineer with a strong interest in technologies, my goal is to share my discovery, learning, and knowledge in programming through my blog. Whether you're a beginner or an experienced programmer, I aim to create content that is informative, engaging, and easy to understand. My blog will cover a wide range of programming topics, with a focus on Web Technologies. To make learning easier, I will use code examples in markdown, along with language indications, to illustrate programming concepts. Additionally, I will provide tips, tricks, and best practices that can help developers write clean, efficient, and maintainable code. Finally, I will encourage collaboration, discussions, and feedback from my readers, as I believe that programming is a community-driven discipline. Through my blog, I hope to inspire and empower aspiring software developers to achieve their goals and enhance their skills.