In this series, I just noted these things about css which I have learnt CSS from scratch. I hope this series can help everyone remind knowledge about CSS.
Media queries
I can be understand as a condition for doing something.
if(condition) {
// doing some thing here
}
@media (condition) {
// Doing something here
}
In the css we have two generalized condition into the media query. They are 'max-width' and 'min-width' conditions.
max-width represent for these screens have width between 0 to max-width value
@media (max-width: 300px) {
// the css code here only for these devices
// has width between from 0 to 300px.
}
min-width represent for these screens have width bigger than the value of min-width
@media (min-width: 300px) {
// the css code here only for these devices
// has width bigger than 300px
}
Selectors
It means specify what element will be applied the css styling.
/* All a elements will be applied*/
a {
color: pink;
text-decoration: none;
}
/* All a elements into article element will be applied*/
article a {
color: pink;
text-decoration: none;
}
/* Only a elements has li parent will be applied */
li > a {
color: pink;
text-decoration: none;
}
Pseudo-classes
Pseudo-classes used for external styles like history of the navigator :visited
, status of its content :checked
, or position of the mouse :hover
button:hover {
color: blue;
}
You can also learn more here
Pseudo-elements
Pseudo-elements are like pseudo-classes, but they don't target a specific state. Instead, they target "sub-elements" within an element.
We need to use ::
syntax instead :
as in pseudo-classes
Some common Pseudo-elements
// setting color for pseudo-elements placeholder
input::placeholder {
color: red;
}
// Adding a pseudo-element before p tag and style it
p::before {
content: '>>';
color: blue;
}
// Adding a pseudo-element after p tag and style it
p::after {
content: '<<';
color: blue;
}
Colors
CSS includes many different way to represent color.
- Using color name
p {
color: red;
}
- Using hex code
strong {
color: #ff0000
}
- Using hsl
// this is opacity is 1
.box {
background-color: hsl(0deg, 100%, 50%);
}
// Setting opacity is 0.75
// using the '/' as separation for the opacity style
.box {
background-color: hsl(0deg, 100%, 50% / 0.75);
}
Units
There are 3 units which used for changing size-related of these elements. They are px
, em
, rem
The px
unit is a common unit. It use for set size directly on each element.
// setting width and height are 30px. It is fixed unit on the .box elements.
.box {
width: 30px;
height: 30px;
}
The em
unit is a relative unit, equal to the font size of the current element.
// padding bottom is equal font-size*2, you can change font-size to view the changing of unit em.
p {
font-size: 18px;
border: 1px solid black;
padding-bottom: 2em; // The real pixel is 2*18 = 36px;
}
The rem
unit is quite a lot like the em unit, with one crucial difference: it's always relative to the root element, the tag.
html {
font-size: 16px;
}
h1 {
font-size: 2rem; // equal 2*16
margin: 0;
}
h2 {
font-size: 1.25rem; // equal 1.25 * 16
margin-bottom: 1.5rem; // equal 1.5 * 16
color: gray;
}
p {
font-size: 1rem; // equal 1 * 16
}
Typography
We use font-family
to change the font.
Font families come in different styles.
- The 3 most popular:
- Serif
- Sans-serif
- Monospace
Sans-serif vs Serif
// try to use sans-serif or monospace to see what will happen?
p {
font-family: serif;
}
Text Formating
3 common formatting bold
, italic
and underline
Bold Text
/* Light, thin text*/
font-weight: 300;
/* Normal text */
font-weight: 400;
/* Heavy, bold text */
font-weight: 700;
Italic Text
font-style: italic;
Underline Text
/* remove underlines from anchor tags: */
a {
text-decoration: none;
}
Alignment
We can shift characters horizontally using the text-align property
div.left {
text-align: left;
}
div.right {
text-align: right;
}
div.center {
text-align: center;
}
Text Transforms
/* RENDER WITH ALL CAPS */
text-transform: uppercase;
/* Capitalize The First Letter Of Every Word */
text-transform: capitalize;
Text Spacing
- Gap between characters using the
letter-spacing
property. - Distance between lines using the
line-height
property.
h2 {
letter-spacing: 3px;
line-height: 2;
}
Thank you for reading.
Happy coding!!!
Top comments (0)