Sir Tom taught us about CSS(Cascading Style Sheet).
CSS-Cascading Style Sheets (CSS) is a style sheet language used for describing the look and formatting of a document written in a markup language.
3 Implementations
1) In-line – as attribute
ex: <span style=“color: #00ff00”>Text</span>
2) Embedded/Internal – as style tag
ex: <style type=“text/css>
body
{
color: #00ff00
}
</style>
3) External – linked from css file
ex:
<head>
<link rel="stylesheet" type="text/css" href=“myCSS.css">
</head>
Selectors
Element Selectors: selects allelements of a specific type/tag (<body>, <h1>, <p>, etc.)
Example:
h3
{
color: #009e54;
font-weight: bold;
}
Class Selectors: selects all elements that belong to a given class.
Example;
class=“myClass”
.myClass
{
color: #009e54;
font-weight: bold;
}
ID Selectors: selects a single element that’s been given a unique id.
Example:
id=“mainPage”
#mainPage
{
color: #009e54;
font-weight: bold;
background-color: #4285f4;
}
Pseudo Selectors: combines a selector with a user activated state(:hover, :visited)
Example:
a:hover
{
color: #009e54;
font-weight: bold;
}
Sir Tom gave us an activity about CSS.
css_sample.html
<html>
<head>
<style type=“text/css”>
body
{
font-family: Arial;
color: #4285f4;
background-color: #090909;
}
</style>
</head>
<body>Hello World!</body>
</html>
