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?

Acupressure Mat & Pillow

Aching back from coding all day? Try Back Problems

Relieve your stress, back, neck and sciatic pain through 1,782 acupuncture points for immediate neck pain relief. Made for lower, upper and mid chronic back pain treatment, and improves circulation, sleep, digestion and quality of life.

$$ Check price
144.87144.87Amazon 4.5 logo(1,890+ reviews)

More Back Problems resources

Build modern and responsive webpages

JavaScript & JQuery

Build modern and responsive webpages Try Front-end

This book was written for anyone who wants to use JavaScript to make their websites a little more interesting, engaging, interactive, or usable. In particular, it is aimed at people who do not have a degree in computer science (well, not yet anyway).

$ Check price
39.9939.99Amazon 4.5 logo(385+ reviews)

More Front-end resources

Ad