Annietah

Ways to Add CSS to Your Website

Exploring the Basics.

Anita Idemudia's photo
Anita Idemudia
·

3 min read

Ways to Add CSS to Your Website

Table of contents

Introduction

In this article, we'll delve into the intricate world of Cascading Style Sheets (CSS) – the magic ingredient that transforms the bland canvas of HTML into visually captivating and aesthetically pleasing web pages.

We'll look at the elements that constitute the art of CSS, which are selectors, properties, values, and declaration blocks.

We'll also explore the different pathways to integrating CSS into your web pages as either inline styles, internal styles, or external styles.

Elements of CSS

Selectors

Selectors allow you to target specific HTML elements for styling. Whether it's headings (<h1>), paragraphs (<p>), or links (<a>), selectors help you pinpoint where your stylistic magic will happen.

They come in various forms, from simple element selectors to more complex class and ID selectors, providing you with the precision you need to make your web pages shine.

Let's introduce properties and values – the dynamic duo that defines the appearance of your elements.

Properties

Properties, such as color, font-size, and background, determine what aspect of an element you want to style.

Values

Values, on the other hand, bring properties to life, dictating the specific choices you make. Want blue text (color: blue;) or a larger font size (font-size: 18px;)?

Properties and values are your trusty companions in this artistic journey.

Declaration Blocks

A declaration block is like a stylish recipe – it's where you combine selectors, properties, and values to create a visual masterpiece. Wrapping your styling instructions in curly braces { }, declaration blocks reside within the <style> tags.

Adding CSS

Three ways to add CSS to a project are:

Inline Style

The inline style lets you apply styles directly to a specific HTML element. It's like giving individual instructions to each element.

Example:

<h1 style="color: blue;">Hello, CSS!</h1>

The above example turns the h1(selector) element to a blue(value) color(property).

Internal Style

The internal style is placed within the <style> tags in the <head> section of your HTML document. It's perfect when you want to style multiple elements on the same page.

Example:

<head>
  <style>
    h1 { color: red; }
    p { font-size: 16px; }
  </style>
</head>

h1 { color: red;} is a declaration block that contains the selector, property and values for that particular style.

External Style

The external style involves creating a separate CSS file (e.g., styles.css) and linking it to your HTML document. This method allows you to apply consistent styles across multiple web pages within your website.

The declarations are made in the CSS file, and linked to the files to be used in.

Example:

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

The declaration blocks:

/* styles.css */
h1 {
  color: #ff9900;
  font-size: 24px;
}

p {
  color: #333333;
  font-size: 16px;
}

Conclusion

With these methods in your toolbox, you're now equipped to sprinkle your web pages with style and create eye-catching designs. Whether you're giving individual instructions, making site-wide changes, or linking an external style, CSS empowers you to turn your web development dreams into reality.

Now that you've learned the basics, start experimenting and exploring. Practice adding CSS to your HTML elements and watch as your website transforms before your eyes.

CSSWeb DevelopmentBeginner DevelopersTutorialbasics