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.
A CSS rule consists of a selector and a declaration block.
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.
EXAMPLE
In this example all <p> elements will be center-aligned, with a red text color:
<!DOCTYPE html>
<html>
<head>
<style>
p{
color: red;
text-align: center;
</style>
</head>
<body>
<p>Hello World!</p>
<p>These paragraphs are styled with CSS.</p>
</body>
</html>
Output-
Hello World!
These paragraphs are styled with CSS.
Example Explained
p is a selector in CSS (it points to the HTML element you want to style: <p>).
color is a property, and red is the property value
text-align is a property, and center is the property value
CSS Selectors types-
CSS selectors are used to "find" (or select) the HTML elements you want to
style.
Selectors makes it easy for us to easily target single\multiple HTML elements
in the markup .
CSS selectors categories:-
1)Css element selector
2)Css id selector
3)Css class selector
4)Css group selector
1)The CSS element Selector
The element selector selects HTML elements based on the element name.
!DOCTYPE html>
<html>
<head>
<style>
p{
text-align: center;
color: red;
}
</style>
</head>
<body>
<p>Every paragraph will be affected by the style.</p>
<p>Me too!</p>
<p>And me!</p>
</body>
</html>
OUTPUT-
Every paragraph will be affected by the style.
Me too!
And me!
2)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
The CSS rule below will be applied to the HTML element with id="para1":
<!DOCTYPE html>
<html>
<head>
<style>
#para1 {
text-align: center;
color: red;
</style>
</head>
<body>
<p id="para1">Hello World!</p>
<p>This paragraph is not affected by the style.</p>
</body>
</html>
Output-
Hello World!
This paragraph is not affected by the style.
Note: An id name cannot start with a number!
3)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
In this example all HTML elements with class="center" will be red and center-
aligned:
<!DOCTYPE html>
<html>
<head>
<style>
.center {
text-align: center;
color: red;
</style>
</head>
<body>
<h1 class="center">Red and center-aligned heading</h1>
<p class="center">Red and center-aligned paragraph.</p>
</body>
</html>
Output-
Red and center-aligned heading
Red and center-aligned paragraph.
4.The CSS Grouping Selector
The grouping selector selects all the HTML elements with the same style
definitions.
Look at the following CSS code (the h1, h2, and p elements have the same
style definitions):
h1 {
text-align: center;
color: red;
}
h2 {
text-align: center;
color: red;
}
p {
text-align: center;
color: red;
}
It will be better to group the selectors, to minimize the code.
To group selectors, separate each selector with a comma.
Example
In this example we have grouped the selectors from the code above:
<!DOCTYPE html>
<html>
<head>
<style>
h1, h2, p {
text-align: center;
color: red;
</style>
</head>
<body>
<h1>Hello World!</h1>
<h2>Smaller heading!</h2>
<p>This is a paragraph.</p>
</body>
</html>
Output- Hello World!
Smaller heading!
This is a paragraph.
5) The CSS Universal Selector
The universal selector (*) selects all HTML elements on the page.
Example
The CSS rule below will affect every HTML element on the page:
<!DOCTYPE html>
<html>
<head>
<style>
*{
text-align: center;
color: blue;
</style>
</head>
<body>
<h1>Hello world!</h1>
<p>Every element on the page will be affected by the style.</p>
<p id="para1">Me too!</p>
<p>And me!</p>
</body>
</html>
Output- Hello world!
Every element on the page will be affected by the style.
Me too!
And me!
Three Ways to Insert CSS
There are three ways of inserting a style sheet:
External CSS
Internal CSS
Inline CSS
1.)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.
<!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>
Output-
This is a heading
This is a paragraph.
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
Internal styles are defined within the <style> element, inside the <head>
section of an HTML page:
<!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>
Output-
This is a heading
This is a paragraph.
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
External styles are defined within the <link> element, inside the <head>
section of an HTML page:
<!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>
Output-
This is a heading
This is a paragraph.
An external style sheet can be written in any text editor, and must be
saved with a .css extension.
The external .css file should not contain any HTML tags.
Here is how the "mystyle.css" file looks:
"mystyle.css"
body {
background-color: lightblue;
}
h1 {
color: navy;
margin-left: 20px;
}
Note: Do not add a space between the property value (20) and the unit
(px):
Incorrect (space): margin-left: 20 px;
Correct (no space): margin-left: 20px;
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 */:
<!DOCTYPE html>
<html>
<head>
<style>
/* This is a single-line comment */
p {
color: red;
}
</style>
</head>
<body>
<p>Hello World!</p>
<p>This paragraph is styled with CSS.</p>
<p>CSS comments are not shown in the output.</p>
</body>
</html>
OUTPUT-
Hello World!
This paragraph is styled with CSS.
CSS comments are not shown in the output.
In the following example, we use a combination of HTML and CSS
comments:
Example
<!DOCTYPE html>
<html>
<head>
<style>
p {
color: red; /* Set text color to red */ css comments
}
</style>
</head>
<body>
<h2>My Heading</h2>
<!-- These paragraphs will be red --> html comments
<p>Hello World!</p>
<p>This paragraph is styled with CSS.</p>
<p>HTML and CSS comments are not shown in the output.</p>
</body>
</html>
CSS Color Names
In CSS, a color can be specified by using a predefined color name:
<!DOCTYPE html>
<html>
<body>
<h1 style="background-color:Tomato;">Tomato</h1>
<h1 style="background-color:Orange;">Orange</h1>
<h1 style="background-color:DodgerBlue;">DodgerBlue</h1>
<h1 style="background-color:MediumSeaGreen;">MediumSeaGreen</h1>
<h1 style="background-color:Gray;">Gray</h1>
<h1 style="background-color:SlateBlue;">SlateBlue</h1>
<h1 style="background-color:Violet;">Violet</h1>
</body>
</html>
Output-
Tomato
Orange
DodgerBlue
MediumSeaGreen
Gray
SlateBlue
Violet
CSS Border Style
The border-style property specifies what kind of border to display.
The following values are allowed:
dotted - Defines a dotted border
dashed - Defines a dashed border
solid - Defines a solid border
double - Defines a double border
groove - Defines a 3D grooved border. The effect depends on the
border-color value
ridge - Defines a 3D ridged border. The effect depends on the border-
color value
inset - Defines a 3D inset border. The effect depends on the border-
color value
outset - Defines a 3D outset border. The effect depends on the
border-color value
none - Defines no border
hidden - Defines a hidden border
The border-style property can have from one to four values (for the top
border, right border, bottom border, and the left border).
Example
Demonstration of the different border styles:
<!DOCTYPE html>
<html>
<head>
<style>
p.dotted {border-style: dotted;}
p.dashed {border-style: dashed;}
p.solid {border-style: solid;}
p.double {border-style: double;}
p.groove {border-style: groove;}
p.ridge {border-style: ridge;}
p.inset {border-style: inset;}
p.outset {border-style: outset;}
p.none {border-style: none;}
p.hidden {border-style: hidden;}
p.mix {border-style: dotted dashed solid double;}
</style>
</head>
<body>
<h2>The border-style Property</h2>
<p>This property specifies what kind of border to display:</p>
<p class="dotted">A dotted border.</p>
<p class="dashed">A dashed border.</p>
<p class="solid">A solid border.</p>
<p class="double">A double border.</p>
<p class="groove">A groove border.</p>
<p class="ridge">A ridge border.</p>
<p class="inset">An inset border.</p>
<p class="outset">An outset border.</p>
<p class="none">No border.</p>
<p class="hidden">A hidden border.</p>
<p class="mix">A mixed border.</p>
</body></html>
The border-style Property
This property specifies what kind of border to display:
A dotted border.
A dashed border.
A solid border.
A double border.
A groove border.
A ridge border.
An inset border.
An outset border.
No border.
A hidden border.
A mixed border.
