style element

Why Need It

make your page visually interesting
A concept: Information + Style = Visual Output
CSS file

Linking To A CSS File

Inside head, add the following code

<link href = 'mystyle.css' rel = 'stylesheet' type = 'sheet'>

Commonly Used Style Properties

color – for text color
background – background color
font-family – text fonts
font-size – text sizes
text-align(对齐) – text alignment

Defining Style Inside Head

Simple Example

<head>
    <style>
    h1{color:purple}
    p{color:blue}
    </style>
</head>

Use A Unique ID

Use #element-ID for target style

<style>
#theElementID{color:blue}
</style>

An example below

<html>
    <body>
        <ul>
            <ul id = 'rainbowColors'>
            <li id = 'red'>Red</li>
            <li id = 'orange'>Orange</li>
            <li id = 'yellow'>Yellow</li>
            <li id = 'green'>Green</li>
            <li id = 'blue'>Blue</li>
            <li id = 'indigo'>Indigo</li>
            <li id = 'violet'>Violet</li>
        </ul>
    </body>
</html>

<head>
    <style>
    #rainbowColors{background:grey}
    #red{background:red}
    #orange{background:orange}
    #yellow{background:yellow}
    #green{background:green}
    #blue{background:blue}
    #indigo{background:indigo}
    #violet{background:violet}
    </style>
</head>

The page looks like
rainbow

Use Class

Use .class-name for special class defining a style class
Specify the ‘class’ property of an element while using it

<style>
.class-name{color:blue; background:yellow}
</style>

An example

<html>
    <head>
        <style>
        .zappy{color:purple; background:yellow}
        .wow{color:blue; backgroud:lightgrey}
        </style>
    </head>
    <body>
        <h1 class = 'zappy'>My first heading</h1>
        <p class = 'wow'>My first paragraph</p>
    </body>
</html>

One thing to remember:
one element can have multiple classes(space is used)
An example

<p class = 'zappy wow'>My first paragraph</p>

Inline Style

A style rule applied to a particular element

<p style = 'text-align:right'>Welcome.</p>

Context Control

Apply a style rule to a specific context

<style>
ul li{background:yellow}
</style>

The style above is only for li element inside ul( unordered list ).

Pseudo-classes

Pseudo-classes is sort of relative to particular behavior.
Some examples below

link means a link

a:link{color:red}

visited means a link that has been already visited

a:visited{color:green}

active(点击的瞬间会呈现的样式)

a:active{color:blue}

empty means an empty element

p:empty{color:red}

hover(鼠标悬停)

a:hover{color:pink}

html - style 元素