CSS is the language we use to style a Web page.
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
Why Use CSS?
CSS is used to define styles for your web pages, including the design, layout
and variations in display for different devices and screen sizes.
Ex:
<style>
body {
background-color: lightblue;
}
h1 {
color: white;
text-align: center;
}
</style>
How To Add CSS
Three Ways to Insert CSS
There are three ways of inserting a style sheet:
External CSS
Internal CSS
Inline CSS
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.
<head>
<link rel="stylesheet" href="mystyle.css">
</head>
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.
<head>
<style>
body {
background-color: linen;
}
</style>
</head>
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.
Ex: <p style="color:red;">This is a paragraph.</p>
CSS Selectors
A CSS selector selects the HTML element(s) you want to style.
CSS Selectors
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)
The CSS element Selector
The element selector selects HTML elements based on the element name.
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.
#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.
.center {
text-align: center;
color: red;
}
The CSS Universal Selector
The universal selector (*) selects all HTML elements on the page.
* {
text-align: center;
color: blue;
}
The CSS Grouping Selector
The grouping selector selects all the HTML elements with the same style
definitions.
h1, h2, p {
text-align: center;
color: red;
}
Descendant Combinator
The descendant combinator matches all elements that are descendants of a
specified element.
The following example selects all <p> elements inside <div> elements:
div p {
background-color: yellow;
}
Child Combinator (>)
The child combinator selects all elements that are the children of a specified
element.
The following example selects all <p> elements that are children of a <div>
element:
div > p {
background-color: yellow;
}
Next Sibling Combinator (+)
The next sibling combinator is used to select an element that is directly after
another specific element.
Sibling elements must have the same parent element, and "adjacent" means
"immediately following".
The following example selects the first <p> element that are placed
immediately after <div> elements:
div + p {
background-color: yellow;
}
CSS Pseudo-classes
What are Pseudo-classes?
A pseudo-class is used to define a special state of an element.
For example, it can be used to:
Style an element when a user moves the mouse over it
Style visited and unvisited links differently
Style an element when it gets focus
Syntax
The syntax of pseudo-classes:
selector:pseudo-class {
property: value;
}
Anchor Pseudo-classes
Links can be displayed in different ways:
/* unvisited link */
a:link {
color: red;
}
/* visited link */
a:visited {
color: green;
}
/* mouse over link */
a:hover, a:active{
color: blue;}
Pseudo-classes and HTML Classes
Hover on <div>
An example of using the :hover pseudo-class on a <div> element:
a.highlight:hover {
color: #ff0000;
}
CSS Pseudo-elements
What are Pseudo-Elements?
A CSS pseudo-element is used to style specific parts of an element.
For example, it can be used to:
Style the first letter or line, of an element
Insert content before or after an element
Style the markers of list items
Style the viewbox behind a dialog box
Syntax
The syntax of pseudo-elements:
selector::pseudo-element {
property: value;
}
The ::first-letter Pseudo-element
The ::first-letter pseudo-element is used to add a special style to the first
letter of a text.
The following example formats the first letter of the text in all <p> elements:
p::first-letter {
color: #ff0000;
font-size: xx-large;
}
CSS [attribute] Selector
The [attribute] selector is used to select elements with a specified attribute.
The following example selects all <a> elements with a target attribute:
a[target] {
background-color: yellow;
}
