From late 2020 to the early weeks of 2022, Sparkbox Frontend Designer Philip Zastrow wrote a 20-part series of tutorials for DigitalOcean covering an introduction to CSS. Philip set out to present the information in an accessible manner that would be useful to coding novices and veteran programmers alike.
About the Series
CSS is different from most programming languages because its primary intent is to create visual styling for HTML elements. The series begins with an introduction to the primary theory that drives CSS standards: the cascade and specification. The tutorials go on to cover the various ways HTML elements can be selected, color can be applied, and how the elusive box model works. Halfway through the series, Philip addresses the task of styling an HTML table and providing a small-screen visual display. The second half of the series gets more in-depth on other tips and tricks, like working with shadows, transparency, and images, with the capstone of the series covering the styling of form elements. We hope you’ll find this helpful!
A Breakdown of This 20-Part Tutorial Series
- How To Apply CSS Styles to HTML with Cascade and Specificity
- How To Select HTML Elements to Style with CSS
- How To Style Text Elements with Font, Size, and Color in CSS
- How To Work with the Box Model in CSS
- How To Use Common Units in CSS
- How To Lay Out Text with CSS
- How To Use Color Values with CSS
- How To Use Links and Buttons with State Pseudo-Classes in CSS
- How To Select HTML Elements Using ID, Class, and Attribute Selectors in CSS
- How To Style a Table with CSS
- How To Use Float and Columns to Lay Out Content with CSS
- How To Apply Background Styles to HTML Elements with CSS
- How To Use Relationships to Select HTML Elements with CSS
- How To Use the Display Property to Manipulate the Box Model in CSS
- How To Load and Use Custom Fonts with CSS
- How To Create Layout Features with Position and Z-Index in CSS
- How To Style HTML Elements with Borders, Shadows, and Outlines in CSS
- How To Use Opacity and Transparency to Create a Modal in CSS
- How To Style Figure and Image HTML Elements with CSS
- How To Style Common Form Elements with CSS
