search

Home >Web Front-end >JS Tutorial >CSS In Details

CSS In Details

WBOY
WBOYOriginal
2024-08-21 06:11:06927browse

CSS In Details

How HTML renders in our pages

  1. Browser Loads HTML
  2. Converts HTML into DOM
  3. Feching Linked Resources
  4. Browser parses CSS (CSSOM)
  5. Combine DOM with CSSOM
  6. UI is painted (FCP) (First Contentful Paint)

HTML types of Element

primarily

  1. Block Level
  2. InLine

CSS Selectors:-

  1. type/Attribute Selector
  2. Class selector
  3. Id Selector
  4. 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

  1. the algorithm used by browsers to determine which css declaration should be applied.
  2. 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

Css Specificity Calculator

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:-

  1. 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:-

  1. they should not have an immediate sibling like an adjacent sibling. But they must have siblings
  2. They must have the same parent

Block Element Modifier Architechure(BEM)

  1. Design Methodology that helps create reusable components and code-sharing

Other Methodologies

  1. OOCSS
  2. SMACSS
  3. SUITCVSS
  4. ATOMIC
  5. BEM

Block

  1. header
  2. Menu
  3. input
  4. checkbox (stand alone meaning)

Element (part of block)

  1. Menu items
  2. List Items
  3. Header title

Modifier

  1. Disabled
  2. highlighted
  3. checked
  4. 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.

The above is the detailed content of CSS In Details. For more information, please follow other related articles on the PHP Chinese website!

css html for checkbox class Attribute Property dom flex input ul li ui
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：Day / Days of Code: Renewed FocusNext article：Day / Days of Code: Renewed Focus

Related articles

See more