What is CSS?
# 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>
# 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;
<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; }
# 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; }
# 4. Remove Link Underlines With This Sample CSS a { text-decoration: none; } a:hover { text-decoration: underline; }
# 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>