icon picker
CSS basic

Hex Color 十六進位色彩

rule →block
each rule select a tag on an HTML page
"." → element
card-title 標題
text-align 文字對齊
border 外框
border-radius 外框鈍角
padding 填滿
padding: 5px 10px
Untitled 1.png
margin: 20px
Untitled 2.png
margin 幅度
Untitled 3.png

External Style Sheet

body{ font-family:"Arial";}.main-image{ border:solid 4px grey; border-radius:50%;}h1{ background-color:#BDC2BB; padding:5px;}
.section-title{ text-transform:capitalize;}
<!doctype html><html> <head> <title>Hedi Huang's Resume </title> <link rel="stylesheet" href="resume.css"> </head> <body> <img src="https://placeimg.com/120/120/animals" alt="animal" class="main-image"> <h1>Resume</h1> <h2 class="section-title">Nice to meet u!</h2> <ul> <li>CHIH CHING HUANG</li> <li>NDHU PHYCHOLOGY</li> </ul> </body></html>

Importing Style Sheets

both usable in html & css
@import "import-styles.css"; bring one or more style sheets into another style sheet


selector{ property: value;}


universal selector 整個頁面套用
* { background-color: lightyellow;}
type selector select an element type to style

header's text color **not need TEXT**
header { color: white;}

ID selector
#/*id*/{ background-color: lightgrey; color: blue;}
<!--use<p>for example--><p id="me">lalalala~</p>
class selector(best) use"." in the front and there can be multiple classes at once.(ex. h2)
.text { color: orange;}
.background { background-color: lightgreen;}
<h2 class="text background"> </h2> <p class="text"> </p>
ID selector & class selector can use at the same time! BUT, ID selector's style will weight more~ so not using the same properties in ID and class selector—
<h2 id="id" class="class"></h2>

Descendant Selectors 後裔
use in <span>
<header> <span>Journey through the Sierra Nevada Mountains</span> <h1>Lake Tahoe, California</h1> </header>
/*header+" "+span*/header span { color: darkblue; font-size: 26px;}
use in <li>
/*ul+" "+li*/ul li { color: purple; font-size: 24px;}
.main-content p { font-weight: bold;}
<div class="main-content"> <h2>Check out all the Wildlife</h2> <p> As spawning season approaches, the fish acquire a humpback and protuberant jaw. After spawning, they die and their carcasses provide a feast for gatherings of mink, bears, and Bald eagles. </p> <a href="#">See the Wildlife</a> </div>

Pseudo classes(user interaction)

/*連結"未"按*/a:link { color: darkgreen;}
/*按下連結"時"*/a:active { color: lightcoral;}
/*連結"已"按*/a:visited { color: lightgreen;}
/*按下Tab 會依序focus連結*/a:focus { color: white; background-color: orange;}
/*hover 可運用在多種element上*//*游標放在"連結"上*/a:hover { color: forestgreen;}
/*游標放在"段落"上*/p:hover { color: forestgreen;}
a { text-shadow: -2.5px -1.5px rgba(167, 114, 224, 0.92);}
Untitled 4.png

Comment suggest

/*Class selectors*//*Type selectors*//*ID selectors*//**//**/

data type

when to use???
RWD → percentage, em, rem font-size → rem


Untitled 5.png
Untitled 6.png
Untitled 7.png
Untitled 8.png
Untitled 9.png
Untitled 10.png
Untitled 11.png
Untitled 12.png
Untitled 13.png


for font-size, padding, margin, width
header { background-color: pink; width: 50%;/*只占50%的寬 RWD*/}
Untitled 14.png
header { background-color: pink; width: 50%; margin-left: 20%;/*左邊間隔全寬20%*/}
Untitled 15.png
/*You can also edit two or more classes at once.*/.primary-contect,.secondary-content { width: 60%;}
p { font-size: 150%;/*default size is 16px, so 150% means 16px*1.5 */}


absolute unit ex. px
header { background-color: pink; width: 480px;/*只占480px的寬*/}
Untitled 16.png
#tips# main-header will always take up 960px of the screen.

em 1em=16px; 2em=32px; .5em=8px *warning!* em units have compound effect

rem only relative to root element not compound effect


p { text-align: justify;}
Untitled 17.png
header h1 { text-transform: capitalize;}
<header> <span>Journey through the Sierra Nevada Mountains</span> <h1>lake tahoe, california</h1> </header>
Untitled 18.png
text-decoration none → link put off underline
a { text-decoration: none;}
Untitled 19.png
underline line-through
3d text-shadow


font-weight(bold, normal) All headings by default are set to bold.
Want to print your doc?
This is not the way.
Try clicking the ⋯ next to your doc name or using a keyboard shortcut (
) instead.