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?

Foam Seat Cushion

Aching back from coding all day? Try Back Problems

This foam seat cushion relieves lowerback pain, numbness and pressure sores by promoting healthy weight distribution, posture and spine alignment. Furthermore, it reduces pressure on the tailbone and hip bones while sitting. Perfect for sitting on the computer desk for long periods of time.

$ Check price
99.9599.95Amazon 4.5 logo(9,445+ reviews)

More Back Problems resources

Build modern and responsive webpages

HTML & CSS

Build modern and responsive webpages Try Front-end

This book teaches HTML as if it's for anyone - hobbyists, students, and professionals - and it's full-color throughout. It utilizes information graphics and lifestyle photography to explain the topics in a simple way that is engaging. You can progress through the chapters from beginning to end or just dip into topics of particular interest at your leisure.

$ Check price
29.9929.99Amazon 4.5 logo(926+ reviews)

More Front-end resources

Ad