What Is CSS?

Key takeaways

Building websites is a multifaceted process that necessitates a range of skills and technologies. Notably, HTML and CSS serve as the fundamental technologies underpinning websites. 

• In web development, a style sheet refers to a document that includes guidelines and directives governing the presentation of elements within a web page. CSS adjusts the font, size, or decorative flourishes like animations or images. 

• CSS can be a highly useful skill, and knowing it can enable you to create responsive, user-friendly, and visually pleasing websites.

• You can likely learn the basics of CSS within two weeks, and with consistent practice, you can gain proficient knowledge within a few months.

When skillfully combined, HTML and CSS empower developers to craft visually captivating and well-structured websites, improving user engagement.

 You can learn the basics of CSS, HTML, and more essential developer tools with IBM’s Front-End Developer Professional Certificate.

What does CSS stand for?

CSS is an acronym for Cascading Style Sheets. In web development, a style sheet refers to a document that includes guidelines and directives governing the presentation of elements within a web page. CSS adjusts the font, size, or decorative flourishes like animations or images. 

Every web browser comes equipped with a default style sheet. However, most web pages feature custom CSS styles configured by web designers, which override the default CSS settings. The cascading nature of CSS ensures that the last defined style sheet takes precedence.

The origin of CSS

The concept of styling a website emerged as early as 1994. While no single individual invented CSS, Håkon Wium Lie, a Norwegian web pioneer and computer scientist, proposed the original idea.

Soon afterward, Bert Bos, a renowned Dutch computer scientist known for his contributions to the Argo browser, partnered with Lie to develop the CSS specification. Lie and Bos authored the first official CSS specification, published by the World Wide Web Consortium (W3C) in 1996.

How does CSS work? 

If hypertext markup language (HTML) is the skeleton of a book, outlining the chapters, sections, and content, then CSS serves as the book’s cover design and typography, enticing readers to pick up and explore the book.

More technically, HTML elements represent different components on a web page, such as a paragraph or a heading. For example, this is an HTML tag:

<p>This is a paragraph</p> 

Remember, the paragraph on its own lacks styling. The following CSS code, however, can style this paragraph: 

p  {  color: purple;  font-weight: bold;  }

In the CSS mentioned above, “p” acts as the selector, specifying that the styling applies to all HTML paragraphs. The code within the curly brackets forms the declaration, which includes properties (color and font) and their corresponding values (purple and bold) that the selector will inherit. 

Similarly, altering the values can achieve various styles. For example, a property like “background-color” can have values like “red” or “blue, “background-position” can have values like “top” or “bottom,” and “text-align” can have values like “center,” “right,” or “left.”

Did you know? US government websites use “usa” as a prefix for CSS selectors (e.g., .usa-button) to prevent possible conflicts with styles not associated with the US Web Design System [1].

What are the 3 types of CSS?

A web designer may use one of three CSS types to style and customize a website: inline, embedded (internal), or external. Let’s explore each of them in detail below.

1. Inline CSS

Inline CSS applies styles to a single HTML element and defines itthem within its style attribute. This approach is useful for rapidly previewing, testing, or addressing issues with web pages. However, excessive inline CSS can cause the HTML structure to become disorderly.

2. Embedded CSS 

Embedded or internal CSS involves placing the CSS code directly within the HTML file. This is useful when applying a unique style to a specific HTML page. Using embedded CSS for multiple pages can be tedious, as the CSS style must be added individually to each page.

External CSS

External CSS is particularly useful for styling large websites. To apply external CSS, web pages must connect to an external.css file. The approach enables web designers or developers to maintain a consistent style across all pages. It’s important to note that using multiple CSS files may impact website loading time. 

The use of inline CSS applies to individual elements, while embedded CSS pertains to specific pages, and external CSS serves for styling an entire website. Choosing the right CSS type depends on the project’s unique requirements and scope, considering the advantages and disadvantages of each approach in website styling.

Pros and cons of using CSS

Every programming language has its strengths and weaknesses. Here are some notable advantages and disadvantages of using CSS in web development:

Advantages

• Support for simultaneous application of styles across multiple web pages

• CSS’ minimal code enhances website loading speed, boosting search engine rankings

• CSS allows changes to website design elements without altering the underlying HTML code, streamlining site upkeep

Disadvantages

• Choosing the right CSS type can be confusing

• CSS code fragmentation across web browsers may cause compatibility issues

Why learn CSS?

Whether you are a beginner or a professional, learning CSS comes with many perks, including:

1. Learning CSS allows you to comprehend the essential building blocks of the web. This knowledge can benefit various professions, including marketing, design, and more.

2. The ability to save money on start-up costs by creating your own website using CSS, while also enhancing brand identity and customer experience.

3. Proficiency in CSS can make it easier to learn and master additional coding languages, such as HTML and JavaScript, which can broaden your skill set and job prospects.

4. Freelancing your web development skills can help you earn extra income alongside your regular job or studies.

How to learn CSS

To learn CSS, dedicate a few hours per week to studying the following:

• Beginner: syntax, selectors, the box model, cascade, specificity, typography, color, and positioning

• Intermediate: flexbox, grid, responsive design, advanced selectors, and variables

• Advanced: animations, transitions, CSS architecture, preprocessors, and performance optimization 

Your studying may include understanding definitions, practicing writing code, and completing skill assessments.

Learning more about CSS and web development with these free resources:

Explore our software developer and web design resources:

• Watch our YouTube video: How to Become a Software Developer

• Reference our glossary: Web Development Terms A to Z

• Test your knowledge: HTML/CSS Skill Assessment

Whether you want to develop a new skill, get comfortable with an in-demand technology, or advance your abilities, keep growing with a Coursera Plus subscription. You’ll get access to over 10,000 flexible courses.

Build job-ready skills with Coursera Plus

Start 7-day free trial

• 
• 
• 
• 

Start 7-day free trial

Frequently Asked Questions (FAQs)