CSS is a an aspect of web development that allows developers to control the layout, visual styling, and user experience of web pages.
As a non-web designer, understanding CSS basics can enhance your skills and open up new possibilities in your career. In this article, we'll explore the fundamentals of CSS. We will cover the syntax, selectors, properties, and values. We will also explore some practical applications for styling HTML elements.
Let's get started!
What exactly is CSS?
CSS stands for Cascading Style Sheets. It's a styling language used to control the layout and appearance of web pages written in HTML and XHTML. CSS consists of a series of rules, known as styles. Those styles can applied to HTML elements to modify their display. CSS is often used in conjunction with HTML and JavaScript to create dynamic web pages.
How CSS relates to HTML and JavaScript
HTML provides the structure of a web page, while CSS styles that structure. JavaScript, on the other hand, adds interactivity to the page. Together, these three technologies form the backbone of web development.
CSS Syntax
CSS syntax consists of a series of rules, known as styles, which are applied to HTML elements. A CSS rule consists of three parts: a selector, a property, and a value.
Now, let's explore the basic structure of a CSS code.
selector {
property: value;
}
Don't worry, we will breakdown the code above later in this article 😎.
What next? Let's dive in to understanding CSS rules.
A CSS rule is made up of one or more declarations, each consisting of a property and a value. The selector determines which HTML elements the rule applies to.
Example:
p {
color: blue;
}
In this example, the selector is p, the property is color, and the value is blue. This rule applies to all paragraph elements (<p>) on the web page, setting their text color to blue.
Selectors
Selectors are used to target specific HTML elements with CSS rules. There are several types of selectors, including:
- Element selectors target elements based on their tag name.
Example:
h1 {
font-size: 36px;
}
This rule applies to all <h1> elements on the page, setting their font size to 36px.
- Class selectors target elements based on their class attribute.
Example:
.header {
background-color: #f0f0f0;
}
This rule applies to all elements with the class "header", setting their background color to #f0f0f0.
- ID selectors target elements based on their ID attribute.
Example:
#logo {
width: 200px;
}
This rule applies to the element with the ID "logo", setting its width to 200px.
- Attribute selectors target elements based on their attributes.
Example:
input[type="submit"] {
background-color: #007bff;
}
This rule applies to all input elements with the type attribute set to "submit", setting their background color to #007bff.
- Properties and values are used to define the styles applied to elements.
Some common CSS properties include:
-
color: sets the text color -
background-color: sets the background color -
font-size: sets the font size -
padding: sets the padding -
margin: sets the margin
Understanding Property Values
Property values can be keywords, lengths, percentages, or colors.
Example:
p {
color: blue; /* keyword value */
font-size: 18px; /* length value */
background-color: #ff0000; /* color value */
padding: 10%; /* percentage value */
}
In this example, the color property is set to the keyword value "blue", the font-size property is set to the length value 18px, the background-color property is set to the color value #ff0000, and the padding property is set to the percentage value 10%.
Styling HTML Elements
Now that we've covered the basics of CSS syntax, selectors, and properties, let's apply this knowledge to style some HTML elements.
Headings
Headings are an essential part of any web page, and CSS provides several ways to style them.
Example:
h1 {
font-size: 36px;
color: #333;
text-align: center;
}
In this example, we're targeting all <h1> elements on the page and setting their font size to 36px, color to #333, and text alignment to center.
Paragraphs
Paragraphs are another common element that can be styled with CSS.
Example:
p {
font-size: 18px;
color: #666;
padding: 10px;
}
In this example, we're targeting all <p> elements on the page and setting their font size to 18px, color to #666, and padding to 10px.
Links
Links can be styled to change their appearance and behavior.
Example:
a {
color: #007bff;
text-decoration: none;
}
In this example, we're targeting all <a> elements on the page and setting their color to #007bff and removing the text decoration (underline).
Images
Images can be styled to change their size, margin, and other properties.
Example:
img {
width: 100%;
height: auto;
margin: 10px;
}
In this example, we're targeting all <img> elements on the page and setting their width to 100% of their parent element, height to automatic, and margin to 10px.
Working with Colors
Colors are an essential part of web design, and CSS provides several ways to work with colors.
Color Theory Basics
Before we dive into CSS colors, let's cover some basic color theory concepts:
- Hue: the actual color (e.g., red, blue, green)
- Saturation: the intensity of the color (e.g., bright, muted)
- Value: the lightness or darkness of the color (e.g., light, dark)
CSS Color Models
CSS supports several color models, including:
- RGB (Red, Green, Blue)
- HEX (hexadecimal codes)
- HSL (Hue, Saturation, Lightness)
- RGBA (Red, Green, Blue, Alpha) - supports transparency
- HSLA (Hue, Saturation, Lightness, Alpha) - supports transparency
Using Colors in CSS
Colors can be applied to various CSS properties, such as:
-
color: sets the text color -
background-color: sets the background color -
border-color: sets the border color
Example:
p {
color: #ff0000; /* sets text color to red (HEX) */
background-color: rgba(0, 0, 0, 0.5); /* sets background color to black (RGBA) with 50% opacity */
}
Typography
Typography plays a significant role in web design, and CSS provides several properties to control font styles.
Font Families
Font families can be set using the font-family property.
Example:
p {
font-family: Arial, sans-serif; /* sets font family to Arial, fallback to sans-serif */
}
Font Sizes
Font sizes can be set using the font-size property.
Example:
p {
font-size: 18px; /* sets font size to 18 pixels */
}
Font Styles
Font styles can be set using the font-style property.
Example:
p {
font-style: italic; /* sets font style to italic */
}
Layout and Positioning
Layout and positioning are crucial aspects of web design, and CSS provides several properties to control the layout and position of elements.
Display Property
The display property determines the display type of an element, such as block, inline, or none.
Example:
div {
display: block; /* sets display type to block */
}
Position Property
The position property determines the positioning method of an element, such as static, relative, absolute, or fixed.
Example:
div {
position: relative; /* sets positioning method to relative */
}
Float Property
The float property determines whether an element floats to the left or right of its parent element.
Example:
div {
float: left; /* sets float property to left */
}
Box Model
The box model represents the structure of an element, including its content area, padding, border, and margin.
Example:
div {
width: 200px; /* sets width of content area */
padding: 10px; /* sets padding */
border: 1px solid #000; /* sets border */
margin: 10px; /* sets margin */
}
Additional CSS Concepts
There are several additional CSS concepts that are important to understand. Here are some of them:
- CSS units (px, em, rem, %)
- CSS preprocessors (Sass, Less)
- CSS frameworks (Bootstrap, Tailwind CSS)
- CSS grid and flexbox
Conclusion
In this article, we've covered the basics of CSS, including selectors, properties, values, and units. We've also explored how to style HTML elements, work with colors, and control layout and positioning. With this knowledge, you'll be well-equipped to create beautiful and functional web pages.
Feel free to mail me if you want to work with me.
Top comments (0)