Go to lewagon.com

What is CSS: An Introduction to Cascading Style Sheets

In the world of web design and development, mastering Cascading Style Sheets (CSS) is a vital skill. CSS, a cornerstone technology of the web alongside HTML and JavaScript, enables developers to control the visual appearance of websites. This article provides a comprehensive introduction to CSS, covering its basic features, syntax, and more. By the end, you'll be familiar with the CSS basics and ready to start your journey into more advanced areas.
what is CSS
Summary

1) What CSS is used for?

Cascading Style Sheets (CSS) is a style sheet language used to describe the look and formatting of a document written in HTML. It’s essential for web design as it allows developers to control typographic characteristics, colour properties, and overall layout of web pages. CSS can be used internally within a style element, inline within HTML elements, or externally via linked CSS files. Since its development in 1996, it has undergone improvements to meet the evolving web demands, ensuring a consistent appearance across different browsers and devices. Despite the complexity of some CSS features, its core function is to separate content from presentation, making websites more accessible and aesthetically pleasing.

2) Understanding CSS

How CSS Works

CSS works by applying styles to elements on a webpage. These styles are written in a CSS file, which is then linked to an HTML file. This separation between style and structure allows developers to apply consistent styles across multiple pages, adapting the appearance to different screen sizes and device types.

CSS Syntax

The foundation of CSS lies in its syntax, which is composed of two main parts: selectors and declarations. Selectors indicate the HTML element to be styled, and declarations specify the style to apply. A declaration is further divided into a property (what to style) and a value (how to style it).

Component Description
Selector Targets the HTML element to be styled
Property Indicates the aspect of the element to be changed
Value Specifies the style applied to the property

 

CSS Selectors

Selectors play a pivotal role in CSS, determining which elements a set of style rules should apply to. CSS offers a range of selectors, allowing designers to target elements based on their tag name, class, id, attribute, and more.

Selector Type Description Example
Element Selects all elements of a given type p {…}
Class Selects all elements with a specific class attribute .class {…}
ID Selects a single element with a specific id attribute #id {…}
Attribute Selects elements based on their attributes a[href] {…}

 

3) CSS Basics

CSS Properties and Values

CSS properties are the stylistic elements that you wish to adjust within your webpage, such as colour, font, width, height, and margin. Each property requires a corresponding value, which defines the degree of the style to be applied.

CSS Units

To quantify CSS values, various units are available. Length-based properties can utilise absolute units like pixels (px) or relative units such as em, which adjust sizing based on the parent element or the user’s default browser settings.

Unit Description
px Pixels, a fixed-size unit commonly used in screen media.
% Percentage of the parent element’s size.
em Relative to the font-size of the parent element.
rem Relative to the font-size of the root element.
vw Relative to 1% of the width of the viewport.
vh Relative to 1% of the height of the viewport.
vmin Relative to 1% of the viewport’s smaller dimension.
vmax Relative to 1% of the viewport’s larger dimension.
cm Centimeters, for print media.
mm Millimeters, for print media.
in Inches, for print media.
pt Points, 1pt is equal to 1/72 of an inch, for print media.
pc Picas, 1pc is equal to 12 points, for print media.
ex Relative to the x-height of the current font.
ch Relative to the width of the “0” (zero) character.
fr Fractional unit and 1fr is for 1 part of the available space.

 

4) CSS Box Model

The CSS box model is a crucial concept that defines how space is distributed around an element. Every HTML element can be considered a rectangular box, comprising four areas: content, padding, border, and margin. Understanding the box model and its properties is key to achieving complex layouts and consistent styling.

Unit Description
px Pixels, a fixed-size unit commonly used in screen media.
% Percentage of the parent element’s size.
em Relative to the font-size of the parent element.
rem Relative to the font-size of the root element.
vw Relative to 1% of the width of the viewport.
vh Relative to 1% of the height of the viewport.
vmin Relative to 1% of the viewport’s smaller dimension.
vmax Relative to 1% of the viewport’s larger dimension.
cm Centimeters, for print media.
mm Millimeters, for print media.
in Inches, for print media.
pt Points, 1pt is equal to 1/72 of an inch, for print media.
pc Picas, 1pc is equal to 12 points, for print media.
ex Relative to the x-height of the current font.
ch Relative to the width of the “0” (zero) character.
fr Fractional unit and 1fr is for 1 part of the available space.

 

5) CSS Layout

CSS layout properties control the positioning and display of elements on the web page. These properties include the display, position, and float properties.

Display Property

The display property determines how an element should behave in the flow of the document. It can have several values, including block (takes up the full width available), inline (takes up as little width as possible), and none (removes the element from the layout).

Value Description
block The element generates a block element box, causing a line break before and after the element. Examples: <div>, <p>, <h1>-<h6>, <ol>, <ul>, <li>, <menu>, <table>.
inline The element generates one or more inline element boxes that do not generate line breaks before or after themselves. In normal flow, the next element will be on the same line if there is space. Examples: <span>, <a>, <img>.
inline-block The element generates a block element box that will be flowed with surrounding content as if it were a single inline box.
flex The element behaves like a block element and lays out its content according to the flexbox model.
grid The element behaves like a block element and lays out its content according to the grid model.
none The element will not be displayed at all (has no layout effects).

Position Property

The position property specifies the type of positioning method for an element. It can be static (default), relative (positioned relative to its normal position), absolute (positioned relative to the nearest positioned ancestor), or fixed (positioned relative to the browser window).

Property Description
Static Default positioning. The element is positioned according to the normal flow of the document.
Relative Position relative to its normal position. The element can be moved with top, right, bottom, and left properties, but it still occupies the original space in the document flow.
Absolute Position relative to the nearest positioned ancestor. The element is removed from the normal document flow and positioned according to the top, right, bottom, and left properties.
Fixed Position relative to the browser window. The element is removed from the normal document flow and stays in the same position even when the page is scrolled.

Float Property

The float property is used to wrap text around an image or to create horizontal navigation. When an element is floated, it is taken out of the normal flow of the page and shifted to the left or right.

Value Description
none The element does not float and will be displayed where it is in the text flow. This is the default value.
left The element floats to the left of its container. Text and inline elements will wrap around it.
right The element floats to the right of its container. Text and inline elements will wrap around it.
inherit The element inherits the float value of its parent.

6) CSS Typography

CSS provides numerous properties to style and control text, including font properties (like font-family, font-size, and font-weight) and text properties (like text-align, text-decoration, text-transform, and line-height).

Property Description
Font-family Specifies the font for text.
Font-size Controls the size of the text.
Font-weight Determines the thickness of the text.
Line-height Sets the space between lines of text.

CSS Colours

CSS offers a wide range of options to set colours for your webpage. You can define colours using predefined names, hexadecimal values, RGB values, or HSL values. Colour properties can be applied to text, backgrounds, borders, and other elements.

Method Description Example
Name Uses predefined color names. color: red;
Hexadecimal Uses hexadecimal values. color: #ff0000;
RGB Uses red, green, blue values. color: rgb(255, 0, 0);
HSL Uses hue, saturation, lightness values. color: hsl(0, 100%, 50%);

7) Most common questions

1) What is the difference between an external stylesheet and inline styles?

An external stylesheet is a separate file linked to your HTML that holds your CSS code. On the other hand, inline styles are CSS rules applied directly within your HTML elements using the ‘style’ attribute.

2) What are CSS rules?

CSS rules are sets of style properties and values that dictate how certain elements on a webpage should look. They include selectors and declarations, with declarations comprising properties and values.

3) What does the CSS code look like?

CSS code typically consists of a selector (which specifies the HTML element you want to style) followed by a declaration block (containing CSS properties and their corresponding values).

4) What are the major browsers that support CSS?

All major browsers such as Google Chrome, Firefox, Safari, and Microsoft Edge support CSS. However, certain CSS features may not be supported or may behave differently across browsers, so it’s crucial to test your CSS code in multiple browsers.

5) What is W3C recommendation?

The World Wide Web Consortium (W3C) sets standards for web technologies like CSS. When the W3C gives a technology its recommendation, it means that the technology has been reviewed and tested and is deemed suitable for widespread use.

6) What is the significance of CSS specification snapshots?

Specification snapshots are stable versions of the CSS specification. Developers and browser implementers use them as a reference point. For example, the “W3C CSS2.1 specification” is a widely used snapshot.

7) How do ‘quirks mode’ and ‘standards mode’ affect CSS rendering?

‘Quirks mode’ and ‘standards mode’ are different ways that web browsers interpret and render your CSS. ‘Standards mode’ follows W3C recommendations closely, while ‘quirks mode’ mimics old browser behaviours for backward compatibility.

8) What is the ‘fallback functionality’ in CSS?

Fallback functionality in CSS allows you to specify an alternative style or feature when a specific CSS property is not supported in a user’s browser.

9) How does CSS ensure a consistent site appearance across different devices?

CSS allows you to create responsive designs using media queries. These let you apply different styles depending on the type of device, screen size, and other factors, ensuring a consistent site appearance.

10) How has the adoption of CSS evolved over time?

Since its introduction in 1996, CSS has become a fundamental part of web design and development. Early on, its adoption was patchy due to inconsistent browser support, but improvements over time have led to widespread and more standards-compliant use of CSS.

Conclusion

Mastering CSS is an essential step towards becoming a proficient web designer. With its ability to style and layout webpages, CSS offers a world of possibilities for creating visually compelling and user-friendly sites. This introduction to CSS basics only scratches the surface of what you can achieve with this powerful style sheet language.

Ready to take your CSS skills to the next level? Enroll in our web development courses today to learn CSS and many other crucial web development technologies.

This article has introduced you to the power and flexibility of CSS. Yet, this is just the beginning. In our web development bootcamp, you’ll dive deeper into CSS, exploring advanced features and learning to create professional-quality web designs. Let your web design journey start here!

Our users have also consulted:
Journey of an Audencia alumni, from finance to tech

After more than 10 years in finance and consulting, convinced that digital and tech would

Pour développe mes compétences
Formation développeur web
Formation data scientist
Formation data analyst
Les internautes ont également consulté :
Iris, from Communication to Fullstack development

Iris comes from Avenches, a city in the Canton de Vaud She studied

Suscribe to our newsletter

Receive a monthly newsletter with personalized tech tips.