02. Applying CSS

Applying CSS is easy as one...two...three! Yes. There are three ways to apply CSS.

1) In-line

Firstly, you can apply CSS within HTML tags with the "style" attribute.

<p style="color: red; font-size: 20px;">Hello world!</p>

Since HTML should be a stand-alone, presentation-free document, it is advised that you stray away from in-line styling. However, it has been stated that placing your CSS in-line allows for a page to load faster. Nonetheless, you should avoid using in-line CSS (for now at least).

2) Internal

You can also embed CSS rules within the <style> tags. This should appear in the <head> section of your document, but can be placed anywhere before the elements you styling.

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

Since this mixes presentation within your HTML document, it should be avoided.

3) External

With an external style sheet, we can place all our CSS separately on a file, then link it to our HTML document. This allows us to separate our HTML and CSS for organization and clarity. We should name the CSS file with the extension ".css" to let the browser know that it's a CSS file. We can import CSS files within the <head> tag as follows:

<link href="path/to/file.css" type="text/css" rel="stylesheet">

The link to the file should be placed in the href attribute. The type attribute tells the browser what kind of file this is. rel specifies the relationship between the HTML page and the file it is linked to.

Importing within a CSS Document

Within your external CSS document, you may want to separate out style sheets according to typography, layout, forms, or tables for better organization.

You can import different .css files within one .css file with the @import tag.

@import url("nav-style.css");

However, importing each file with the @import takes up bandwidth, so use sparingly!

Aching back from coding all day?

Self-Massage Tool

Aching back from coding all day? Try Back Problems

Relieve spasms, tight muscles, trigger points and pressure points with the Body Back Buddy! This trigger point massage is designed to help you self-message any area of your body - especially those that are hard to reach. Keeping your muscles relaxes and out of contraction is importan in helping to reduce pain and prevent muscle injury.

$ Check price
29.9529.95Amazon 4.5 logo(3,443+ reviews)

More Back Problems resources

Build modern and responsive webpages

The Modern Web

Build modern and responsive webpages Try Front-end

The Modern Web will guide you through the most important tools of device-agnostic web development, including HTML5, CSS3, and JavaScript. The plain-english explanations and practical examples emphasize the techniques, principles, and practices that you'll need to easily transcend individual browser quirks and stay relevant as these technologies are updated.

$ Check price
34.9534.95Amazon 4.5 logo(30+ reviews)

More Front-end resources

Ad