CSS (Cascading Style Sheet)

#css #webdev #codenewbie #beginners

Hi everyone, it’s me again, Beauty James. In my previous articles, I discussed frontend and its languages. So today, I’ll be talking about CSS, another Frontend language. As we move further, we will discuss the following;
o What is CSS?
o Types of CSS
o Effect of Priority on CSS
o CSS Frameworks
o What is CSS used for?
What is CSS?
CSS ( Cascading Style Sheet) is a frontend language used to describe the presentation of web pages including background colors, font sizes and layouts. The basic function of CSS is to design the view for html, but it can also be used to display html in various types of devices such as printers and different types of screen sizes.
Types of CSS
There are generally three types of CSS which are stated below;
o Inline CSS: This is used to style a specific html element and add a style attribute to each html tag without using selectors. It is used whenever the users requirements are very small, as it will only affect a single element. Inline CSS in html is useful in web development, although managing a website may be difficult if the developer chooses to use only inline CSS.
Pros of inline CSS
 It allows the creation of CSS rules on html pages.
 Different documents cannot be created and uploaded.
Cons of inline CSS
 Page size and download time of web pages could be affected because it styles multiple elements simultaneously.
 It must be specified on every html tag which makes the code quite large and complex and is very time consuming, making it one of the least best options for programmers.

o Internal CSS: This is an effective way to style single pages because it has style tag in the head section of the html document. Internal CSS is used when the user wants the style to be used in the complete html body because it performs action on the entire html body.
Pros of Internal CSS
 Internal CSS cannot upload multiple files when the user adds the code with html page.
Cons of Internal CSS
 Adding documents in html will reduce the page size and loading time of the web page.

o External CSS: In external CSS, the web pages are linked to an external CSS file created by a text editor. It is used whenever users have many html attributes. There are basically two methods for creating CSS file; The first, is to write the CSS code in Notepad and save it as .css file while the second is to directly add the style sheet in your Solution Explorer and direct visual studio to use it on your html page.
Pros of External CSS
 Files are smaller in size and have a cleaner structure.
 In external CSS, the same .css file is used for multiple web pages.
Cons of external CSS
 Uploading many CSS files can prolong the download time of a website.
 The external CSS has to be loaded first before the pages can be delivered directly.
Effects of Priority on CSS
Bear in mind that when looking at the properties of CSS, the order of priority is very necessary. Inline CSS has greater priority compared to the internal and external types. Internal comes next, and then the external CSS which has least priority. In other words, Inline>Internal>External. The following are the effects of priority on the different types of CSS:
 Any styles defined in the internal and external style sheets are overridden by Inline styles since it has the greatest priority.
 Internal CSS will override the styles in the external style sheet because it stands second in place in the priority list.
 External style sheet are applied for html tags if there are no styles defined either in Inline or internal style sheets.
CSS Frameworks
CSS Frameworks are tools used by web developers to make their job easier. It gives developers the option to use predefined codes instead of creating new ones from scratch and helps maintain synergy across websites and web pages, saving you the time and energy of trying to remember your specifications for each element. Frameworks are also very helpful when creating themes for use in more than one project.
Though frameworks make jobs easier for web developers, it also has its downsides to it. For example, for every new kind of design you want to implement, you would have to learn a new framework thereby, restricting the flow and designs of developers. It is also a little ambiguous for beginners, as a result, only senior developers find them intriguing to use.
There are 2 main examples of CSS Frameworks (Bootstrap and Foundation) used by frontend developers which will be discussed below;
Bootstrap:
Bootstrap was the first framework that made it possible for responsive deign to be carried out on smaller screens. The design automatically adjusts for different screens, all you need to do is to include the relevant Bootstrap classes.
Pros of Bootstrap
o Pre-built items and community support will always be available in numerous amounts due to the fact that the number of website layouts, themes, UI components and admin panels built using Bootstrap is amazing.
o Less cross browser bugs.
o Light weight and customizable
o UI components like navigation fps, cards, buttons, badges, modals, and lots more are offered by Bootstrap.
o Free and professional templates
o CSS is backed by Twitter making it easier to gain trust from enterprise customers.
o It offers a great grid system
Cons of Bootstrap
o Everything built with Bootstrap looks very much alike, so heavy customization is needed while creating a design.
o Styles on bootstrap are verbose, leading to a lot of output in html which is not needed.
o Files created by Bootstrap can be huge in size thereby slowing down things for the user quite heavily as well as draining battery.

Foundation: Foundation is a framework that makes it easier to design apps, emails and responsive websites that looks amazing on devices. It provides its users with JavaScript, html, CSS that can be built upon.
Pros of foundation
o It is customizable and the website doesn’t look familiar to other websites created by foundation.
o It is a modular collection of tools with command line interface that aims at solving any kind of frontend problems.
o Training courses and professional consulting are offered for large customers as a form of support.
Cons of Foundation
o Due to how complex foundation is, it often takes time for beginners to learn and use it.
o It has less community support compared to Bootstrap.
o It offers less supports for QA sites and troubleshooting issues.

UI kit: UI kit is a lightweight modular framework that allows you import only the features you need, creating fast and powerful web interfaces. It is mostly chosen by users because it offers minimalistic but elegant designs with clean cuts.
Pros of UI kit
o There are ready-to-use themes available in the official website.
o UI kit can be easily customized and extended to fit the need of the designer.
o The code is pretty clean and follows well defined conventions.
Cons of UI kit
o Classes of UI kit are often complex making it complicated to read and obtain desired results.
o Bug fixes are often slow and selective.
o UI kit is not very popular and as a result, it is difficult for users to find learning resources.
o Components and styles are predetermined, making it difficult to stun end users with uniqueness or a specific look.

Skeleton: Skeleton is at times not even considered a CSS framework. It is boilerplate, and was designed for small projects that requires a little bit more than layouts and positioning.
Pros of skeleton
o It is a very simple framework and as a result, is very easy for beginners to learn.
o It suits Devices with smaller resolutions
o Clean and beautiful codes
o It is very good for carrying out small projects
Cons of skeleton
o It takes longer to develop compared to other CSS frameworks.
o It is not suited for easy prototyping.
o The templates are limited and offers only one demo at a time.

Milligram: Milligram is a framework that allows its users to change the design however they want. It is under 2kb in size and was designed for speed and productivity.
Pros of milligram
o Users can start with a clean slate when creating interfaces, improving performance and productivity.
o Milligram doesn’t come with any default styles so users don’t have to reset or override properties when customizing.
o It is very easy to learn and set up, so it is very convenient for beginners.
Cons of milligram
o Milligram has a small community so finding support won’t be as easy as other popular frameworks.
o It doesn’t possess pre-made or template-like features so it is only convenient for users who want to apply a specific design.

Materialize: This is a modern and responsive frontend framework designed by Google that is based on material design and aimed at making its users productive as fast as possible. Materialize consists of only a few components and classes to learn as well as customization options.
Pros of materialize
o This framework has mobile-like components which is used to create progressive web applications.
o It makes use of material designs which make developers creations easy to use.
o It makes use of animation which provides visual feedback to users, making it easier for developers to work with.
Cons of Materialize
o Due to its strict design language, it is only good with users that are working with material design.
o Materialize CSS is not flexible enough to use in some situations because it only uses google components.
o It is a very large framework, making it difficult for others to have and use it.
o The materialize community has no cooperate support.
Bulma: Bulma is highly praised for its simple syntax and minimalistic yet aesthetic design. It comes with a small but very reliable and passionate community. Bulma for most users, has the most readable classes and is definitely easy to learn.
Pros of Bulma
o Bulma comes with naming conventions which are easy to use and remember.
o Its default settings are so good that even if you don’t change them, you’ll end up with a clean and modern design for your webpage.
o Its default properties could be easily customized using SASS.
o It doesn’t include JavaScript features.
Cons of Bulma
o Bulmas style is quite distinct and as a result we could end up with very similar-looking websites.
o Since the framework is fairly new, it has a small community.
o To alter the properties of the framework, the user will have to find that specific code and modify it by themselves.
Pure: Pure is a set of small, responsive modules created by Yahoo that you can use in every web project. It makes creating columns a lot more flexible.
Pros of Pure:
o Unlike most CSS frameworks, pure has a large community because it is supported by Yahoo.
o The framework is tiny and only takes up to 3.7kb (compressed) when all modules are used.
o It consists of pre-made, responsive components that are made for the modern web.
o Its reusable and responsive modules can be added to any web projects.
Cons of Pure
o Pure is not convenient for less experienced developers as they need to create their own designs to make use of the framework.
o It has restrictions for choosing the templates and design patterns of the web design.

Semantic UI: Semantic UI is a development framework that helps create beautiful, responsive design using human friendly html. It has nice looking layouts by default and up to 3000 different kinds of themes. Although it possesses features such as concise html, intuitive JavaScript and simplified debugging, it has one of the steepest learning curves and very strict conventions.
Pros of semantic UI
o It makes use of semantic class name for its styling, making it easier for beginners to understand.
o Many users are satisfied with its futuristic and beautiful design.
o Its documentation is well written and easy to use.
o It has various UI components you may need for almost every project you will embark on.
Cons of semantic UI
o Due to its extremely large file size, it is better to use specific modules and components.
o It is difficult for developers who are not familiar with JavaScript.
o It contains a lot of UI inaccuracies and has small number of classes.

Tailwind CSS: Adam Wathan, the creator of tailwind often shared his thoughts on how utility-based CSS was always superior to semantic CSS but it wasn’t till 2019 that developers started to embrace his idea and adopting them into their codes. Tailwind never encourages its users to use the same design twice even if the features for each design is similar. If you are bored of your current CSS frameworks and you need a completely new approach to your work, Tailwind is definitely the new and radical framework you could always opt out to.
Pros of Tailwind
o Developers do not have to override existing styles since it doesn’t come with pre-designed components.
o It allows developers to reuse their own custom components throughout their projects.
o It is a responsive and mobile friendly framework with rare bugs and breaks.
o It also offers thousands of built-in classes that do not require you to create designs from scratch.
o It is one of the fastest frameworks when it comes to styling html.
Cons of Tailwind
o Due to the built-in classes, tailwind often takes time to learn.
o It lacks significant styling component and as a result, developers have to spend time implementing these features manually.
o Tailwind has a steep learning curve, making it not the best choice for developers.

Tachyons: Tachyon is a fast loading, highly readable and lightweight framework. It achieves its super easy design system by keeping all of its codes in the html file through the use of single utility classes. It helps users understand their project design patterns and promotes reusability through out their projects.
Pros of Tachyons
o This framework allows users to create reusable properties to build diverse and flexible components.
o It includes many pre-made components too.
o It defines classes identically for each break point.
Cons of Tachyons
o Tachyon is not as popular as most CSS frameworks and as a result, has a small community, making it harder for developers to find tutorials and materials on it.
o Some developers find it boring to use in the long run since it is said to be feature complete (new features are barely added).
Uses of CSS
Most web developers use CSS for one or all of the following reasons:
 CSS is generally used for defining the style of webpages.
 It makes it possible to control the presentation of html documents.
 CSS helps define the loom and formatting of a document written in a markup language.
 It makes it possible to change an entire website by just changing a single file.
 It makes the maintenance of a website easier by providing a flexible look to the website that can be altered in a convenient way.
 Through CSS, flash files and animations are created directly.
 CSS frameworks can be used to develop online web-based application or community.
 Social media based platforms inter-relate with CSS frameworks which makes updating the user interphase easier.
CONCLUSION
Although there are other types of framework languages used by developers, each language has its own purpose and helps developers differently. From this article, I hope readers are able to understand what CSS is about and how it can be used for web development. Readers should bear in mind that;
• CSS is independent of HTML and can be used with any XML based markup language.
• CSS frameworks with more features and pre-made components are better suited for beginners while those that offer styling are often more convenient for experienced developers.
• When using external CSS, a link to the CSS root file has to be mentioned in the html source file.
• CSS is not exactly a programming language because it only determines the structure and style of a webpage. They do not contain any instruction like other programming languages.