Enhancing Aesthetics with CSS

Objective

After completing this lesson, you will be able to Use CSS to create a visually appealing user experience.

Enhanced Aesthetics in CSS

Introduction

Improving the aesthetics of your website is crucial to creating a visually appealing user experience that grabs your audience's attention and presents your content effectively. CSS provides a wide range of properties and techniques for designing and formatting various elements, allowing you to create unique and beautiful designs.

Typography

Typography plays a significant role in the aesthetics and readability of your website. CSS provides various properties to control the appearance of text, such as font family, size, weight, style, and line height.

Refer to the following code snippet.

Code Snippet
Copy code
Switch to dark mode
12345678910111213141516
body {
font-family: Arial, sans-serif;
font-size: 16px;
line-height: 1.5;
}


h1 {
font-size: 32px;
font-weight: bold;
}


em {
font-style: italic;
}

In this example, the body selector is used to set the default font family, font size, and line height for the entire web page. The font-family property is set to "Arial" with "sans-serif" as a fallback option, the font-size is set to 16px, and the line-height is set to 1.5, which creates a comfortable reading experience.

The h1 selector sets the font size to 32px and the font weight to bold, making the headings more prominent.

The em selector sets the font-style property to italic, which will style any text within <em> tags as italic.

Colors

Colors help convey emotions and set the tone for your website. CSS allows you to define colors for text, backgrounds, borders, and other elements using color names, hexadecimal values, RGB, RGBA, HSL, or HSLA values.

Refer to the following code snippet.

Code Snippet
Copy code
Switch to dark mode
1234567891011121314
body {
color: #333;
background-color: #f8f8f8;
}


a {
color: #007bff;
}


a:hover {
color: #0056b3;
}

In this example, the body selector is used to set the default text color to a dark gray (#333) and the background color to a light gray (#f8f8f8).

The a selector sets the color of hyperlinks to a shade of blue (#007bff).

The a:hover selector uses a pseudo-class to change the color of hyperlinks when the user hovers over them. The color is changed to a darker shade of blue (#0056b3) to provide visual feedback.

Backgrounds

Backgrounds can enhance the visual appeal of your website by adding colors, gradients, images, or patterns. CSS provides various properties to control background properties, such as background-color, background-image, background-repeat, background-position, and background-size.

Refer to the following code snippet.

Code Snippet
Copy code
Switch to dark mode
123456
header {
background-image: url('header-image.jpg');
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
}

In this example, the header selector is used to set a background image for the webpage header. The background-image property specifies the URL of the image file to be used. The background-repeat property is set to no-repeat, ensuring that the image doesn't repeat itself within the container. The background-position property is set to center center, which positions the image in the center of the header both horizontally and vertically. The background-size property is set to cover, ensuring that the image covers the entire header area and is resized while maintaining its aspect ratio.

Visual Effects

CSS offers several properties to create visual effects, such as shadows, transparency, and filters. These effects can add depth and interest to your design, making it more engaging and dynamic.

Style a Profile Card

Business Example

In this exercise, you style your blog web page.

Creating an external CSS file allows you to apply styles across multiple HTML documents, promotes reusability, and keeps the HTML and CSS code separate, leading to cleaner code.

Steps

  1. To start styling your web page externally, first, you have to create an external CSS file.

    1. Open a text editor or IDE and create a new file with a ".css" extension. Let's name it "styles.css".

  2. In your HTML file, link to the external CSS file by adding a <link> element inside the <head> tag. The href attribute should contain the path to your CSS file.

    Refer to the following code snippet.

    Code Snippet
    Copy code
    Switch to dark mode
    1234
    <head>
<title>My Personal Blog</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>

  3. In the external CSS file, add styles for the body and the heading.

    1. Open "styles.css".

    2. Add styles for the body and the heading.

      Refer to the following code snippet.

      Code Snippet
      Copy code
      Switch to dark mode
      123456789101112
      body {
margin: 0;
padding: 20px;
font-family: Arial, sans-serif;
}


h1 {
color: navy;
text-transform: uppercase;
text-align: center;
}

  4. Add styles to the div and the paragraph. Use the ID names for this.

    Refer to the following code snippet.

    Code Snippet
    Copy code
    Switch to dark mode
    123456789101112
    /* Existing Styles */

#about-me {
background-color: lightgray;
padding: 15px;
border-radius: 5px;
}


#about-me p {
color: darkslategrey;
}

  5. Add styles to make the subscription section user-friendly. Write CSS to style the text box and button.

    Refer to the following code snippet.

    Code Snippet
    Copy code
    Switch to dark mode
    12345678910111213
    /* Existing Styles */


#email-input, #subscribe-button {
padding: 10px;
border-radius: 5px;
}


#subscribe-button {
background-color: navy;
color: white;
}

  6. Make the table data easy to read, and the favorite blogs list and links appealing. Write CSS to style the table, list, and links.

    Refer to the following code snippet.

    Code Snippet
    Copy code
    Switch to dark mode
    12345678910111213141516171819202122232425262728293031323334
    /* Existing Styles */


#blog-posts {
border-collapse: collapse;
}


#blog-posts th {
background-color: navy;
color: white;
}


#blog-posts td {
border: 1px solid black;
}


#favorite-blogs {
list-style-type: none;
padding-left: 0;
}


#favorite-blogs a {
color: navy;
text-decoration: none;
}


#favorite-blogs a:hover {
color: skyblue;
}

    This completes the external CSS exercises. The styles defined in the "styles.css" file will now apply to the HTML document that links to it.

Result

Observe the impact of applying CSS style to your web page.

Log in to track your progress & complete quizzes