How to Edit CSS Code for Visually Stunning, Responsive Website Design


If you’ve ever landed on a website with stunning visuals and layouts, there’s a good chance it was achieved with the help of a programming language called CSS.

CSS, which stands for Cascading Style Sheets, is the language that sets the appearance of a website, including its fonts, color, and layout. It is a companion to the HTML language: HTML provides the content of a website, and CSS enhances the styling of the HTML content. Besides being used to create visually engaging websites, CSS is often used to enhance the aesthetics of user interfaces for web and mobile applications.

You may also come across CSS in popular content management system platforms such as WordPress or Squarespace, where it comes pre-packaged as themes. This allows you to choose the look and feel of your website, be it a photography portfolio or an online clothing store. Familiarity with CSS will come in handy if you intend to customize your website on these platforms, as they often allow you to modify the appearance by editing the CSS code.

As a website is often treated as a representation of a company’s brand or image, it’s worth ensuring that your website’s presentation makes a lasting impression on your target audience, and helps it to stand out from competitors.

Learning CSS can be a lot of fun. You can see your stylings — such as changing a background from blue to yellow, or enlarging an image when your cursor goes over it — reflected instantly as you write the code.

In addition to determining a website’s visual layout, CSS is used to ensure that a website stays consistent when viewed from various devices, like a mobile phone or tablet. This is called responsive web design, and it goes hand in hand with front-end frameworks, such as Bootstrap, to allow us to rapidly create a responsive mobile-first layout. Working knowledge of CSS will help when applying the CSS classes that comes with these frameworks, or when making changes to the pre-defined styling and layout.

CSS at General Assembly

In General Assembly’s part-time Front-End Web Development (FEWD) course, which I teach at our Singapore campus, I walk students through the basics of HTML before embarking on CSS, as the two languages are used hand in hand. I provide an example of a finished website as well to allow students to see what they are working toward.

Throughout FEWD, our full-time Web Development Immersive course, and our online HTML, CSS & Web Design course, students learn how to write CSS syntax and link it effectively with HTML files. We also break down the most commonly used CSS properties, such as styling of text and background images. Students learn how to style multiple elements or a smaller group of elements through the use of classes, IDs, advanced selectors, and pseudo-selectors, and delve into creating layouts by using margins and paddings, floats, and positioning using flexbox.

By the end of these courses, students are equipped with a firm understanding of CSS and the ability to create a visually appealing, interactive website that responds to various mobile or tablet devices.

Ask a Question About Our Coding Programs

Meet Our Expert

Calvin Tan began his career as a visual designer, but pivoted to web development after attending General Assembly’s Web Development Immersive course in Singapore. He’s now a developer and designer specializing in front-end web development. He enjoys graphic design, coding, and imparting his knowledge of both to others.

“I try to put myself in the shoes of my students to understand areas they may struggle with. The most priceless moments for me are when the expression on my their faces go from ‘Huh?’ to ‘Oh!’ when they start to make sense of the information.”

– Calvin Tan, Front-End Web Development Instructor, General Assembly Singapore

Leave a Reply