HTML

HTML Styles - CSS

CSS (Cascading Style Sheets) works alongside HTML to give your web pages style and personality. While HTML handles the structure and content, CSS is all about presentation—controlling everything from layouts and colors to fonts and element placement. When used together, they create websites that are not only functional but also visually engaging and easy to navigate.

Example:

<!DOCTYPE html>
<html>
<head>
  <style>
    body {
      background-color: lightblue;
    }
    h1 {
      color: navy;
      font-family: Arial, sans-serif;
    }
    p {
      color: darkred;
      font-size: 20px;
    }
  </style>
</head>
<body>

<h1>Welcome to SitePoint</h1>
<p>This is a simple demonstration of how HTML and CSS work in harmony
to enhance a webpage’s design.</p>

</body>
</html>

In this example, the HTML defines the structure with a heading (<h1>) and a paragraph (<p>). The CSS within the <style> tags adds visual styling: it sets the background color to light blue, the heading text to navy with a clean, modern font, and the paragraph text to a larger, dark red font. This separation between content (HTML) and style (CSS) is what makes your web design more flexible and efficient.

What is CSS?

CSS is the language that brings style and life to your HTML. It controls everything from colors and fonts to layout and spacing, allowing you to fine-tune the visual presentation of your content. With CSS, you can apply a consistent design across your entire website effortlessly.

Using CSS in HTML

CSS can be applied to HTML in three main ways, depending on the scope and complexity of the styles you want to implement.

Inline CSS

Inline CSS is added directly inside an HTML element using the style attribute. This method is handy when you want to apply specific styles quickly to individual elements.

Example:

<h4 style="color:blue;">This is a blue heading</h4>
<p style="color:red;">This is a red paragraph.</p>

Here, the HTML tags <h1> and <p> structure the content, while the inline style attribute changes the colors. The heading is styled blue, and the paragraph is red. This is the simplest form of CSS, but it’s better suited for small, one-off style tweaks.

Output:

This is a blue heading

This is a red paragraph.

Internal CSS (Embedded CSS)

Internal CSS is used to style a single page and is written inside a <style> tag within the <head> section of your HTML document.

Example:

<!DOCTYPE html>
<html>
<head>
  <style>
    body {
      background-color: lightyellow;
    }
    h1 {
      color: green;
    }
    p {
      color: red;
    }
  </style>
</head>
<body>

<h1>This is a green heading</h1>
<p>This is a red paragraph.</p>

</body>
</html>

Here, the styles are defined in the <style> tag in the <head> section. These styles affect the entire page. The background color is set to light yellow, while the heading and paragraph text are green and red, respectively. Internal CSS helps centralize the styles for a single HTML page, keeping it clean and organized.

External CSS

External CSS is ideal for larger websites where you want to apply consistent styles across multiple pages by linking to a single .css file.

Example:

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="styles.css">
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

In the styles.css file, you might have:

body {
  background-color: lightgray;
}
h1 {
  color: blue;
}
p {
  color: darkgreen;
}

With external CSS, you keep your design code separate from your HTML content. By linking the styles.css file in the <head>, you can apply the same styles across multiple web pages.

Commonly Used CSS Properties

CSS provides a vast array of properties to style and refine the appearance of HTML elements. Below are some of the most frequently used properties that can elevate your web design.

CSS for Colors, Fonts, and Sizes

CSS allows you to control text styling to improve both readability and visual appeal.

Example:

h1 {
  color: blue;
  font-family: Verdana, sans-serif;
  font-size: 250%;
}
p {
  color: red;
  font-family: Courier, monospace;
  font-size: 120%;
}

In this example, CSS customizes how the <h1> and <p> elements are displayed. The heading is styled to be large, blue, and in the Verdana font, while the paragraph text is styled red, smaller, and in the Courier font. The HTML handles the content structure, while CSS adds the style.

Commonly Used CSS Properties

CSS offers a range of properties to style and enhance the appearance of HTML elements. Below are some of the most frequently used properties to improve web design.

CSS for Colors, Fonts, and Sizes

CSS enables you to control text styling, ensuring both readability and visual appeal.

Syntax:

selector {
  color: value;
  font-family: value;
  font-size: value;
}

Example:

h1 {
  color: blue;
  font-family: Verdana, sans-serif;
  font-size: 250%;
}
p {
  color: red;
  font-family: Courier, monospace;
  font-size: 120%;
}

In this example, CSS adjusts the style of the <h1> and <p> elements. The heading becomes large, blue, and in Verdana, while the paragraph is red, smaller, and in Courier.

CSS Borders for HTML Elements

Borders outline elements, defining their width, style, and color to create visual boundaries.

Syntax:

selector {
  border: width style color;
}

Example:

p {
  border: 2px solid black;
}

This adds a solid black 2-pixel border around the <p> element, providing structure and emphasis around the content.

CSS Padding

Padding creates space between the content of an element and its border, making the content more readable.

Syntax:

selector {
  padding: value;
}

Example:

p {
  padding: 20px;
}

This rule adds 20 pixels of padding inside the border of the <p> element, keeping the text from being too close to the border.

CSS Margin

Margins add space around the outside of an element, separating it from neighboring elements.

Syntax:

selector {
  margin: value;
}

Example:

p {
  margin: 30px;
}

The margin property adds 30 pixels of space outside the <p> element, helping to separate content visually, making the layout more organized and easy to follow.

Linking to External CSS

External CSS is essential for maintaining a consistent design across multiple web pages. You can link to an external stylesheet by including the <link> tag in the <head> section of your HTML document.

Example: Linking to an External CSS File from SitePoint

<link rel="stylesheet" href="https://www.sitepoint.com/styles.css">

In this example, the stylesheet is hosted on SitePoint and is referenced using a full URL. This allows you to apply styles from an external source across your web pages.

Example: Relative Path to a CSS File on Your Website

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

This example links to a CSS file stored in the /css folder of your website. Using relative paths keeps your styles organized and ensures easy file management.

Example: Linking to a Local CSS File

<link rel="stylesheet" href="styles.css">

If the CSS file is located in the same directory as your HTML page, you can use a simple relative path like this. It's ideal for small projects or single-page websites.

FAQ on HTML Styles - CSS

Do I need a CSS file for every HTML page?

No, you can use one CSS file to style multiple HTML pages. This is the preferred approach because it not only saves time but also ensures consistency across your site. By linking all your pages to a single external CSS file, any updates you make to the design will automatically apply to every page, which is efficient for maintaining a cohesive look and feel.

What is embedded CSS in HTML?

Embedded CSS, also known as internal CSS, is defined within the <style> tag located in the <head> section of an HTML document. It applies only to that specific page. While embedded CSS is useful for smaller websites or one-off changes, it can become harder to manage as your site grows. It’s best for single-page projects or when you need unique styles for just one page.

How are HTML and CSS used together?

HTML is responsible for structuring the content on your webpage—think of it as the bones of your site. CSS, on the other hand, adds style and visual appeal by controlling layout, colors, fonts, and other design elements. Together, HTML and CSS turn a basic, unstyled webpage into an engaging and user-friendly experience. This combination ensures that the content not only functions well but also looks appealing.

Is CSS always used with HTML?

While CSS is most commonly used with HTML to style websites, it's not exclusive to it. CSS can also be applied to other markup languages like XML and SVG. For example, you can use CSS to style vector graphics (SVG) or structure data in XML, giving you powerful design control beyond just HTML.

Should I learn HTML and CSS together or separately?

It's ideal to start with HTML first to understand how web pages are structured. Once you have a solid grasp of HTML, learning CSS becomes much easier, as you’ll be able to see how it styles the structure you've built. By learning them in sequence, you’ll have a more cohesive understanding of how content and design work hand-in-hand on the web.

Previous Next