CSS in a Nutshell
Cascading style sheets or CSS is a style sheet language famous for making websites look pretty. By default, a browser will render HTML as a boring black and white document.
CSS allows you to describe the presentation of this markup, by modifying the size, color, positioning, and layout of HTML elements. It was first released in 1996 and evolved into CSS3 by 1999.
The language continues to evolve to this day with new features, but there will never be CSS4 just updates to the existing language.
The typical CSS rule starts with a selector that can be matched to an element in the HTML document. You then use braces to create a declaration block that contains properties that change the appearance of that element. This is known as a CSS rule, but the tricky thing is that style sheets cascade. A style sheet might contain multiple rules that apply to the same element. This creates a hierarchy and rules that are more specific will overwrite the rules of their parents. In other words, the order of your CSS rules matter.
In addition, some elements will inherit the styles of their parent, but others will not. Ultimately, the browser uses the concepts of cascade, specificity, and inheritance to control which styles are applied to an element.
Get Usama Wahid’s stories in your inbox
Join Medium for free to get updates from this writer.
To get started, open up a style tag and any HTML document.
A selector can target all HTML elements of a certain type, multiple related elements with a custom class, or a single element with an ID. Now think of every HTML element like a box. The content is in the middle, followed by padding, border, and a margin.
The amount of real estate used by every area in the box can be customized by defining properties like padding and margin. They can take explicit Pixel values or responsive values that are relative to the parent element or a percentage of the viewport itself.
Now, these boxes will bump into each other to make up a web page, but you can use tools like Flex layout and grid layout to control how they flow together in a sophisticated way.
It can also detect user interaction with pseudo selectors like Hover. CSS also makes it possible to add logic to your code with variables or custom properties, and by making media queries that can apply styles conditionally based on the size or type of device,
and it can even handle complex animations with transitions and keyframes. This is a Cascading style sheet in a Nutshell.
Please like and follow for more.
Thanks for reading and I will see you at the next one.
