What is CSS?
![notion image](https://cdn.popsy.co/images/https%3A%2F%2Fwww.notion.so%2Fimage%2Fhttps%253A%252F%252Fs3-us-west-2.amazonaws.com%252Fsecure.notion-static.com%252F4e08a920-2e41-4945-9cb4-d741afa26ac6%252FUntitled.png%3Ftable%3Dblock%26id%3D2481eb58-a566-4e0c-a31c-64fd68c6a2e1%26cache%3Dv2?width=1500&optimizer=image)
![notion image](https://cdn.popsy.co/images/https%3A%2F%2Fwww.notion.so%2Fimage%2Fhttps%253A%252F%252Fs3-us-west-2.amazonaws.com%252Fsecure.notion-static.com%252F814ee34a-67e5-4f6e-8468-4bb29b1f5014%252FUntitled.png%3Ftable%3Dblock%26id%3Dc6e64049-0e58-40ab-a1a0-d9960aafcb57%26cache%3Dv2?width=1500&optimizer=image)
# 1. CSS 的三種宣告方法 p { font-size: 120%; color: dimgray; } p.smallcaps { font-variant: small-caps; } <p class="smallcaps">Your paragraph here.</p> <p style="color: #333;">Your paragraph here.</p>
![notion image](https://cdn.popsy.co/images/https%3A%2F%2Fwww.notion.so%2Fimage%2Fhttps%253A%252F%252Fs3-us-west-2.amazonaws.com%252Fsecure.notion-static.com%252F7c6734c4-de9f-4078-944e-bc2a2d8b0ad7%252FUntitled.png%3Ftable%3Dblock%26id%3D25d9930a-1a57-487b-b5fe-f2fd444fe793%26cache%3Dv2?width=1500&optimizer=image)
# 2. CSS Example to Change Character Case p { font-size: 120%; color: dimgray; } p.smallcaps { font-variant: small-caps; } <p class="smallcaps">Your paragraph here.</p> text-transform: uppercase; text-transform: lowercase; text-transform: capitalize;
![notion image](https://cdn.popsy.co/images/https%3A%2F%2Fwww.notion.so%2Fimage%2Fhttps%253A%252F%252Fs3-us-west-2.amazonaws.com%252Fsecure.notion-static.com%252F8d77fabd-8f03-45ec-ac95-8054a5795214%252FUntitled.png%3Ftable%3Dblock%26id%3Da70e1762-0a9d-434a-9930-a0e941127d59%26cache%3Dv2?width=1500&optimizer=image)
<p class="important">Your important paragraph here.</p> p.important { border-style: solid; border-width: 5px; border-color: purple; } --- <p id="important">Your important paragraph here.</p> p.important { border-style: solid; border-width: 5px; border-color: purple; }
![notion image](https://cdn.popsy.co/images/https%3A%2F%2Fwww.notion.so%2Fimage%2Fhttps%253A%252F%252Fs3-us-west-2.amazonaws.com%252Fsecure.notion-static.com%252F6bac84f5-704a-40e4-8ffc-70b7139b0e98%252FUntitled.png%3Ftable%3Dblock%26id%3Daecae231-55aa-4459-a1a3-5ff4004df4b3%26cache%3Dv2?width=1500&optimizer=image)
# 3. Easy CSS to Change Link Colors a:link { color: gray; } a:visited { color: green; } a:hover { color: purple; } a:active { color: teal; } a:link, a:visited, a:hover, a:active { background-color: green; color: white; padding: 10px 25px; text-align: center; text-decoration: none; display: inline-block; }
![notion image](https://cdn.popsy.co/images/https%3A%2F%2Fwww.notion.so%2Fimage%2Fhttps%253A%252F%252Fs3-us-west-2.amazonaws.com%252Fsecure.notion-static.com%252F5d545ac7-2a5f-4fbc-8f1c-6145a2a4c41c%252FUntitled.png%3Ftable%3Dblock%26id%3D608f0202-2322-40ab-a188-d368e4e160af%26cache%3Dv2?width=1500&optimizer=image)
# 4. Remove Link Underlines With This Sample CSS a { text-decoration: none; } a:hover { text-decoration: underline; }
![notion image](https://cdn.popsy.co/images/https%3A%2F%2Fwww.notion.so%2Fimage%2Fhttps%253A%252F%252Fs3-us-west-2.amazonaws.com%252Fsecure.notion-static.com%252Fc1df52ce-02d4-4f34-9265-6d9689b9a593%252FUntitled.png%3Ftable%3Dblock%26id%3Ddb3ce94a-815e-4d4b-94d7-4a467db963a5%26cache%3Dv2?width=1500&optimizer=image)
# Center-Align Elements With Basic CSS Code .center { display: block; margin: auto; } img { margin: auto; } .centertext { text-align: center; } <p class="centertext">This text will be centered.</p>
![notion image](https://cdn.popsy.co/images/https%3A%2F%2Fwww.notion.so%2Fimage%2Fhttps%253A%252F%252Fs3-us-west-2.amazonaws.com%252Fsecure.notion-static.com%252F7d3b0755-6241-4a39-ba8c-8f0c39e65d57%252FUntitled.png%3Ftable%3Dblock%26id%3D7b14f922-60c2-40c6-b0a9-ac605e558080%26cache%3Dv2?width=1500&optimizer=image)