Jul 23, 2021 2 min read Technology

The Difference Between Id and Class

本篇文章會介紹 CSS 以及 id 和 class 的差異。

What is CSS?

Cascading Stylesheets
NOT a programming language
Stylesheet/Styling language
Used for website layout and design
Can be extended with Sass/Less

3 Methods For Adding CSS

Inline CSS: Directly in the html element

<!DOCTYPE html>
<html>
    <head>
        <title>CSS Cheat Sheet</title>
    </head>
    <body>
        <h1 style="color:red">Hello World</h1>
    </body>
</html>

Internal CSS: Using `<style>` tags within a single document

<!DOCTYPE html>
<html>
    <head>
        <title>CSS Cheat Sheet</title>
        <style type="text/css">
            h1{
                color: blue;
            }
        </style>
    </head>
    <body>
        <h1>Hello World</h1>
    </body>
</html>

External CSS: Linking an external .CSS file

index.html

<!DOCTYPE html>
<html>
    <head>
        <title>CSS Cheat Sheet</title>
        <link rel="stylesheet" type="text/css" href="css/style.css">
    </head>
    <body>
        <h1>Hello World</h1>
    </body>
</html>

css/style.css

h1{
    color: green;
}

CSS Selectors

Selector is going to apply the style(s) to all elements
Declaration surrounded by curly braces ({})
Property/value pairs
Use colon(:) to separate property and value
End a declaration with a semicolon(;)

Colors In CSS

Color names
HTML5 color names

body{
    color: red;
    background: coral;
}

Hexadecimal

h1{
    color: #00ff00;
}

p{
    color: rgb(0,0,255);
}

Box Model

Padding: Space inside
Margin: Space outside

Margin & Padding Shorthand

p{
    margin-top: 5px;
    margin-button: 5px;
    margin-right: 10px;
    margin-left: 10px;
}

p{
    /* top right button left */
    margin: 5px 10px 5px 10px
}

p{
    margin: 5px 10px
}

Positioning in CSS

Static (default): Renders the elements in order of the document flow
Relative: Element is positioned relative to its normal position
Absolute: Target position inside of a relative element
Fixed: Fixed position to the browser window
Initial: Sets the property to its default value
Inherit: Inherit the property of its parent element

Id vs. Class

Id	Class
Unique	Not unique
Only used once in the file	Can be used many times
Selector starts with #	Selector starts with .
Often used in HTML5 semantic tags

Reference

https://youtu.be/yfoY53QXEnI

What is CSS?

3 Methods For Adding CSS

Inline CSS: Directly in the html element

Internal CSS: Using <style> tags within a single document

External CSS: Linking an external .CSS file

CSS Selectors

Colors In CSS

Box Model

Margin & Padding Shorthand

Positioning in CSS

Id vs. Class

Reference

You might also like...

What's the Difference Between VM and Containers

一定要知道的網頁設計技術—RWD

[Exercism-JavaScript] Mixed Juices

不可不知的 JavaScript 基本觀念

Get Started with Docker

Internal CSS: Using `<style>` tags within a single document