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!
