DesignMarch 31, 2025 3 minutes read

Getting to Know Cascading Style Sheets (CSS) Better

Photo by Pankaj Patel on Unsplash

In the world of web development, the visual appearance of a web page plays a super important role. This is where Cascading Style Sheets (CSS) come in as the language that lets developers control and tweak the presentation of HTML elements.

Do you know what CSS is?

CSS stands for Cascading Style Sheets, and it’s a stylesheet language used to style and format web pages written in HTML or XML. It allows separating content (HTML) and presentation (CSS), so developers can change how a web page looks without messing with its HTML structure.

This is the function of css:

  1. Control Appearance: CSS lets developers control various aspects of a webpage’s look, like colors, fonts, sizes, layouts, and more.
  2. Consistency: With CSS, developers can apply consistent styles across a webpage or even a whole website.
  3. Responsiveness: CSS allows for creating responsive web designs that can adjust their appearance to different screen sizes and devices.
  4. Efficiency: By separating content and presentation, CSS reduces the HTML file size and makes code maintenance easier.

Have you ever known the history of CSS?

Just to keep it short, CSS was first proposed by Håkon Wium Lie in 1994. In 1996, the World Wide Web Consortium (W3C) released the CSS level 1 recommendation. Since then, CSS has kept evolving with new features and performance improvements.

Here is the basic css syntax that you should know

  1. Inline CSS
    • Inline CSS is the CSS code written directly within the HTML tag. So, it only affects a single line of HTML code.
    • For example: <p style="color: blue; font-size: 16px;">This text is blue.</p>.
    • The downside of using Inline CSS is that the HTML code becomes hard to read, and if you want to change the appearance of many elements, you have to change each one individually.
  2. Internal CSS
    • Internal CSS is a way to change the design of a web page by inserting CSS code directly into an HTML document. Internal CSS is also known as embedded CSS. This is placed inside <style> the tag in the <head> HTML document section.
    • Example: <head> <style> p { color: blue; font-family: Arial; } </style> </head>
    • The downside of Internal CSS is that if you have a lot of web pages, you have to write the CSS code on each web page.
  3. External CSS
    • External CSS is a way of writing CSS code that’s put in a separate file with a .css extension and then linked to the HTML file using the <link> tag.
    • Example: <head> <link rel="stylesheet" href="style.css"> </head>
    • Using external CSS is the recommended way because it has some advantages, like:
      • Separating HTML and CSS code makes the HTML code cleaner and easier to read.
      • The HTML file size becomes smaller.
      • If you have a lot of web pages, you only need to change one CSS file to change the look of the entire website.

Basically, CSS is a super important tool in modern web development. By getting the basics of CSS, developers can create cool, responsive, and easy-to-maintain web pages.

me

Rizky Ramadhan

Content Writer

I am Rizky Ramadhan, a content writer and programmer who is passionate about sharing knowledge and experiences through writing and coding.