CSS Introduction
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.
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.
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!
Example
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="[Link]">
</head>
<body>
<h1>This is a heading</h1>
<p>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>
Inline CSS
An inline style may be used to apply a unique style for a single element.
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>
CSS Comments
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;
}
*/
CSS Backgrounds
CSS background-color
The background-color property specifies the background color of an element.
Example
The background color of a page is set like this:
body {
background-color: lightblue;
}
The CSS id Selector
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.
it is used to multiple elements.
Example
.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;
}
Opacity / Transparency
The opacity property specifies the opacity/transparency of an element. It can
take a value from 0.0 - 1.0. The lower value, the more transparent:
opacity 1
opacity 0.6
opacity 0.3
opacity 0.1
Example
div {
background-color: green;
opacity: 0.3;
}
