One new thing to learn this week - CSS basics
So you’ve built an app for a personal project or maybe it’s a static site to be your calling card on the web. But you want to add some styling so that it looks nice & pretty instead of just black coloured text on a white background. What you need now is some CSS - Cascading Style Sheets. CSS is what we use to add styling to the HTML pages generated for web apps and sites. These days CSS can either be written with plain old CSS itself or using a preprocessor like Sass.
To start with, you’ll need to know how to apply CSS to a HTML file. This can be done in 3 ways: inline as a style attribute for each HTML element, internal as a style tag within the head element or external as a separate CSS file that you link to in the HTML file. From there, you’ll need to know about selectors where you add your CSS properties to an element or group of elements. CSS properties include fonts & text styles, setting colour, border, padding and margin values at the most basic level. To learn more about these, have a read through the MDN’s CSS basics tutorial.
CSS Diner is a good place to go to practice CSS selectors. For some inspiration for what can be done with CSS, have a browse through Style Stage and CSS Zen Garden.
Three questions to ponder
- What are the pros & cons of each of the 3 ways you can apply CSS?
- What does the “Cascading” part of Cascading Style Sheets refer to?
- What advantage(s) does using a preprocessor give to developers over vanilla CSS?
Kimmi Gan
Kimmi Gan is a self confessed girl geek who enjoys learning about what’s new in the world of front end development to enable her to build web apps, sites and the occasional data visualisation or CSS art.
Join our slack channel: https://join.slack.com/t/womenwhocodefrontend/shared_invite/zt-gaic5y90-pDJK4H_NbObZ_MU_rcYc0A
Find us on social media