# Some css notes

> https://www.w3schools.com/css/default.asp

## * `width: 100px; margin: auto;`
align center

<style>
#alignCenter {
width: 50px;
margin: auto;
height: 50px;
background: blue;
}
</style>

<div id="alignCenter"></div>

## * `display: flex; justify-content: center; align-items: center;`
flexbox align center.
`justify-content` align horizontally,
`align-items` align vertically.

<style>
#flexAlignCenter {
display: flex;
justify-content: center;
align-items: center;
width:300px;
height: 100px;
border: 1px solid
}
</style>

<div id="flexAlignCenter">
<div style="border:3px solid">center</div>
</div>

## * `default display: block;`
block element: `<p> <h1> - <h6>` <p style="border: 3px solid green;">123<p>

## * `default display: inline-block;`

inline block element: `<span> <a> <img>`

1234 <span style="border: 3px solid green;">inline block elemnt</span> 324523

## * `position: sticky;`
https://www.w3schools.com/css/tryit.asp?filename=trycss_position_sticky

## * `box-sizing: border-box;`
padding and border are included in the width and height
https://www.w3schools.com/css/tryit.asp?filename=trycss3_box-sizing_new

## * `word-break: break-all;`
When encouter - or space won't change line priorily, will change line at the end of width of current line.

<style>
#breakAllWord {
word-break: break-all;
width:100px;
height:50px;
border:1px solid blue;
}
</style>

<div id="breakAllWord">yu-tin [e-mail]</div>

## * selector combinators:
-descendant selector (space)
-child selector (>)
-adjacent / immediate following sibling selector (+)
-general sibling selector (~)

* `outline-offset: 15px;`
The distance between outline and border.

<style>
#outlineOffset {
width:100px;
height:100px;
border:1px solid red;
outline:1px solid blue;
outline-offset: 15px;
}
</style>

<div id="outlineOffset"></div>

## * `text-align-last: right;`
Set text-align only for the last line.

<style>
#textAlignLast {
text-align: center;
text-align-last: right;
color: gray;
border: 1px solid;
}
</style>

<p id="textAlignLast">There is a what on the that. So would be that happen in where. There is a what on the that. So would be that happen in where. There is a what on the that. So would be that happen in where. There is a what on the that. So would be that happen in where. There is a what on the that. So would be that happen in where. There is a what on the that. So would be that happen in where.</p>

## * `p::first-line { color: red }`

<style>
#firstLine:first-line {
color: red;
}
</style>

<p id="firstLine">There is a what on the that. So would be that happen in where. There is a what on the that. So would be that happen in where. There is a what on the that. So would be that happen in where. There is a what on the that. So would be that happen in where. There is a what on the that. So would be that happen in where. There is a what on the that. So would be that happen in where.</p>

## * `p::first-letter { color: red }`

<style>
#firstLetter:first-letter {
color: red;
}
</style>

<p id="firstLetter">There is a what on the that. So would be that happen in where.</p>

## * `a:hover {}` MUST come after `a:link {}` and `a:visited {}`

<style>
/* unvisited link */
#linkFail:link {
color: red;
}

/* selected link */
#linkFail:active {
color: blue;
}

/* mouse over link */
#linkFail:hover {
color: hotpink;
}

/* visited link */
#linkFail:visited {
color: green;
}

/* unvisited link */
#link:link {
color: red;
}

/* visited link */
#link:visited {
color: green;
}

/* mouse over link */
#link:hover {
color: hotpink;
}

/* selected link */
#link:active {
color: blue;
}

/* unvisited link */
#linkFailActive:link {
color: red;
}

/* visited link */
#linkFailActive:visited {
color: green;
}

/* selected link */
#linkFailActive:active {
color: blue;
}

/* mouse over link */
#linkFailActive:hover {
color: hotpink;
}

</style>

<a href="javascript:;" id="linkFail">hover color pink fail - a:hover {} a:visited {}</a>
<a href="javascript:;" id="link">hover color pink - a:visited {} a:hover {}</a>

## * `a:active {}` MUST come after `a:hover {}`
<a href="javascript:;" id="linkFailActive">active color blue fail - a:active {} a:hover {}</a>
<a href="javascript:;" id="link">active color blue - a:hover {} a:active {}</a>

## * `a:link { color: red }`
unvisited link style

## * `font-family: Arial, Helvetica, sans-serif;`
There has 5 specific generic font family:

## * `font-variant: small-caps;` <p style="font-variant: small-caps;">My name is Hege Refsnes.</p>

## * `font-style: oblique;`
font leaning more than italic <p style="font-style: oblique;">My name is Hege Refsnes.</p>

## * `border-color: currentcolor`

<style>
#currentColor {
color: blue;
border: 1px solid currentcolor;
}
</style>
<div id="currentColor">test</div>

https://www.w3schools.com/css/css3_text_effects.asp