CSS (Cascading Style Sheet)

CSS is known as Cascading Style Sheet. It is used for improving html page layouts, designs and make it fit according to different screen sizes, i.e. to make it responsive. By default, html page is not responsive, means the alignment of content gets disturbed if we decrease the screen size. Cascading Style sheets plays an important role in making html web pages responsive. Let’s see how this makes the difference.

First css code

That’s how html page looks on browser’s full screen when we inserted an image. Now let’s see what happens if we change the screen size, what happens to our image.

no effect of css on image

Note the difference, image did not respond to the screen of the browser. This was the main problem with html. As the technology evolved, so as the sizes of the screens get evolved. But html was limited to same screen size according to which it had been coded. This problem was overcame with the creation of css. Let’s see how it solved the problem.

css effect code

We use <style> tag for adding cascading effects. We declared the type of style by “text/css”, it shows that we are now applying cascading effects on our page. It will not make any difference when we see the image on full screen. But let’s see what happens when we shrink our screen size.

css after effect

See, after minimizing the browser screen, how the content on page along with image adjusts itself according to screen size. This is the beauty of cascading effects on html pages. Css solved the big problem of editing a website in a simple step as compared to the tiring job of earlier. Let’s see one more example of cascading style sheet.

background color code

We have changed the background color by adding the color in the body. Let’s see how it changes the background.

background color on webpage

There are many more things that we can do with css. Cascading style sheet effects can be used in three ways i.e. inline, Outline and external. Inline is when we used it inside the body under the tags of the codes. Outline is when we used it outside the body under <head> tag. And external is when we make a different file to make changes in html pages from that file. We can later on link that file with our main html page with a single code. We will learn about this in further posts.

This was the introduction of Cascading Style Sheets along with
css meaning. Hope you get a basic idea about cascading style sheets. If you have not visited our article on html introduction, you can refer introduction of HTML.

If you want to learn Css from beginning to advance level, you can refer to this website w3schools.

Till then Thank you. 🙂

Categories: CSS


Leave a Reply

Your email address will not be published. Required fields are marked *