CSS: The Art of Web Design
CSS, or Cascading Style Sheets, is an essential component of web development that adds visual style and enhances the presentation of HTML documents. While HTML provides the structure and content of a webpage, CSS brings it to life with colours, layouts, and captivating designs. In this blog post, we'll explore the main concepts and elements of CSS and discover how they shape the aesthetics of a website.
Selectors: Selecting the Right Elements
CSS utilises selectors to target specific HTML elements and apply styles to them. Selectors can be based on element names, classes, IDs, or even attributes. Here are a few examples:
Element Selector: Targets a specific HTML element. For instance, the selector p would target all <p> tags on the webpage.
Class Selector: Selects elements with a specific class attribute. For example, the selector .highlight would target all elements with the class name "highlight".
ID Selector: Targets a unique element with a specific ID attribute. The selector #header would target the element with the ID "header".
Attribute Selector: Selects elements based on their attributes. For instance, the selector [type="submit"] would target all elements with the attribute type set to "submit".
Properties and Values: Styling the Elements
CSS properties define the visual aspects of selected elements, while values determine the specific styles applied to those properties. Here are a few common CSS properties and their associated values:
color: Specifies the text colour. Values can be colour names (e.g., "red"), hexadecimal codes (e.g., "#FF0000"), or RGB values (e.g., "rgb(255, 0, 0)").
font-size: Sets the size of the font. Values can be specified in pixels, percentages, or relative units like "em" or "rem".
margin: Controls the spacing around an element. Values can be specified for each side (e.g., margin-top, margin-right, margin-bottom, margin-left) or in a shorthand format.
background-color: Defines the background colour of an element. Values can be specified in the same formats as colour.
width and height: Sets the width and height dimensions of an element. Values can be specified in pixels, percentages, or other relative units.
CSS also offers more advanced properties for controlling layouts, animations, and transformations, allowing developers to create dynamic and interactive web experiences.
Selectors and Declarations: Applying Styles
In CSS, selectors and declarations work together to apply styles to targeted elements. A declaration consists of a CSS property and its corresponding value, enclosed within curly braces. Multiple declarations can be grouped together within a selector to style an element comprehensively.
For example:
CSS
h1 {
color: blue;
font-size: 24px;
}
.highlight {
background-color: yellow;
}
#header {
text-align: center;
}
In the above CSS code snippet, we have styles applied to different elements. The h1 selector sets the text colour to blue and the font size to 24 pixels. The .highlight selector adds a yellow background colour to elements with the class "highlight". Finally, the #header selector aligns the text in the center of the element with the ID "header".
CSS in Action: Linking CSS to HTML
To apply CSS styles to an HTML document, we link the CSS file to the HTML using the <link> tag. By including the appropriate CSS file, the styles defined within it can be applied to the corresponding HTML elements.
html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
