Without CSS, a web page would look dull. In this blog we explain exactly what you can do with CSS.
CSS stands for Cascading Style Sheets. It is responsible for the layout of a page and adds the style and color. When we talk about style, we are talking about things like the font sizes, fonts, text colors and the background. When covering HTML in the previous blog, we used a human metaphor to better understand it. Then we compared HTML to the skeleton of a human, which gives structure to the body. CSS can be seen as the personal characteristics. Think of the color of your skin and hair, the size of your body and even the clothes you wear. It is simply the look and style that the visitors of a web page will see.
CSS determines the style and look of a web page. However, this can be done in three different ways. Below is a brief explanation of how they are used.
Inline CSS relates to a specific page element in the HTML page. This is what you call Inline Styles. The HTML page itself will then provide all the information for the layout. It can be imagined that an HTML page is difficult to maintain when style information is added to each element. It often happens that many elements have the same formatting characteristics. It is almost impossible to adjust that layout in all those places. In addition, it creates a cluttered code. Inline CSS is therefore mainly used when a unique style needs to be applied to a specific element.
It is more common for many elements within an HTML page to have the same formatting characteristics. Therefore, using Internal and External styles is better for this.
Internal styling is done when different HTML pages should all have their own style. The code for the style markup is then included in the <head> of that particular HTML page. This is useful because all your styles are then centrally defined on the different HTML pages. On the other hand, it can become cluttered because the code of these pages becomes cluttered. Fortunately, there is the option to collapse this Internal HTML segment, which is offered by several editors. </head>
This last way of HTML styling is very useful when there are many styles, or there are several pages with the same style. A separate CSS file (external stylesheet) is created here. This is a text file that is saved with the suffix .css. This includes the styles you want apply to your web pages. The difference with the previous styles of styles is that no tags need to be included. This is because everything in this file is interpreted by the web page as styling info. You tell the HTML page which CSS file to load into it by adding in the <head> the line: <link rel="stylesheet" href="/WincAcademy.css">. WincAcademy.css is then the name of the CSS file.</head>
Within programming there are no specific rules for using Inline, Internal or External styling. In the programming world, however, there are unwritten rules that you try to style externally as much as possible. This is because it is simply clearer, can be updated separately from the HTML page and all your HTML pages can be styled at once. If specific adjustments are needed for a certain HTML page or HTML element, Internal and Inline styles can be used.
As you may have noticed, CSS plays an important role in web pages. It gives companies the opportunity to be different and unique with their website and to distinguish themselves from others. Without CSS we would be looking at boring pages with black and white text to read, unappealing. Like HTML, CSS is a sought-after skill in today's online world. Just look at several job sites, type in the keyword CSS, and see that people with this skill are in demand. By learning CSS you not only work on your own skills, but you learn the skill of the future!
Want to get started with CSS and learn its basics? Then sign up for our HTML & CSS Fundamentals and learn about HTML and other web development skills in addition to CSS.