-----.css

I am going to create a new file that i'm going to save as style.css

you will see at the bottom over here that sublime text now has css as the file type

------comment in css

command/

read as : command slash

see as

----------what cascading mean?

it always takes the selector that at the end

(overlapping)

---- comment in HTML

exclamation markdash dash

shortcut: command + /

------<div></div>

useless

they are used to divide content and wrap it

-----<span></span>

the same thing as <div></div>

it is an inline element

----- a relative link

There are 3 pages and relative to each other

homepage



    <ul>
        <li>Home</li>
        <li><a href="page2.html">page2</a></li>
        <li><a href="page3.html">page3</a></li>


    </ul>

open the sublime text with default Chrome, it shows like this,

we can directly style css in html file

<head>
    <title>My webpage</title>
    <style type="text/css">
        body{
            background: red
        }
    </style>

</head>

但是，由于开发属于团队项目， CSS 和HTML可能是不同的开发人写的

we can also use the seperate file called main.css to color the homepage's background

------ link css file to html file

this allows us to link this html file to something else

.html should be in the same folder as .css

there are 10- 15 html tags

but there are huge CSS properties

main.css

body{
    background: red;
}

以上，我定义了 html 文件中 <body> </body>的样式

并且，在html文件中，引入了 href = "main.css" 文件

index.html


<head>
    <title>My webpage</title>
    <link href="main.css" rel="stylesheet" />

</head>

----- how to use class

class is more specific

Here is html file



    <p class="secondary">Test how to use class to CSS</p>

Here is CSS file


.secondary{
    background: none;
    color: yellow;
}

if it comes after is gonna override, that's why it's called cascading sheets, you can define before, but you can override it as you move on

----- stole from other website

google chrome allows us to see CSS styles

so that I can even stole some element from other website

View --> Developer --> Developer Tools

Basic CSS

results matching ""