Cascading Style Sheets Lecture 1
Cascading Style Sheets Lecture 1
CSS
What is 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 .
Inline CSS
Internal CSS
External CSS
CSS
CSS Syntax
A CSS rule-set consists of a selector and a declaration block:
Inline CSS
To use inline styles, add the style attribute to the relevant element. The
style attribute can contain any CSS property.
Example:
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:
<style>
body {
background-color: linen;
}
h1 {
color: maroon;
}
</style>
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.
Example:
CSS Selectors
CSS selectors are used to "find" (or select) the HTML elements you
want to style.
Example:
#para1 {
text-align: center;
color: red;
}
Note: An id name cannot start with a number!
CSS
Example:
.center {
text-align: center;
color: red;
}
Note: A class name cannot start with a number!
CSS
Example:
*{
text-align: center;
color: blue;
}
Note: A class name cannot start with a number!
CSS
HSL Value
In CSS, a color can be specified using hue, saturation, and lightness
(HSL) in the form