DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Cover image for CSS (Cascading Style Sheets) of the website
Rakib Rahman
Rakib Rahman

Posted on

CSS (Cascading Style Sheets) of the website

β€œThere are three responses to a piece of design – yes, no, and WOW! Wow is the one to aim for.” – Milton Glaser

Graphic design is one of the important parts of a website. When you, the landlord, step to build your own house. You need to coordinate with the architect, civil engineer, mechanic and so on, where the architect plans, designs and looks after the construction of buildings, same as a graphic designer.

Website hosting is a massive combination of developers and designers. For building a secured and functional website like Daraz, Evaly, Foodpanda etc. you have to hire all the specialists. For an e-commerce website, all the users are searching products and storing the desired one in his/her profile is the work of a Back-end web developer. The visual of a website is the manipulation of a Front-end web developer. Web designers suggest design / illustration according to the website / organization. If you present a comfortable design and function, you can hold on to the customers more.

Plain CSS: Plain CSS (Cascading Style Sheets) is the simplest and core concept of designing a website. Three types, internal, external, and inline styles in this function.

  • Internal CSS: For internal CSS, you have to add your needed styles within the tag. Id and class selector gives the written design to the exact content.

body { background-color: gray }
p {

color: red;

margin: 60px
}
.class1 {
color: orange
}

But these codes create the page longer and make the website slow.

  • External CSS: In the external css, the styles are coded into a css file which is more clean and decorated than internal CSS. The css file will attach with the section.

h1 {

width: 50%;

background:#A3C4E5
}

The css file can be applied to multiple pages but too many .css files will slow down the website.

  • Inline CSS: You can add CSS in every html tag attribute. For specific changes and updates, it is easy to implement. But this option is not recommended because of the structure. When you add the attribute to every element, the coded page becomes confused.

Welcome to the website

I recommend External CSS which is more smart than others. You can use any CSS to your webpage which is sharable and organized. Others one are lengthy processes.

CSS Framework: CSS framework is a library with setup code for UI developers. The plain CSS is time consuming. In this situation, we don’t need to code the basic CSS because the framework gives us ready-made CSS properties. For a small website, the developer uses other frameworks with the help of documentation. But the documentation will be possible to change / update with the situation, then the design will hampered shortly.

14 Best CSS Frameworks for Front-End Developers:
Bootstrap
Foundation
Bulma
UIkit
Semantic UI
Susy
Materialize
Pure.
( Source: https://geekflare.com/best-css-frameworks/ )

But the established farm will build a personal CSS Framework by developers. That is restricted for unauthorized people. They build / change it with their own favor.

Top comments (0)

Stop sifting through your feed.

Find the content you want to see.

Change your feed algorithm by adjusting your experience level and give weights to the tags you follow.