Basics Of CSS (Cascading Style Sheet)

CSS is basically used for styling the web page or the structure of the website. It is the stylesheet website use to enhance the style and presentation of the website. It works along HTML and JavaScript that plays vital role in building and making website more presentable.
• HTML is use to make structure of the website.
• CSS is use to style and make it more presentable.
• JavaScript is use to make web page responsive.
CSS was released three after the HTML in 1996 with the main idea to sperate the content from presentation. This makes website to be easily maintain and more flexible. The main focus of CSS is to design and style the web pages.

---

Core Architecture and Mechanism :

• Separation of Concerns : SoC in web pages means design of splitting the webpages into distinct sections, where each section manages each responsibility. There are three core layers:

1. Content layer : It is managed by HTML file. Web page structure is designed by HTML file.
2. Presentation layer : It is managed by CSS file. Designing and presentation of web pages is done by CSS file.
3. Behaviour layer : It is done using JavaScript file. JavaScript is used to make web page responsive.

• Cascading Order : It resolves rules based on importance ,specificity , and source code. It resolves conflicts in a HTML file when multiple style rules target the same HTML elements. The browser reads rules from top to bottom filtering them through a strict hierarchy to determine which final style wins.

• Targeted selectors : It points to specific HTML nodes using tags, class and IDs. These combinations are parsed by browser from right to left, adding up their structural weights to create a final specificity score.
  Here it is how it works down :

• Tag selector : It targets down the standard HTML elements nodes directly. They represents broad level and target specificity. It include tag like h1, div, p, button etc..
  ---> How it works : The browser scan the documents and matches every nodes matching the exact same tag name.

  p {
font-variant: small-caps;
font-family : 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
font-size : medium;
}

• Class Selector : It target nodes that contain specific HTML strings in their HTML class attributes.
  Syntax : .classname

.parent {
height : 250px;
display : flex;
flex-direction: column-reverse;
justify-content: start;
align-items: start;
}

• ID selector : Id selector targets a completely unique node on the HTML page. Syntax : #idname

#child {
color-scheme: inherit;
font-style: italic;
}


• The Box Model: Box Model is the fundamental layout engine of CSS. It work upon the rectangular box type model where specific elements occupies space in the webpage. Further it is stacked into four layers together from inside out.

  Four layers of Box Model :
  Every elements of box model contains these four parts :

  1. Content : The inside more layer contains the actual texts, images, or child elements.
  2. Padding : Padding is the internal clearing space between an elements actual content and its outer border.
  3. Border : It is the structural wrapping line that wrap around the elements padding and contents.
  4. Margin : It is completely transparent clearing space that pushes away the neighboring elements.

---

Layout and Presentation tools

In the broader space of CSS layout and presentation tools , Flexbox works alongside media typography center, Grid layout and Visual effects to present complete design ecosystem.

1. Flexbox Layout : Flexbox layout is a one dimensional layout that is designed to distribute space and align items along a single row or columns. It automatically shrinks or extend space to fill the available space, making it perfect to fill available screen space, making it perfect for responsive design.

.parent {
display : flex;
flex-direction: column-reverse;
justify-content: start;
align-items: start;
flex-wrap: wrap;
gap: 20px;
}


1. Grid Layout : Grid layout is two dimensional layout engine developed directly into CSS. Unlike flexbox which aligns into single dimension, Grid layout works upon two dimensions. Grid layout manages rows and columns layout simultaneously. This makes it most powerful tool to design and create webpages architecture, magazine style layout and complete dashboard type layout.

.grid-container {
display: grid;
grid-template-columns: 200px 1fr 300px;
grid-template-rows: 100px 400px;
gap: 20px;
}


3.Visual effects : Visual effects in CSS represents flat, basic HTML structures into polished , interactive interfaces. Some of the features of it are :

1. Depth and Elevation (Shadows)
2. Color Transitions (gradients)
3. Layer Controls (Opacity & Blend Models)
4. Image filters (filter)
5. Backdrop Filters (backdrop-filter)

.glass-modal {
background-color: rgba(255, 255, 255, 0.2);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.1);
}


---

This is all about some basics of CSS layout. This is how it works to make web pages more attractive and separate the content of web pages from the design part of the web pages. CSS focuses upon styling the web page and make it look more attractive and interactive. Component of CSS play vital roles in developing web page more attractive.