Css Information & History

Information & History

Let's start this journey of learning CSS together.This tutorial will serve as a resource for students to learn CSS and use the code from these lessons as a reference.

Without further ado, let's dive into learning CSS.

What is CSS?

CSS stands for Cascading Style Sheets. It is a stylesheet language that is used to describe the visual presentation of a web page written in HTML (Hypertext Markup Language).

HTML creates the structure of the page, while CSS adds styling to that structure. This tutorial assumes that you have prior knowledge of HTML. If that's not the case, you can follow the HTML tutorial first.

Why the word "cascade"?

The term "cascade" refers to the priority scheme determining which CSS rules are applied when multiple rules target an element. This scheme takes into account specificity and inheritance, ensuring that the most specific and latest rules are applied.

Why use CSS?

CSS is used to provide styling to HTML elements, making web pages visually appealing and user-friendly.

Consider the Image below to understand how CSS can transform a webpage:

CSS Questions

Questions

1. Are Style Sheets case-sensitive?

Ans. No, style sheets are case-insensitive. But the content which is case-sensitive in HTML is case-insensitive in CSS too. However, the URLs and image directories can be case-sensitive. For eg: image.png and Image.png are not the same.

 

2. Can I add comments in the Stylesheet too?

Ans. Yes, the comments can be added to the stylesheet too. For VS code or modern editors, type ctrl+/ to add the comments if the style sheet is linked externally.

 

3. What is the order of precedence of CSS, HTML and JavaScript?

Ans. The order of precedence is JavaScript>Inline CSS>Internal CSS>External CSS> HTML.

 

4. Why does my CSS doesn’t render despite the right usage of the rules?

Ans. There can two reasons for that: One you haven’t linked CSS properly or the path and directory isn’t the same folder in case of absolute declaration. For that, it is advised to use the complete path, so that you can access it in any folder without hassle. 

The second reason could be the overriding of rules. Right-click your browser and open the inspection tool to understand better how the element is behaving.

 

5. How to add default styling to an element explicitly?

Ans. The keyword “initial” resets the CSS property to the default value.

 

6. What are web-kit style rules?

Ans. In some browsers, the rules of CSS aren’t supported implicitly. These extensions add CSS support rules to the browser and are mostly seen in the case of Safari.

 

7. What is tweening in animation?

Ans. Tweening stands for in-betweening and is a process to add an illusion of a frame between two rendering frames. It makes the animation smoother, but it isn’t much in use in CSS3 as the inbuilt CSS and keyframes are enough to smoothen the animation.

 

8. What are CSS counters?

Ans. CSS counters help to add automatic counting to the section of our website.

Syntax:

h1 {
  counter-reset: subsection;
              }
h1::before {
  counter-increment: section;
  content: "Section " counter(section) ". ";
              }
h2::before {
  counter-increment: subsection;
  content: counter(section) "." counter(subsection) " ";
              }

 

Counter reset marks the start of the counting and h1 and h2 are subsections of the same. Output of this code make things more clear to you.

 

CSS Animations

CSS Animations help to animate elements from one frame to another. Controlling various CSS properties helps in changing the animation style and time without having the need to use JavaScript for the same.

 

The most basic way to do so is by using “from” and “to”.

 

Eg:

@keyframes demo {
            from {
                background-color: red;
            }
            to {
                background-color: blue;
            }
        }

 

The animation here would start with the background colour as red and will turn blue gradually. To use this animation we simply add it to the div stylesheet rule.

 

This is the most basic way to do CSS animations, but now let’s look into the properties for advanced animation styling.

1. Animation Name

To identify the animation we assign it with the name. In the above example the name was demo. So, we will add the attribute animation name in the div element.

Syntax: div{animation-name: demo;}

 

2. Key Frames

Keyframes define at what % of the animation, which stylesheet rules should be used. The value of keyframes varies from 0% to 100%.

 

To add keyframes use the % operator with the value inside the keyframes. More keyframes mean smoother animation.

 

Eg:

 

CSS Media Queries Advanced

We’ve discussed Media Queries briefly in this tutorial: CSS Media queries. Let’s now try to understand them in detail.

 

Media queries are used when we want to customize our website's presentation according to the user's screen size. With the help of media queries, user can display different markups based upon the device's general type(mobile, desktop, tablet).

 

It is a logical operation. Whenever a media query becomes true, then the related CSS is applied to the target element.

 

Syntax: @media media-type and (media-feature)

 

@media signifies the start of a media query, the type property defines the display screen on which the rules are to be applied like phone, tablet, pc, etc. 

 

Media-feature tells about the dimensions of the screen.

 

Eg:

 

We’ve create here 4 boxes wrapped up in the span. Now let’s write rules for the same.

 

We’ve created a flexbox with direction as a row, but as soon as the width reaches 600px the direction of the flex changes to the column, and the text gets aligned at the centre.