Author: David Zhang
Date: 08/10/2021
Version: 1.0
Based on CSS Crash Course
CSS - Cascading Style sheets
Cascading style sheets are called cascading because several different style sheets can be active for a single document at the same time. When multiple style sheets are in effect, they are applied to the document in a pre-determined sequence set by the browser: their formatting instructions can be thought of as cascading from one style sheet to the next.
NOT a programming language
Style sheet/Styling language
Used for website layout and design
Can be extended with Sass/Less
<h1 style="color:red">Hello World!h1>
Keep the presentation and functionality and styling separate or as much as possible
tags within a single document<head>
<style type="text/css">
h1{
color:"red"
}
style>
head>
<body>
<h1>Hello World!h1>
body>
Can only be used in the particular html file and fatten the html file as well
external.css
file(BEST)/*This is a CSS file, style.css*/
h1{
color:"red"
}
<head>
<link rel="stylesheet" type="text/css"
href="../style.css">
head>
<body>
<h1>Hello World!h1>
body>
body{
color:red;
background:coral;
}
h1{
color:#00ff00;
}
p{
color:rgb(0,0,255);
}
Color names
HTML5 color names
Hexadecimal
RGB
body{
/* If the first font cannot be applied the apply the second one */
font-family:Arial, sans-serif;
font-size:16px;
font-weight:bold;
/* Same as above */
font: bold 16px Arial,sans-serif;
text-decoration:underline;
text-transform:uppercase;
text-align:center;
letter-spacing:0.2em;
word-spacing:1em;
line-height:1.6em;
margin:auto;
/* Use percent can adapt to the change of browser size */
width:80%;
border:5px red solid;
/* rounded corner */
border-radius:15px
}
/* All same */
p{
margin-top:5px;
margin-bottom:5px;
margin-right:10px;
margin-left:10px;
}
/* top right bottom left */
p{
margin:5px 10px 5px 10px;
}
/* top and bottom right and left */
p{
margin: 5px 10px;
}
Basically no difference
ID should be unique; class may be reused
Use .
to target class, #
to target ID in .css
file
.box-1{
}
ul{
list-style:square;
list-style:none;
list-style-image:url('../images/check.png');}
li{
display: inline;
}
a{
text-decoration:none;
color:#000;
}
a:hover{color:red;}
a:active{color:green;}
a:visited{color:black;}
<form class="my-form">
<div class="form-group">
<label>Name: label>
<input type="text" name="name">
div>
<div class="form-group">
<label>Email: label>
<input type="text" name="email">
div>
<div class="form-group">
<label>Message: label>
<textarea name="message">textarea>
div>
<input class="button" type="submit" value="Submit" name="">
form>
.my-form{
padding:20px;
}
.my-form .form-group{
padding-bottom:15px
}
.my-form .label{
display:block;
}
.my-form input[type="text"], .myform textarea{
padding:8px;
width:100%
}
.button{
background-color:#333;
color:#fff;
padding:10px 15px;
border:none;
}
.button:hover{
background-color:red;
color:#fff;
}
<div id="main-block">
<p>smthp>
div>
<div id="sidebar">
<p>smthp>
div>
<div class="clr">div>
/* clear the float */
.clr{
clear:both;
}
#main-block{
float:left;
width:70%;
padding:15px;
box-sizing:border-box;
}
#sidebar{
float:right;
width:30%;
background-color:#333;
color:#fff;
padding:15px;
box-sizing:border-box;
}
Static (default)
render the elements in order of the document
Relative
Absolute
allow us to target whatever position we want inside a relative element
Fixed
always in the same position
Initial
Inherit
<div class="p-box">
<h1>Hello World!h1>
<h2>Goodbye!h2>
div>
/* h1 will stay in the top of the page not the block because its position is absolute */
.p-box{
width:800px;
height:500px;
border:1px solid #000;
margin-top:30px;
}
.p-box h1{
position:absolute;
top:40px;
}
/* in this way h1 will be in the given position inside the block */
.p-box{
width:800px;
height:500px;
border:1px solid #000;
margin-top:30px;
position:relative;
}
.p-box h1{
position:absolute;
top:40px;
left:200px;
}
<a class="fix-me button" href="">Helloa>
/* the button will stuck in the fixed position */
.fix-me{
position:fixed;
}
/* some features about background image */
.p-box{
background-image:url('../bgimage.jpg');
background-repeat:no-repeat;
background-postion:100px 200px;
background-position:center center;
background-position:center top;
}
<ul class="my-list">
<li>List 1li>
<li>List 2li>
<li>List 3li>
<li>List 4li>
<li>List 5li>
<li>List 6li>
<li>List 7li>
ul>
.my-list li:first-child{
background:red;
}
.my-list li:last-child{
background:blue;
}
.my-list li:nth-child(5){
background:green;
}
.my-list li:nth-child(even){
background:yellow;
}
For response
@media(max-width: 600px){
#main{
float: none;
width: 100%;
}
#sidebar{
float: none;
width: 100%;
}
}