Recently I was tasked with mentoring a small group of web development noobs. The program required me to guide the learners through three months. To help me ensure that I provide quality guidance, I decided to write articles on basic concepts that I felt needed to be understood well by any web developer. In this article, I'll introduce you to CSS and some core concepts you will need in nearly all projects you will work on as a web developer or a web designer.

Introduction to CSS.

For starters, let us understand what CSS is, why, when, and how we use it. CSS stands for Cascading Style Sheets. It is a document or a bunch of lines of code that is used to describe how an HTML(HyperText Markup Language) or XML(Extensible Markup Language) document is presented on the browser. The colors, positions, fonts, and a lot more (just stick around). The first term, Cascading, implies that a flow is followed when writing and utilizing these styles. If you've never written a single line of CSS, I'd recommend reading this MDN document on CSS Syntax first. This is because I will use terms like selectors, properties, and values a lot and you want to know what they are in this context before proceeding to benefit more from this article. Also, I won't be writing any code, so this article is purely theoretical hence you can read through it in a sitting. CSS can be written as:-

Inline (as a property in an HTML tag)
Internal (inside a style tag within the head tag of an HTML document)
External (in a separate file from the HTML document)

Cascading, Inheritance, and Specificity.

Rules are meant to be broken but not when it comes to CSS rules, there are consequences which include long hours of debugging and many lines of unnecessary code. Cascading, inheritance, and specificity determine how styles are applied to HTML elements on a web page and are crucial for creating effective and efficient stylesheets.

Cascading refers to how multiple styles can be applied to the same element. In CSS, an element can be styled using multiple stylesheets, and these styles can be combined in a specific order (called the cascade) to determine the final styles applied to the element.

Inheritance refers to how styles are passed down from parent elements to child elements. In CSS, certain styles (such as font-family and color) are inherited by child elements by default. This means that if you set the font-family for a <div> element, all of the text within that <div> will have the same font-family, unless it is overridden by a more specific style.

Specificity refers to how the cascade is applied to determine which style should be applied to an element. In CSS, styles are assigned a specificity value, and the style with the highest specificity value will be applied to the element. This means that a more specific style (e.g. an inline style applied directly to an element) will take precedence over a less specific style (e.g. a style defined in a global stylesheet). Different selectors i.e. id, class, and element selectors also have different specificity values.

Understanding and adhering to these rules could save you time and make you more productive as a developer in general.

Typography

Typography is another important aspect of web design, and CSS provides several properties and techniques for styling and formatting text. Some of the most commonly used CSS typography properties include:

font-family: This property specifies the font family to be used for the text. It can be set to a specific font name (e.g. "Arial"), or to a generic font family (e.g. "sans-serif").
font-size: This property specifies the size of the font. It can be set to a specific size in pixels (e.g. 12px) or to a relative size (e.g. "large" or "smaller").
font-weight: This property specifies the weight or boldness of the font. It can be set to a specific numeric value (e.g. 700 for bold) or to a relative value (e.g. "bold" or "lighter").
font-style: This property specifies the style of the font, such as italic or oblique. It can be set to "italic" or "oblique".
text-align: This property specifies the alignment of the text within a block-level element. It can be set to "left", "right", "center", or "justify".

In addition to these properties, CSS also provides several techniques for advanced text formatting, such as text transformations (e.g. text-transform: uppercase), text decorations (e.g. text-decoration: underline), and text shadows (e.g. text-shadow: 2px 2px 2px #ccc).

The Box Model

The box model is the other crucial concept in CSS. It describes how HTML elements are represented and sized on a web page.

The box model consists of four main parts: the content area, the padding, the border, and the margin. These four parts work together to determine the size and position of an HTML element on a web page.

The content area is the innermost part of the box model. It is the area where the element's content (e.g. text or images) is displayed. The width and height of the content area are determined by the width and height properties in CSS.

The padding is the space between the content area and the border. It is used to create space around the content of the element. The width of the padding is determined by the padding property in CSS.

The border is a line that surrounds the padding and content area. It is used to create a visual separation between the element and other elements on the page. The width and style of the border are determined by the border property in CSS.

The margin is the space between the border and the surrounding elements. It creates space around the element and separates it from other elements on the page. The width of the margin is determined by the margin property in CSS.

Think of any element in HTML as placed inside a box, actually, inside the box.

Display, Position, and Float

Where and how your element appears on the screen and how much space it occupies compared to other elements is something you want to be in full control of. This can be managed by among other techniques, the display, position, and float properties in CSS.

display specifies the type of box an element should generate. It can take the following values:

block: generates a block-level box, which takes up the full width of its parent container and creates a new line after it.
inline: generates an inline-level box, which is placed inline with the text and only takes up as much width as necessary.
inline-block: generates an inline-level box, but it can have a specified width and height.
none: the element will not be displayed at all.

position specifies how an element is positioned within its parent element. It can take the following values:

static: the element is positioned according to the normal flow of the document. This is the default value.
relative: the element is positioned relative to its normal position.
absolute: the element is positioned relative to its nearest positioned ancestor (if any).
fixed: the element is positioned relative to the browser window and will not move even if the page is scrolled.

float is a CSS property that specifies how an element should float within its parent element. It can take the following values:

left: the element will float to the left of the containing element and text will flow around it on the right.
right: the element will float to the right of the containing element and text will flow around it on the left.
none: the element will not float and will remain in the normal flow of the document. This is the default value.

When an element is floated, it is removed from the normal flow of the document and other elements will wrap around it. This can be useful for creating layouts, but sometimes you may want to prevent other elements from wrapping around a floated element.

To clear a float, you can use the clear property in CSS. It can take the following values:
- left: prevents elements from floating to the left of the cleared element.
- right: prevents elements from floating to the right of the cleared element.
- both: prevents elements from floating on either side of the cleared element.

Animations and transitions

CSS allows you to create animations and transitions that can add visual interest and interactivity to a website.

Animations involve changing the style of an element over some time and can be used to create visual effects such as moving or fading elements. To create an animation, you can use the animation property in CSS. It takes a set of keyframes as its value, which specify the style of the element at various points throughout the animation.

Transitions involve smoothly changing the style of an element when it is hovered over, clicked, or otherwise interacted with. To create a transition, you can use the transition property in CSS. It takes a duration as its value and specifies the length of time it should take for the transition to complete.

Responsive Design

Responsive design is an approach to web design that ensures a website looks and works well on a variety of devices and screen sizes. It involves using CSS media queries and flexible layouts to adapt the layout of a website to the size of the viewport.

One way to create a responsive design is to use a responsive grid system, which divides the page into rows and columns that can be resized and rearranged on different devices. This can be achieved using CSS grid or flexbox.

Media queries are used to apply different styles based on the characteristics of the device, such as the width of the viewport or the type of device. For example, you might use a media query to apply a different set of styles for desktops, tablets, and smartphones. You can also use media queries to hide or show elements based on the viewport size.

Conclusion

Now that you're here, I hope you've learned a thing or two and reminded yourself of some core CSS concepts. Watch out for more such articles where we go through concepts that are crucial for your daily development.

6 must-know CSS concepts for web developers and web designers.

Table of contents