What is CSS?
CSS (Cascading Style Sheets) is utilized to style HTML. Essentially, it defines how HTML elements are presented in web browsers, including aspects like design, layout, and adjustments for various devices and screen sizes.
CSS Syntax
CSS is a rule-based language, which means you need to define the rules by establishing groups of styles that should be applied to elements or groups of elements on your website.
​
For example, you can format the main heading on one of your pages to be displayed as a large blue text with 16 pixels as font-size, and style the paragraphs with "courier" font and font-size 12px. See example below:
CSS
h1 {
color:blue;
font-size:16px;
​}
p {
font-family: courier;
font-size: 12px;
}
-
h1 is a selector and refers to the HTML element that is about to be styled.
-
{ } curly braces enclose declarations blocks.
-
Declarations have a property and a value. For example, in the previous example, "color" is the property and "red", followed by a colon, is the value for main headings. On the other hand, "font-family​" is the property and "courier" followed by a colon is the value for paragraphs.
​​
CSS Selectors
CSS selectors are utilized to identify the HTML elements you wish to style. These selectors can be categorized into five distinct groups:
​
-
Universal Selectors.
-
Combinator selectors (look up elements based on a specific relationship between them)
-
Pseudo-class selectors (look up elements based on a certain state)
-
Pseudo-elements selectors (look up and style a part of an element)
-
Attribute selectors (look up elements based on an attribute or attribute value)
​
​
Simple selectors
They are used to choose HTML elements according to their element name (tag), id, class name:
-
Element Selector
-
ID Selector
-
Class Selector
​
Element Selector
CSS
h1 {
color: #ED1566;
font-size: 25px;
text-align: center;
width: 500px;
height: 20px;
}
p {
color: #324158;
font-size: 15px;
background-color: #CCCCCC;
width:500px;
height:20px;
HTML
<!DOCTYPE html>
<html>
<head>
<style>
...
</style>
</head>
<body>
<h1>This text is affected by h1{</h1>
<p>Me too!</p>
<p>And me!</p>
</body>
</html>
Output
ID Selector
CSS
#div-container {
color: #white;
background-color: blue;
width: 500px;
height: 20px;
}
HTML
<!DOCTYPE html>
<html>
<style>
...
</style>
<body>
<h1>This is a heading</h1>
<p>and this is a paragraph. None are affected by the CSS format</p>
<div id ="div-container"> This is a div with an id being styled by #div-container {</div>
</body>
</html>
Output
Class Selector
CSS
.paragraph-class {
color: red;
background-color: black;
width: 500px;
height: 20px;
}
HTML
<!DOCTYPE html>
<html>
<style>
...
</style>
<body>
<h1>This is a heading</h1>
<p>and this is a paragraph. None are affected by the CSS format</p>
<p class ="paragraph-class"> This is a paragraph with a class being styled by .paragraph-class</p>
</body>
</html>
Output
Universal Selectors
This selector is used to select all elements within an HTML document (including other elements inside other elements.
CSS
* {
color: red;
background-color: black;
width: 500px;
height: 20px;
}
HTML
<!DOCTYPE html>
<html>
<style>
...
</style>
<body>
<h1>This is a heading</h1>
<p>and this is a paragraph affected by a universal selector (* {)</p>
<p class ="paragraph-class"> This is a paragraph with a class being styled by .paragraph-class</p>
</body>
</html>
Output
Group Selectors
The Group selector allows you to apply the same style to all elements that are separated by commas.
CSS
*h1, .paragraph-class {
color: red;
background-color: black;
width: 500px;
height: 20px;
}
HTML
<!DOCTYPE html>
<html>
<style>
...
</style>
<body>
<h1>This is a heading</h1>
<p>and this is a paragraph affected by a universal selector (* {)</p>
<p class ="paragraph-class"> This is a paragraph with a class being styled by .paragraph-class</p>
</body>
</html>
Output
CSS Attribute Selector
The CSS Attribute Selector enables you to select elements according to their specific attributes or attribute values. This selector improves the accuracy and effectiveness of your CSS, allowing you to style elements with shared attributes.
CSS
[href] {
background-color: green;
color: white;
}
HTML
<!DOCTYPE html>
<html>
<style>
...
</style>
<body>
<h1>This is a heading</h1>
<p>and this is a paragraph</p>
<a href="https://www.victorvargasgo.com"> This is a link to the Homepage.</a>
</body>
</html>
Output
Pseudo-class Selectors in CSS
It is used to style a particular state of an element. For instance, it can be applied to change the appearance of an element when the mouse cursor hovers it. This allows a dynamic and interactive user experience.
​
The :active pseudo-class refers to an element that is presently being activated by the user, such as during the moment an element is clicked. This state is crucial for providing feedback to users, indicating that their action is being recognized.
​
User action pseudo-classes
-
:hover: triggered when a user interacts with an item using a pointing device, such as hovering the mouse pointer over it.
-
:active: activated when a user engages with an item, such as clicking on it.
-
:focus: Indicates when an element is currently focused.
-
:focus-visible: applies when an element has a focus and the user agent determines that the focus should be visibly indicated.
-
:focus-within: Matches an that is focused, along with any descendant element that also has focus
Heading 6
CSS
p:hover {
background-color: green;
color: white;
}
HTML
<!DOCTYPE html>
<html>
<style>
...
</style>
<body>
<h1>This is a heading</h1>
<p>and this is a paragraph</p>
<a href="https://www.victorvargasgo.com"> This is a link to the Homepage.</a>
</body>
</html>
Output
CSS
p:hover {
background-color: green;
color: white;
}
HTML
<!DOCTYPE html>
<html>
<style>
...
</style>
<body>
<h1>This is a heading</h1>
<p>and this is a paragraph</p>
<a href="https://www.victorvargasgo.com"> This is a link to the Homepage.</a>
</body>
</html>
Output