115 lines
2 KiB
Markdown
115 lines
2 KiB
Markdown
status: #doc
|
||
Tags: #html #css
|
||
links: [[html-css]]
|
||
Date: 2023-08-01
|
||
___
|
||
# css
|
||
|
||
## Three Ways to Insert CSS
|
||
|
||
There are three ways of inserting a style sheet:
|
||
|
||
External CSS
|
||
Internal CSS
|
||
Inline CSS
|
||
|
||
### External CSS
|
||
|
||
we add link tag in head section of html
|
||
|
||
```html
|
||
<head>
|
||
<link rel="stylesheet" href="mystyle.css">
|
||
</head>
|
||
```
|
||
|
||
then we make our css in `mystyle.css` like this
|
||
|
||
```css
|
||
body { background-color: lightblue;}
|
||
|
||
h1 { color: navy;
|
||
margin-left: 20px;}
|
||
```
|
||
|
||
### Internal CSS
|
||
|
||
we can make our css inside our html with `<style>` tag inside `<head>` tag
|
||
|
||
```html
|
||
<head>
|
||
<style>
|
||
body { background-color: linen;}
|
||
|
||
h1 { color: maroon;
|
||
margin-left: 40px;}
|
||
</style>
|
||
</head>
|
||
```
|
||
|
||
### Inline CSS
|
||
|
||
An inline style may be used to apply a unique style for a single element.
|
||
|
||
To use inline styles, add the style attribute to the relevant element. The style attribute can contain any CSS property.
|
||
|
||
```html
|
||
<!DOCTYPE html>
|
||
<html>
|
||
<body>
|
||
|
||
<h1 style="color:blue;text-align:center;">This is a heading</h1>
|
||
<p style="color:red;">This is a paragraph.</p>
|
||
|
||
</body>
|
||
</html>
|
||
```
|
||
|
||
>[!tip]
|
||
>If some properties have been defined for the same selector (element) in different `<style>`sheets, the value from the last read style sheet will be used.
|
||
|
||
## Cascading Order
|
||
|
||
What style will be used when there is more than one style specified for an HTML element?
|
||
|
||
All the styles in a page will "cascade" into a new "virtual" style sheet by the following rules, where number one has the highest priority:
|
||
|
||
1. Inline style (inside an HTML element)
|
||
2. External and internal style sheets (in the head section)
|
||
3. Browser default
|
||
|
||
So, an inline style has the highest priority, and will override external and internal styles and browser defaults.
|
||
|
||
## how css work
|
||
|
||
we use css selector to chose elements then we set css-property values and ;
|
||
|
||
```css
|
||
selector {
|
||
css-property: value;
|
||
}
|
||
/* example */
|
||
p{
|
||
background-color: lightblue;
|
||
}
|
||
```
|
||
|
||
## [[css-selector]]
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
---
|
||
# References
|
||
https://www.w3schools.com/css/css_howto.asp
|
||
|
||
|