Cheatography
https://cheatography.com
Css is a markup language which is used to design a web page
This is a draft cheat sheet. It is a work in progress and is not finished yet.
Line end
----------------------------------------------------------- |
|
Intro to css
Cascading style sheets |
CSS describes the visual style and presentation of the content written in HTML |
CSS consists of countless properties that developers use to format the content: properties about font, text, spacing, layout, etc. |
Basic property to style
font-size: 26px; |
font-family: sans-serif; |
text-transform: uppercase; |
font-style: italic; |
text-align: center; |
line-height: 1.5; |
font-weight: bold; |
Dev tools
`- So, Every modern browser contains a set of tools which makes our lives as developers a lot easier. And we call these tools collectively developer tools or for short dev tools. |
|
|
Combain selectors
Develop code by combining code selectors
Doing that
Combining a selector into two ways
1.List selector
2.descent selector
Suppose if we change html and edit it is hard to maintain future. that is not good idea
Best practice :
Set a selector name and select them |
Style link
a:link {
color: aqua;
text-decoration: none;
}
a:visited {
color: aqua;
}
a:hover {
color: red;
font-weight: bold;
text-decoration: underline / dooted or wavy / orange;
}
a:active {
background-color: #1098ad;
}
|
|
|
3 ways to add css
1.Inline |
2.Internal |
3.External |
Combain selector name
Ids and classes
biggest difference is not allowing to repeat id names
or in other words use id only one times
A Class name can be used by multiple HTML elements, while an ID name must only be used by one HTML element within the page
id = #
class = .
Confilicts : skill now use multiple propery in different places but apply id or class property skip !!
id vs class class is always better . to avoid bugs |
Pseudo classes
/* CSS automatically figure out
Element inside a container */
/ It is use full for colour tables for backgroud colour /
When we mix multiple elements inside of a parent element,
then these pseudo-classes don't work really well.
A pseudo-class is used to define a special state
of an element.
li:first-child {
font-weight: bold;
}
li:last-child {
font-style: italic;
}
/ Target a specific element in a group /
li:nth-child(2) {
color: red;
}
/*
li:nth-child(2) {
color: red;
}
parameter - odd or even
*/
article p:last-child {
color: red;
}
|
|
.png)
.png)
