Intro to CSS¶

Reference

What is CSS?¶

CSS stands for Cascading Style Sheets
CSS describes how HTML elements are to be displayed on screen, paper, or in other media
CSS saves a lot of work. It can control the layout of multiple web pages all at once
External stylesheets are stored in CSS files
Sample to show different CSS

CSS Syntax¶

The selector points to the HTML element you want to style.
The declaration block contains one or more declarations separated by semicolons.
Each declaration includes a CSS property name and a value, separated by a colon.
Multiple CSS declarations are separated with semicolons, and declaration blocks are surrounded by curly braces.
```
p {
color: red;
text-align: center;
}
```

Insert CSS¶

There are three ways of inserting a style sheet:

Inline CSS
Internal CSS
External CSS

Inline CSS¶

An inline style may be used to apply a unique style for a single element.
To use inline styles, add the style attribute to the relevant element.
The style attribute can contain any CSS property.

Example

<!DOCTYPE html>
<html>
<body>

<h1 style="color:blue;text-align:center;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>

</body>
</html>

Internal CSS¶

An internal style sheet may be used if one single HTML page has a unique style.
The internal style is defined inside the <style> element, inside the head section.

Example

<!DOCTYPE html>
<html>
<head>
        <style>
        body {
        background-color: linen;
        }

        h1 {
        color: maroon;
        margin-left: 40px;
        }
    </style>
</head>
<body>

    <h1>This is a heading</h1>
    <p>This is a paragraph.</p>

</body>
</html>

External CSS¶

With an external style sheet, you can change the look of an entire website by changing just one file!
Each HTML page must include a reference to the external style sheet file inside the <link> element, inside the head section.

Example

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="mystyle.css">
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

Cascading Order¶

What style will be used when there is more than one style specified for an HTML element?

All the styles in a page will "cascade" into a new "virtual" style sheet by the following rules, where number one has the highest priority:
1. Inline style (inside an HTML element)
2. External and internal style sheets (in the head section)
3. Browser default

CSS Comments¶

Comments are used to explain the code, and may help when you edit the source code at a later date.
Comments are ignored by browsers.
A CSS comment is placed inside the <style> element, and starts with /* and ends with */

Example

/* This is a single-line comment */
p {
color: red;
}

Comments can also span multiple lines:

/* This is
a multi-line
comment */

p {
color: red;
}

CSS Selectors (basic)¶

CSS selectors are used to "find" (or select) the HTML elements you want to style.

We can divide CSS selectors into five categories:

Simple selectors (select elements based on name, id, class)
Combinator selectors (select elements based on a specific relationship between them)
Pseudo-class selectors (select elements based on a certain state)
Pseudo-elements selectors (select and style a part of an element)
Attribute selectors (select elements based on an attribute or attribute value)

This page will explain the most basic CSS selectors.

The CSS element Selector¶

The element selector selects HTML elements based on the element name.

Example
```
p {
text-align: center;
color: red;
}
```

The CSS id Selector¶

The id selector uses the id attribute of an HTML element to select a specific element.
The id of an element is unique within a page, so the id selector is used to select one unique element!
To select an element with a specific id, write a hash (#) character, followed by the id of the element.

Example

#para1 {
text-align: center;
color: red;
}

The CSS class Selector¶

The class selector selects HTML elements with a specific class attribute.
To select elements with a specific class, write a period (.) character, followed by the class name.

Example

.center {
text-align: center;
color: red;
}

You can also specify that only specific HTML elements should be affected by a class.
```
p.center {
text-align: center;
color: red;
}
```

The CSS Universal Selector¶

The universal selector (*) selects all HTML elements on the page.
Example
```
* {
text-align: center;
color: blue;
}
```

All CSS Simple Selectors¶

Selector	Example	Example description
#id	#firstname	Selects the element with id="firstname"
.class	.intro	Selects all elements with class="intro"
element.class	p.intro	Selects only <p> elements with class="intro"
*	*	Selects all elements
element	p	Selects all <p> elements
element,element,..	div, p	Selects all <div> elements and all <p> elements