Cascading Style Sheet or CSS for short is a language for
specifying how documents are presented to users — how
they are styled, and laid out.
-
CSS can be used for very basic document text styling
— for example, for changing the color and size of
headings and links.
-
It can be used to create a layout — for example,
turning a single column of text into a layout with a
main content area and a sidebar for related
information.
-
It can even be used for effects such as animation,
and in many other creative ways.
What you should already know
This guide assumes you have the following basic
background:
-
A general understanding of the Internet, the World
Wide Web (WWW), and basic computer literacy.
-
Basic working knowledge of HyperText Markup Language
(HTML), and computer files.
CSS is a language for specifying how documents are
presented to users — how they are styled, laid out, etc.
A document is usually a text file structured using a
markup language like HTML. Presenting a document to a
user means converting it into a form usable by your
audience. Browsers, like Firefox, Chrome, or Edge, are
designed to present documents visually, for example, on
a computer screen, projector, or printer.
CSS can be used for very basic document text styling —
for example, for changing the color and size of headings
and links. It can be used to create a layout — for
example, turning a single column of text into a layout
with a main content area and a sidebar for related
information. It can even be used for effects such as
animation.
In CSS, selectors are used to target the HTML elements
on our web pages that we want to style. There are a wide
variety of CSS selectors available, allowing for
fine-grained precision when selecting elements to style.
Types of selectors
There are a few different groupings of selectors, and
knowing which type of selector you might need will help
you to find the right tool for the job. See the type,
class, and ID selector examples below.
type { }
.class { }
#ID { }
Keep in mind there are numerous other pseudo-classes,
and pseudo-elements, along with many different ways to
combine CSS selectors.
There are three methods of applying CSS to a document: with
an external stylesheet, with an internal stylesheet, and
with inline styles.
External stylesheet
An external stylesheet contains CSS in a separate file with
a .css extension. This is the most common and useful method
of bringing CSS to a document. You reference an external CSS
stylesheet from an HTML
<link> element.
<!DOCTYPE
html>
<html
lang="en-GB">
<head>
<meta
charset="utf-8">
<title>My CSS experiment</title>
<link
rel="stylesheet"
href="styles.css">
</head>
<body>
<h1>Hello World!</h1>
<p>This is my first CSS example</p>
</body>
</html>
Internal stylesheet
An internal stylesheet resides within an HTML document. To
create an internal stylesheet, you place CSS inside a
<style> element
contained inside the HTML
<head> element.
The HTML for an internal stylesheet might look like this:
<!DOCTYPE
html>
<html
lang="en-GB">
<head>
<meta
charset="utf-8">
<title>My CSS experiment</title>
<style>
h1
{
color: blue;
background-color:
yellow;
border: 1px solid
black;
}
p
{
color: red;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<p>This is my first CSS example</p>
</body>
</html>
Inline styles
Inline styles are CSS declarations that affect a single HTML
element, contained within a
style attribute. The
implementation of an inline style in an HTML document might
look like this:
<!DOCTYPE
html>
<html
lang="en-GB">
<head>
<meta
charset="utf-8">
<title>My CSS experiment</title>
</head>
<body>
<h1
style="color:
blue;background-color:
yellow;border:
1px solid black;">Hello World!</h1>
<p
style="color:red;">This is my first CSS example</p>
</body>
</html>
Avoid using CSS in this way, when possible. It is the
opposite of a best practice.
Everything in CSS has a box around it, and understanding
these boxes is key to being able to create more complex
layouts with CSS, or to align items with other items.
Everything in CSS has a box around it, and understanding
these boxes is key to being able to create more complex
layouts with CSS, or to align items with other items.
The CSS box model as a whole applies to block boxes and
defines how the different parts of a box — margin,
border, padding, and content — work together to create a
box that you can see on a page. Inline boxes use just
some of the behavior defined in the box model.
Use browser devtools to view the box model
Your browser developer tools can make understanding the
box model far easier. If you inspect an element in
Firefox's DevTools, you can see the size of the element
plus its margin, padding, and border.
Styling text, font, and colors are some of the most
common things you'll do with CSS. Some styling
fundamentals include setting font, boldness, italics,
line and letter spacing, drop shadows. It's also
important to understand how to apply custom fonts to
your page, along with styling lists and links.
Styling Text
When styline text with CSS we can make many adjustments
to the way the text layout. For example, we can use
properties like
text-align to justify
the text left, the right or center it.
-
text-align: left
:Left-justifies the text.
-
text-align: right
:Right-justifies the text.
-
text-align: center
:Centers the text.
You can make similar adjustments to many other
properties such as line height, font size, word spacing
and many more.
Styling fonts and colors
With CSS you can easily change the color of any element
including the text. There are seemingly endless examples
of color and
font-family
combinations you can adjust. You can see some simple
examples of below.
body { background-color: white; } p { color: red; } p {
font-family: arial; }
The documentation in this guide is only a primer please
find further information at
MDN.