Home Learn HTML Applying Styles with CSS

Lesson 10 of 24

In Progress

← Previous Next→

Applying Styles with CSS

Yasin Cakal

CSS (Cascading Style Sheets) is a style sheet language that is used to describe the look and formatting of a document written in HTML. It allows you to apply styles, such as fonts, colors, and layouts, to your web pages in a consistent and efficient manner. In this article, we’ll take a closer look at how to apply styles with CSS.

Getting Started with CSS

There are three ways to apply CSS to an HTML document: inline, internal, and external.

Inline CSS is applied directly to an HTML element using the style attribute. It is best used for small, specific styles that apply to a single element.

Here’s an example of how to use inline CSS in HTML:

<p style="color: red; font-size: 20px;">
This is a paragraph with inline CSS.</p>

In this example, we have applied the style of a red font color and a font size of 20 pixels to the paragraph using the style attribute.

Internal CSS is applied to an HTML document using a <style> element in the <head> of the document. It is best used for styles that apply to multiple elements throughout the document.

Here’s an example of how to use internal CSS in HTML:

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

In this example, we have applied the style of a red font color and a font size of 20 pixels to all paragraphs in the document using the <style> element.

External CSS is applied to an HTML document using a separate CSS file. It is best used for styles that apply to multiple pages or a large website.

Here’s an example of how to use external CSS in HTML:

<head>
  <link rel="stylesheet" href="/css/style.css">
</head>

In this example, we have linked to an external CSS file using the <link> element in the <head> of the document. The rel attribute specifies the relationship between the HTML document and the CSS file, and the href attribute specifies the location of the CSS file.

CSS Syntax

CSS has a simple syntax that consists of selectors, properties, and values.

Selectors are used to select the elements on the page that you want to style. There are three types of selectors: element, class, and id.

Element selectors are used to apply styles to all instances of a particular element. They are denoted by the element name, such as p for paragraphs or h1 for headings.

Class selectors are used to apply styles to a group of elements that share a common class. They are denoted by a period followed by the class name, such as .highlight for highlighted elements.

Id selectors are used to apply styles to a specific element on the page. They are denoted by a pound sign followed by the id name, such

as #header for the header element.

Properties are the characteristics of an element that you want to style. They are denoted by a property name, such as color, font-size, or background-color.

Values are the specific values that you want to apply to a property. They are denoted by a value, such as red, 20px, or #fff.

Here’s an example of a CSS rule:

p {
  color: red;
  font-size: 20px;
}

In this example, we have selected all paragraphs using the element selector p, and we have applied the properties of a red font color and a font size of 20 pixels using the values red and 20px.

CSS Inheritance

CSS inheritance is a way for child elements to inherit the styles of their parent elements. This means that if you apply a style to a parent element, it will be applied to all of its child elements as well.

For example, if you apply the style of a red font color to a div element, all of the elements within the div will also have a red font color.

<div style="color: red;">
  <p>This is a paragraph with a red font color.</p>
  <h2>This is a heading with a red font color.</h2>
</div>

In this example, both the paragraph and the heading have inherited the style of a red font color from the div element.

You can also use the inherit value to explicitly inherit a style from a parent element.

<div style="color: red;">
  <p style="color: inherit;">
  This is a paragraph with a red font color.</p>
</div>

In this example, the paragraph has explicitly inherited the style of a red font color from the div element.

Conclusion

CSS is a powerful style sheet language that allows you to apply styles to your web pages in a consistent and efficient manner. With the skills and knowledge you gain in this course, you’ll be able to use CSS to create professional-quality web pages that are visually appealing and easy to read.

Exercises

To review these concepts, we will go through a series of exercises designed to test your understanding and apply what you have learned.

How do you apply inline CSS to an HTML element?

To apply inline CSS to an HTML element, use the style attribute and specify the properties and values that you want to apply. For example:

<p style="color: red; font-size: 20px;">
This is a paragraph with inline CSS.</p>

How do you apply internal CSS to an HTML document?

To apply internal CSS to an HTML document, use the <style> element in the <head> of the document and specify the selectors, properties, and values that you want to apply. For example:

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

How do you apply external CSS to an HTML document?

To apply external CSS to an HTML document, use the <link> element in the <head> of the document and specify the location of the CSS file using the href attribute. For example:

<head>
  <link rel="stylesheet" href="/css/style.css">
</head>

What is a property in CSS?

A property in CSS is a characteristic of an element that you want to style. It is denoted by a property name, such as color, font-size, or background-color.

What is a value in CSS?

A value in CSS is a specific value that you want to apply to a property. It is denoted by a value, such as red, 20px, or #fff.

Learn HTML

Participants 433