CSS
CSS (Cascading Style Sheets) is a language that defines the visual appearance of a website. While HTML determines the structure and content (what's on the page), CSS describes how it looks — colours, fonts, sizes, spacing, the layout of elements on the page, animations, and responsive behaviour across different devices. The word “cascading” refers to the system of rules where more specific styles override more general ones.
- /01
How CSS works
CSS works on the principle of selectors and declarations. A selector specifies which HTML elements the style applies to (all h2 headings, an element with the .card class, an element with the #header ID). A declaration contains a property and a value — for example, color: #FF6B35 sets the text colour to orange. Styles can be defined inline (directly in HTML), in the page header, or in an external CSS file — the last option is the cleanest and allows styles to be shared across pages.
- /02
Responsive design with CSS
Modern CSS offers powerful tools for responsive design — building websites that look great on a monitor, tablet, and mobile. Media queries let you apply different styles based on screen width. Flexbox handles one-dimensional layouts (a row or column), CSS Grid handles two-dimensional layouts (rows and columns at the same time). Container queries (a recent CSS addition) let you style based on the size of a parent element, not the whole screen. At Appitect we always design mobile-first.
- /03
CSS frameworks and preprocessors
Writing plain CSS for large projects can be impractical, which is why tools exist to make development more efficient. Preprocessors like Sass or Less add variables, mixins, and nesting. Frameworks like Tailwind CSS (utility-first) or Bootstrap (component-based) provide pre-built classes. CSS-in-JS solutions like styled-components let you write styles directly in JavaScript. At Appitect we use Tailwind CSS, which we consider the optimal mix of development speed and flexibility.
- /04
CSS and site performance
CSS directly affects page load speed and Core Web Vitals. A large CSS file slows down rendering because the browser has to process all the styles before showing the content. That's why it's important to minimise CSS, remove unused styles (tree-shaking in Tailwind), and inline critical CSS into the page header. Animations are best done via transform and opacity, which the browser can handle efficiently on the GPU, rather than changing element dimensions or positions.
- /05
Practical example
When you open a site on a mobile and the navigation turns into a hamburger menu, that's a CSS media query. When products in a catalogue automatically rearrange from 4 columns to 2 based on screen width, that's CSS Grid. When a button smoothly changes from orange to dark orange on hover, that's a CSS transition. When the whole site switches to dark mode with a single click, those are CSS custom properties (variables).
Want a website that looks great on every device? Design and responsiveness are our strong suit.
We'll be glad to help. The consultation is free and with no obligation.
Get in touchNeed help with your project?
Don't hesitate to reach out — we'll happily advise you on anything from website development to online marketing. The consultation is free.