CSS Notes for Professionals

This CSS Notes for Professionals book is compiled from Stack Overflow

Documentation, the content is written by the beautiful people at Stack Overflow.

Text content is released under Creative Commons BY-SA, see credits at the end

of this book whom contributed to the various chapters. Images may be copyright

of their respective owners unless otherwise specified

This is an unofficial free book created for educational purposes and is not

affiliated with official CSS group(s) or company(s) nor Stack Overflow. All

trademarks and registered trademarks are the property of their respective

company owners

The information presented in this book is not guaranteed to be correct nor

accurate, use at your own risk

Please send feedback and corrections to web@petercv.com

Chapter 1: Getting started with CSS

Version Release Date

1 1996-12-17

2 1998-05-12

3 2015-10-13

Section 1.1: External Stylesheet

An external CSS stylesheet can be applied to any number of HTML documents by placing a <link> element in each

HTML document.

The attribute rel of the <link> tag has to be set to "stylesheet", and the href attribute to the relative or absolute

path to the stylesheet. While using relative URL paths is generally considered good practice, absolute paths can be

used, too. In HTML5 the type attribute can be omitted.

It is recommended that the <link> tag be placed in the HTML file's <head> tag so that the styles are loaded before

the elements they style. Otherwise, users will see a flash of unstyled content.

Example

hello-world.html

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<h1>Hello world!</h1>

</body>

</html>

style.css

h1 {

color: green;

text-decoration: underline;

}

p {

font-size: 25px;

font-family: 'Trebuchet MS', sans-serif;

}

Make sure you include the correct path to your CSS file in the href. If the CSS file is in the same folder as your HTML

file then no path is required (like the example above) but if it's saved in a folder, then specify it like this

href="foldername/style.css".

External stylesheets are considered the best way to handle your CSS. There's a very simple reason for this: when

you're managing a site of, say, 100 pages, all controlled by a single stylesheet, and you want to change your link

Download to read more

May 14, 2020

CSS Notes for Professionals