What is CSS? Itroduction of CCS
CSS
{tocify} $title={Table of Contents}
What is CSS?
- CSS stands for Cascading Stylesheet.
- CSS is a stylesheet language use to describe the presentation of an HTML document.
- CSS describes how element should be rendered on screen.
CSS Prerequisites
Basic knowledge of working with files or file management.
Basic understanding of HTML. In order to start learning CSS you have a basic understanding of HTML first.
Why use CSS
CSS define style of your web pages including design, layout and variations in display across devices and screen sizes.
CSS can save you a lot of work. An external stylesheet saved as .css can be used to style multiple web pages all at once!
CSS Example
body{
background-color: gray;
}
p{
font-size: 20px;
color: gold;
}
CSS Syntax
A CSS ruleset/rule is composed of a selector and a declaration block.
div{
background-color: black;
width: 200px;
height: 200px;
}
The selector or group of selector target the elements we want to style.
div{
background-color: black;
width: 200px;
height: 200px;
}
The declaration block are grouped in block. Each declaration block contains CSS declaration which are wrapped by an opening curly brace { and a closing curly brace } .
div{
background-color: black;
width: 200px;
height: 200px;
}
CSS declaration or declarations are contained inside a declaration block. Each declaration has to be separated by a semicolon ; otherwise the codes don’t work. It is permitted not to put a semicolon int the last assertion.
div{
background-color :black;
width: 200px;
height: 200px;
}
A CSS statement is made out of a couple of a property and a worth separated by a colon.
background-color : black;
property the colon that separates the two entities value
- Property: human-readable identifier that indicates which stylistic feature to change.
- Value: it is given to a property which indicates how the specified stylistic feature should be changed.
CSS Selectors
The following are simple CSS selectors.
Element Selectors
It is the simplest way to target all elements of a given type.
Example:
h1{
font-weight: bold;
}
p{
color: green;
}
Class Selector
Multiple elements can have the same class value.
CSS class selector are very useful when targeting different elements.
The class selector consider of a dot ( . ) followed by a class name.
A class name is defined using the class attribute.
CSS class selector are very useful when targeting different elements.
The class selector consider of a dot ( . ) followed by a class name.
A class name is defined using the class attribute.
Example:
.underlined-text{
text-decoration: underline;
}
.emboldened-text{
font-weight: bold;
}
ID Selectors
The ID selector is very useful when targeting a single element.
An ID selector consists of a hash ( # ) followed by an ID name.
An ID name is defined using the id attribute.
Example:
#blue {
background-color: blue;
Width: 200px;
height : 200px;
}
#red {
background-color: red;
width:200px;
height: 200px;
}
We can target only specific HTML element with the given class or id .
the example below only selects <p> element with the class=”red” and id =”green” attributes.
Example:
p .red{
color: red;
}
p #green{
color: green;
}
Grouping Selector
Sometimes multiple CSS rulesets may have similar declarations. Take a look this example below:
Example:
h1{
font-family: Time New Roman;
color: green;
}
p{
font-family: Time New Roman;
color: green;
}
Looks inefficient right? Instead of repeating the same declarations we can simply have a group of selector in a CSS ruleset.
A group of selectors consists of selectors separated by commas.
Example:
h1, p{
font-family: Time New Roman;
color: green;
}
CSS Comments
comments can be used to explain CSS codes and make it more readable.
CSS comments are very useful for people who easily forget things like me!
They are not rendered by browsers.
A CSS comment starts whit /* and ends with */ .
Example:
p{
color: fuchsia;
/* a single line CSS comment */
}
/* a multi-line comment
cause we love CSS nut we
might still forger what some codes */
CSS Inserting
There are three simple ways to insert CSS int an HTML document.
- Internal Style Sheet
- External Style Sheet
- Inline Styling
Internal Style Sheet is useful when a single HTML document has its unique styles.
With this, CSS rulesets/rules should be included in the <style> element.
The <style> element should only be enclosed inside the <head> element.
For following best practices we can use the type attribute to define to the MIME type of the <style> tag.
The text/css value indicates that the content is CSS.
Example:
<!DOCTYPE htmlp>
<html>
<head>
<title>PoorWebDev</title>
<link rel="stylesheet" href="style.css">
<style type="text/css">
p {
color: red;
}
</style>
</head>
<body>
<h1>This is a header </h1>
<p>This is a paragraph</p>
<body>
<html>
External Style Sheet
An external style sheet can be very useful when multiple HTML pages have the same style.
This can be achieves by having an external style sheet file.
An external style sheet file must be saved with a .css extension e.g. filename.css .
Then we need to use the <link> element to include the file in our HTML page.
There should be no <style> element inside a CSS file!
Example:
the style.css file contains the codes.
body{
background: blue;
}
p{
color: red;
}
Now that we have our external style sheet file. The following stage is to include it for your HTML page.
We can basically do by characterizing its record way utilizing the <link> element with its href attribute.
<!DOCTYPE htmlp>
<html>
<head>
<title>PoorWebDev</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>This is a header </h1>
<p>This is a paragraph</p>
<body>
<html>
Inline Styling
Inline styling is helpful for styling a solitary component.
It is done by using the style attribute.
Its value contains CSS declarations.
<!DOCTYPE htmlp>
<html>
<head>
<title>PoorWebDev</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<p style="color:aquamarine;">i love Poorwebdev</p>
<h1>This is a header </h1>
<p>This is a paragraph</p>
<body>
<html>