This content originally appeared on DEV Community and was authored by Ashutosh Sarangi
How HTML renders in our pages
- Browser Loads HTML
- Converts HTML into DOM
- Feching Linked Resources
- Browser parses CSS (CSSOM)
- Combine DOM with CSSOM
- UI is painted (FCP) (First Contentful Paint)
HTML types of Element
primarily
- Block Level
- InLine
CSS Selectors:-
- type/Attribute Selector
- Class selector
- Id Selector
- Universal Selector (*)
CSS Inheritance
It occurs when an inheritance CSS property (i.e color) is not set directly on an element, the parent chain is traversed until a value for that property is found.
<div class="body">
<p>This is a Paragraph, but it will have the blue color due to inheritance</p>
</div>
<style>
.body{
color: blue;
}
</style>
case 2
<div class="body">
<p>This is a Paragraph, but it will have the red color due to direct Specification</p>
</div>
<style>
p {
color: red;
}
.body{
color: blue;
}
</style>
case 3
<div class="body">
<p>This is a Paragraph, but it will have the blue color due to strong Specification</p>
</div>
<style>
p {
color: red;
}
.body p{
color: blue;
}
</style>
What is CSS Specificity
- the algorithm used by browsers to determine which css declaration should be applied.
- Each selector has a calculated weight. The Most specific weight wins. id--class -type Id Selector: 1 - 0 - 0 class selector: 0- 1 -0 type selector: 0-0-1
NOTE:- Inline Css are more specificity and !import has even more specificity
Em & Rem
EM:- relative to its parent font-side
<html>
<div>
<p></p>
</div>
</html>
<style>
html {
font-size: 16px;
}
div {
font-size: 2em; //16px * 2 = 32px;
}
p {
font-size: 2em; // 32px * 2 = 64px
}
</style>
REM:- relative to Root font-side
<html>
<div>
<p></p>
</div>
</html>
<style>
html {
font-size: 16px;
}
div {
font-size: 2rem; //16px * 2 = 32px;
}
p {
font-size: 2rem; // 16px * 2 = 32px
}
</style>
%:- % calculation
<html>
<div>
<p></p>
</div>
</html>
<style>
html {
font-size: 16px;
}
div {
font-size: 120%; //1.2*16 = 19.2px;
}
p {
font-size: 120%; // 1.2 * 19.2 = 23.04px
}
</style>
CSS Combinators
1.Descendent Selector (ul li a)
<ul>
<li><a href='#'></a></li>
</ul>
2.Child Combinators (direct Descendant) (div.text > p)
<div>
<div class="text">
<P>Here the CSS will apply<P>
</div>
<div>
<p>No CSS will apply</p>
</div>
</div>
3.Adjacent Sibling Combinator (h1 + p)
Note:-
- Both h1 and p should be in the same parent and p should be immediately after the h1 tag
4.General Sibling Combinator (p ~ code)
Note:-
- they should not have an immediate sibling like an adjacent sibling. But they must have siblings
- They must have the same parent
Block Element Modifier Architechure(BEM)
- Design Methodology that helps create reusable components and code-sharing
Other Methodologies
- OOCSS
- SMACSS
- SUITCVSS
- ATOMIC
- BEM
Block
- header
- Menu
- input
- checkbox (stand alone meaning)
Element (part of block)
- Menu items
- List Items
- Header title
Modifier
- Disabled
- highlighted
- checked
- Yellow
.block__element--modifier Syntax
<form class=form>
<input class='form__input'/>
<input class="form__input form__input--disabled"/>
<button class="form__button form__button--large"/>
</form>
Box Model:- (W.I.P)
We need to add more information from the Detail information
NOTE:-
There will be a separate article on the grid layout vs Flex layout.
This content originally appeared on DEV Community and was authored by Ashutosh Sarangi
Ashutosh Sarangi | Sciencx (2024-08-20T17:55:28+00:00) CSS In Details. Retrieved from https://www.scien.cx/2024/08/20/css-in-details/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.