The CSS Series - Part 1: An Intro to CSS

This is Part 1 in a multi-part CSS educational series developed for the #vetswhocode non-profit coding boot camp. And if you are a veteran, apply for this free coding boot camp HERE.

Follow @nbhankes and @vetswhocode to get notified when then next part of this educational series is released.

Expect the following parts in this series to serve as valuable reference material for your development career.

Some of the topics to look forward to are:

• Connecting the CSS style sheet to the index.html file
• Box Model
• Selectors
• Specificity
• CSS Units
• Flexbox
• Grid Layout
• Mobile First Design
• CSS Variables
• & more

Donate to #vetswhocode life-changing mission HERE. 🙏

Introduction

This part will give a high level overview of CSS. This will help bring context to the purpose and potential of CSS in modern web development. By the end of this page, you will understand the concept and basic syntax of CSS.

Prerequisites

A basic understanding of HTML

Defining CSS

Cascading Style Sheets (CSS) is a language web developers use to describe how HTML and XML elements appear on the screen. Simply put, CSS allows developers to add style (color, form, contrast, shape, movement, responsiveness, etc.) to HTML layouts. CSS is not a programming language, but rather a style sheet language. Functionally, it works by selecting an HTML element and assigning the selected element CSS properties.

Introducing CSS Syntax

CSS syntax follows a simple three-part naming convention. The "selector" selects an html element. The "property" is a pre-defined CSS property. The "property value" is a value assign to the "property."

selector {
  property: property value;
}

The above example is only for teaching purposes so that you can understand the CSS naming conventions. The example below is similar to what you will write in the real world:

div {
 background-color: red;
 width: 50%;
}

The above code block shows an example of basic CSS syntax where all elements from a linked HTML document are assigned a background color of red and a width equal to 50% of the viewport width.

The selector, in this case "div," is followed by curly braces. The CSS properties (background-color and width) assigned to this selector are placed within the brackets and supplied with CSS properties values (red and 50%). Property and property value pairs are always separated by semi colons.

Conclusion

You just learned about the definition and purpose of CSS and gained exposure to its most basic syntax.