CSS defines the way things look on your websites. HTML is your content, JavaScript adds interaction, but the appearance comes down to CSS. CSS is super powerful and has a ton of awesome stuff built in. This post will take you from introductory syntax through creating layouts and making sites responsive!
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.
Make sure you include the correct path to your CSS fifile in the href. If the CSS fifile is in the same folder as your HTML fifile 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”.
<link rel="stylesheet" type="text/css" href="foldername/style.css">
CSS rules are applied with some basic rules, and order does matter. For example, if you have a main.css fifile with some code in it:
p.green { color: #00FF00; }
Internal Styles
CSS enclosed in <style></style> tags within an HTML document functions like an external stylesheet, except that it lives in the HTML document it styles instead of in a separate file, and therefore can only be applied to the document in which it lives.
Note that this element must be inside the <head> element for HTML validation (though it will work in all current browsers if placed in the body).
<head> <style> h1 { color: green; text-decoration: underline; } p { font-size: 25px; font-family: 'Trebuchet MS', sans-serif; } </style> </head> <body> <h1>Hello world!</h1> <p>I ♥ CSS</p> </body>
CSS @import rule
The @import CSS at-rule is used to import style rules from other style sheets. These rules must precede all other types of rules, except @charset rules; as it is not a nested statement, @import cannot be used inside conditional group at-rules.
How to use @import ?
With internal style tag
<style> @import url('/css/styles.css'); </style>
With external stylesheet
The following line imports a CSS fifile named additional-styles.css in the root directory into the CSS fifile in which it appears:
@import '/additional-styles.css';
Inline Styles
Use inline styles to apply styling to a specifific element. Note that this is not optimal. Placing style rules in a <style> tag or external CSS fifile is encouraged in order to maintain a distinction between content and presentation.
<h1 style="color: green; text-decoration: underline;">Hello world!</h1>
Styling Lists with CSS
There are three different properties for styling list-items: list-style-type, list-style-image, and list-styleposition, which should be declared in that order.
To use square bullet points for each list-item, for example, you would use the following property-value pair:
li { list-style-type: square; }
The list-style-image property determines whether the list-item icon is set with an image, and accepts a value of none or a URL that points to an image.
li { list-style-image: url(images/bullet.png); }
The list-style-position property defifines where to position the list-item marker, and it accepts one of two values: “inside” or “outside”.
li { list-style-position: inside; }
Comments
Single Line
/* This is a CSS comment */ div { color: red; /* This is a CSS comment */ }
Multiple Line
/* This is a CSS comment */ div { color: red; }
Class Name Selectors
HTML: <div class="warning"> <p>This would be some warning copy.</p> </div> CSS: .important { color: orange; } .warning { color: blue; } .warning.important { color: red; }
Select element using its ID without the high specificity of the ID selector
HTML: <div id="element">...</div> CSS: #element { ... } /* High specificity will override many selectors */ [id="element"] { ... } /* Low specificity, can be overridden easily */
color and background-color
Colors can be applied by using color and background-color (note that this must be the American English “color” and not “colour”).
A blue background and yellow text could look like this:
h1 { color: yellow; background-color: blue; }
These colors might be a little too harsh, so you could change the code of your CSS file for slightly different shades:
body { font-size: 14px; color: navy; } h1 { color: #ffc; background-color: #009; }
Save the CSS file and refresh your browser. You will see the colors of the first heading (the h1
element) have changed to yellow and blue.
You can apply the color
and background-color
properties to most HTML elements, including body
, which will change the colors of the page and everything in it.