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!

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

Aching back from coding all day?

Prism Glasses

Aching back from coding all day? Try Back Problems

Ever feel achy from sitting crunched up on your computer table? Try lying down with these optical glasses that allow you to work on your laptop while lying flat on your back. This is the perfect solution with those with limited mobility or those who wish to prevent neck cramps and back strains.

$ Check price
4.454.45Amazon 4 logo(128+ reviews)

More Back Problems resources

Ad