CSS Intro | NemoQuiz

CSS (Cascading Style Sheets) is a language used to add styles to an HTML web page.

Styles include colors, borders, fonts, and many more settings that control how your content is displayed on a page.

Let’s take a very simple web page with a heading, paragraphs, and images, then add some basic styles in an internal style sheet.

Download the example cats page
(unzip the files into a folder)

View cats.html (no styles)

View cats_style.html (CSS added)

The HTML code looks like this:
(paragraphs are cut short in this preview)

<!DOCTYPE html>
<html>
<head>
	<title>Cats</title>
	<style>
		
	</style>
</head>
<body>
	<h1>All About Cats</h1>
	<p>Cats are fascinating animals[snip]<p>
	<p>Cats are obligate carnivores[snip]</p>
	<img src="cat1.jpg">
	<img src="cat2.jpg">
</body>
</html>

Notice that we have some <style> </style> tags ready to go. We will add all of the CSS code in this section of the page.

CSS code will not be literally displayed on the site – it is a set of rules that affect how the content is displayed.

Here’s an example stylesheet that you can paste into the page.
(paste this CSS code inside the existing style tags)

html {
	background-color: #440478;
}
h1 {
	color: purple;
	text-align: center;
	width: 400px;
	background-color: white;
	margin: 10px;
}
p {
	width: 400px;
	background-color: #bae2f7;
	border: 2px solid #8905f5;
	padding: 10px;
}
img {
	width: 210px;
	margin: 0;
}

This only works if you put it inside the <style> tags!

Each set of rules above follows a pattern:

element_type {
    attribute: value;
}

Each type of HTML element gets its own set of rules in this example. The element type name is the selector. The attribute is the setting we want to set, and the value is what we’re setting it to.

Syntax Explanation

Here’s a simple example where we change the text color in every paragraph to lime green and the background color to black:

p {
    color: limegreen;
    background-color: black;
}

The p stands for paragraph. Setting up the rule this way will select every paragraph (there are other ways to do it).
The rules for paragraphs are enclosed in curly braces.
Each rule is on its own line with a semicolon ending the line.
The attribute (color or background-color) is followed by a regular colon, with the value (limegreen or black) after the colon.

In the cats example, you can see that we are changing the styles for other types of elements (h1, img, html) and we are changing things other than colors (margin, border, width, etc).

This is just an intro, so your next step is to dive into the online resources and start adding styles to pages. You’ll need to experiment to see what happens.

w3schools.com/css

nemoquiz.com/css