Cascading Style Sheet (CSS) Styling Guide

Last Updated:

Introduction to CSS

Cascading Style Sheets, known as CSS, are essential tools for web developers aiming to craft visually appealing, responsive, and efficient websites. The significant advantage of using CSS is the ability to separate the structure from the design. By having the styling in a single (or few) CSS file(s), you can maintain the visual appearance across your entire site. This results in cleaner HTML and faster loading times due to reduced redundancy.

Who Should Read This Guide?

If you’re already acquainted with HTML and want to enhance your web design skills with CSS, this guide is for you. Throughout, you’ll find various code snippets, which we encourage you to modify and experiment with to grasp the concepts.

Basics of CSS Styling

Incorporate CSS into your web pages in three primary ways:

  1. Internal Styling: Embed the CSS within the <head> section of the HTML page.
  2. External Styling: Link to an external .css file that holds the styles for various pages.
  3. Inline Styling: Apply styles directly to individual elements in the HTML. While this method is convenient for quick changes or exceptions, it’s not recommended for large-scale use.

Internal CSS – Example 1

<html>
<head>
  <title>Internal CSS Example</title>
  <style>
    body { font-family: 'Trebuchet MS'; }
    h1 { font-size: 1.5rem; }
  </style>
</head>
<body>
  <h1>Welcome to Internal Styling!</h1>
</body>
</html>

External CSS – Example 2

Link to an external stylesheet, styles.css.

styles.css:

body { font-family: 'Trebuchet MS'; }
h1 { font-size: 1.5rem; }

HTML file:

<html>
<head>
  <title>External CSS Example</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <h1>Welcome to External Styling!</h1>
</body>
</html>

CSS Styling Techniques

Styling HTML Tags – Example 3

For uniform styles across all instances of a specific tag.

p {
  font-size: 1rem;
  font-family: 'Trebuchet MS';
}

Using Classes – Example 4

Define a class in CSS for reuse across various HTML elements.

.text-small {
  font-size: 1rem;
  font-family: 'Trebuchet MS';
}

<p class="text-small">Text styled using a class.</p>

Styling Based on Specific Classes – Example 5

Use classes to style elements differently.

p {
  font-family: 'Trebuchet MS';
  color: #000;
}
.text-small { font-size: 1rem; }
.text-large { font-size: 2rem; }

Inline Styling – Example 6

Inline styles can be used for exceptions or quick changes.

<p style="font-family: 'Trebuchet MS'; color: #000; font-size: 1rem;">Inline styled text.</p>

Conclusion

With this guide as a foundation, dive deeper into CSS to craft visually striking and functional web designs. Always ensure to experiment, validate across different browsers, and focus on responsive design for an optimal user experience.