Cascading Style Sheets (CSS) controls the style of webpages.
By creating CSS rules, you can add styles to certain elements in your HTML pages. For example, you can change your background color, set your font to Helvetica, italicize a subheading—you get the idea.
First, it’s important to identify two different types of HTML elements.
- Block elements always start on a new line. These include tags such as <h1>, <p> and <div>.
- Inline elements flow within text. They don’t naturally start on a new line (think bolding text, such as <b>, adding images, <img>).
When it comes to visualizing CSS, pretend that each HTML element has an invisible block around it. We will be applying rules to these invisible blocks—rules which dictate the style of that particular element.
Three ways to add style
- Inline CSS: the least elegant of all the ways to add CSS to your HTML. With inline styling, you add your CSS style to every element on the page. This is the least efficient way to add CSS because you had to modify every single HTML element, one by one.
- Internal CSS: A slightly quicker way to add CSS is with
<style></style>tags within the<head>tag of your page. This is best when you are applying styles to only ONE webpage. - External CSS: The third, and most professional way, is to create an external stylesheet. This is a separate
.cssfile that is linked to each HTML file you’d like to style. This way, you can create one master stylesheet to rule them all. This is what we’ll use for every graded project you turn in for this class.
Inline CSS
Inline CSS is clunky and inefficient, and best if you’re only targeting one particular HTML element. To write inline CSS, you modify your already existing HTML element tag to include style.
<h3 style="font-size: 36px"> This title is now 36 px. </h3>
Internal stylesheets
To add in internal stylesheet, directly under your title tags, in the <head> section, you’d add style tags:
<!doctype html>
<html>
<head>
<title>Hello world!</title>
<style> Add your CSS rules here. </style>
</head>
<body>
</body>
</html>
To start stylin’, all you need to do is write some CSS rules in between the style tags.
External stylesheets
Within your <head> tag in your HTML files, you can link to an external stylesheet link:
<link href="css/style.css" rel="stylesheet">
Please note there is no closing tag, meaning, this is an empty element.
The href portion points to the CSS file, which is usually located in a folder appropriately named css. If you file is named something besides style.css or housed in a different folder, you’ll need to update the href value so that it matches your file name and location. Rel stands for relationship.
Additionally, you can link multiple stylesheets to one HTML page.
Note: Older versions of HTML will have you also include type="text" in the stylesheet link. If you see this, just know that it refers to the type of document being linked. It won’t hurt to include it, but you don’t technically need it.
CSS Rules
This is the basic structure of a CSS rule:
h1 {font-family: Georgia;
color: blueviolet;}
p {font-size: 16px;
font-family: Verdana;}
Selector: h1, p
The selector refers to the element you want the style applied to.
Declaration: {font-family: Georgia; color: blueviolet;}
The declaration is the part in the curly brackets. The declaration includes information on how the elements should be styled, written in the form of properties and values.
In other words: selector {declaration}
Properties and values: {property: value; property: value;}
Within the declaration, you have properties followed by values. Each property is separated by a semi-colon.
In the above example, font-family is a property, followed by the value of Georgia.
Adding colors
The predefined color options (the ones that appear as simply names such as blueviolet) are ones recognized by many browsers.
Hex codes are another way to add color. Hex codes are six-digit codes that represent the amount of red, green and blue in that particular shade. They always start with a hashtag, for example, #BA0C2F is UGA’s official Bulldog Red.
To change the color of a paragraph, you add a “p” selector followed by the declaration: {color: green;}
<!DOCTYPE html>
<title>Hello World!</title>
<style>
p {color: green;}
</style>
</head>
<body>
<p> This text is now green. </p>
</body>
</html>
Selecting colors
Colors must have high contrast—meaning, you would never have light gray text on a medium gray page; or pink text against a purple background.
Text is easiest to read when there is high contrast between colors, especially for accessibility purposes.
Here are two of my favorite websites generate color combinations: