CSS (Cascading Style Sheets) is a language used to describe the presentation of a document written in a markup language. It is used to apply styles, such as colors, fonts, and layouts, to HTML or XML documents. This tutorial will help you learn the basic CSS concepts every Web Developer should know.
CSS allows developers to separate the presentation of a document from its structure, making it easier to maintain and update the design of a website. CSS can also be used to control the layout and formatting of documents on multiple devices and screen sizes.
1. Selectors:
In CSS, a selector is a pattern used to select the elements on an HTML or XML document that you want to apply styles to. Selectors can be used to select elements based on their tag name, class, id, attribute, and more. Once an element is selected, you can then apply styles to it, such as setting its color, font, or layout.
There are several different types of selectors, each with its own syntax.
1. Element Selector: selects all elements of a specific type. The syntax is the name of the element (e.g., h1, p, div, etc.).
/* selects all <p> elements */p {
color: blue;
}2. Class Selector: selects all elements with a specific class attribute. The syntax is a period (.) followed by the class name (e.g., .my-class)
/* selects all elements with class "my-class" */.my-class {
font-size: 16px;
}3. ID Selector: selects a single element with a specific id attribute. The syntax is a hash symbol (#) followed by the id name (e.g., #my-id)
/* selects the element with id "my-id" */#my-id {
background-color: yellow;
}4. Attribute Selector: selects elements with a specific attribute and value. The syntax is the attribute name within square brackets (e.g., [attribute="value"])
/* selects all <a> elements with a "target" attribute */a[target] {
text-decoration: none;
}CSS selectors are a powerful tool for controlling the presentation of your HTML or XML documents.
2. Box Model:
The CSS box model is the concept used to determine the size and layout of elements on a web page. It describes how the dimensions of an element are calculated, including the element's content, padding, borders, and margins.
Content: The content of the element, such as text or images, is the innermost part of the box. The width and height of the content determines the size of the element.
Padding: The padding is the area around the content, between the content and the border. The width and height of the padding are added to the content to determine the overall size of the element.
Border: The border is the line that surrounds the padding and content. The width and height of the border are added to the padding and content to determine the overall size of the element.
Margin: The margin is the area outside the border, between the border and other elements. The width and height of the margin do not affect the size of the element, but they do affect the space between the element and other elements.
The box model is used by all major browsers to determine the size and layout of elements on a web page. However, different browsers may interpret the box model differently, so it is important to test your CSS in multiple browsers to ensure that the layout is consistent across all platforms.
3. Display and Positioning:
The CSS Display and Positioning property is used to control the layout and position of elements on a web page, creating complex and responsive designs. The display property is used to control how an element is displayed, while the positioning property is used to control where an element is positioned on the web page.
CSS has several properties that can be used to control the display and positioning of elements on a web page.
Display: The display property is used to specify how an element should be displayed. The most common values are "block" and "inline". Block elements take up the full width of their parent container and create a new line after them, while inline elements only take up as much width as necessary and do not create a new line.
Position: The position property is used to specify the positioning method for an element. The most common values are "static", "relative", "absolute", and "fixed". "Static" is the default value, and elements with "static" positioning are positioned according to the normal flow of the document. "Relative" positioning allows an element to be positioned relative to its normal position. "Absolute" positioning allows an element to be positioned relative to its nearest positioned ancestor. "Fixed" positioning allows an element to be positioned relative to the viewport and it will stay fixed even when the page is scrolled.
Top, Right, Bottom, Left: The top, right, bottom, and left properties are used to specify the distance between an element and its nearest positioned ancestor when the position property is set to "absolute" or "relative".
Z-index: The z-index property is used to specify the stack order of an element. Elements with a higher z-index are stacked on top of elements with a lower z-index.
Flexbox and Grid: These are modern layout modules of CSS Flexbox is designed to provide a flexible and efficient way to lay out elements within a container, while Grid is designed to provide a two-dimensional grid-based layout for elements.
4. Floats and Flexbox:
CSS Floats and Flexbox are both used for the layout and positioning of elements on a web page. However, they have some key differences in how they work and when they are best used.
Floats:
A float is a CSS property that allows an element to be placed alongside the float elements and to the left or right of its parent container. Floats were originally intended for text flow around images, but they have been widely used for layout as well. Floats can be cleared with the clear property, to avoid the element to wrap around the float element.
The syntax for the float property is as follows:
element {
float: left | right | none | inherit;
}left: The element will float to the left of its parent container, and any subsequent elements will wrap around it.
right: The element will float to the right of its parent container, and any subsequent elements will wrap around it.
none: The element will not float, and will be displayed according to the normal flow of the document.
inherit: The element will inherit the float value of its parent element.
Here is an example of how to use the float property to create two columns on a web page:
.left-column {
float: left;
width: 30%;
}
.right-column {
float: right;
width: 70%;
}In this example, the left-column and right-column classes are assigned to different elements, the left column will float to the left of its parent container, with a width of 30%, and the right column will float to the right of its parent container, with a width of 70%.
Floats are an older layout method that is best used for simple layout tasks, such as creating columns or positioning elements to the left or right of a container.
Flexbox:
Flexbox, also known as the Flexible Box Layout Module, is a more recent layout method in CSS that allows for a more flexible and efficient layout of elements within a container. It is a one-dimensional layout method, meaning that it lays out elements in a single row or a single column. Flexbox provides a more robust and consistent layout compared to floats, and it is better suited for responsive design.
Here is an example of the syntax for creating a flex container:
.container {
display: flex; /* creates a flex container */
}Once you have a flex container, you can use the following properties to control the layout of the flex items within that container:
1. flex-wrap: This property is used to specify whether the flex items should wrap onto multiple lines or not.
.container {
flex-wrap: nowrap | wrap | wrap-reverse;
}2. flex-direction: This property is used to specify the direction of the flex items within the container.
.container {
flex-direction: row | row-reverse | column | column-reverse;
}3. align-items: This property is used to align the flex items along the cross axis of the container.
.container {
align-items: flex-start | flex-end | center | baseline | stretch;
}4. justify-content: This property is used to align the flex items along the main axis of the container.
.container {
justify-content: flex-start | flex-end | center | space-between | spaceFlexbox is a newer, more flexible layout method that can be used for more complex layout tasks, such as creating responsive and dynamic grids. In modern web development, the use of flexbox is more common and recommended over floats, as it's more powerful and easier to use.
5. Grid Layout:
CSS Grid Layout is a two-dimensional layout method in CSS that allows elements to be arranged in a grid-like structure. It allows developers to create responsive and dynamic grid-based layouts with rows and columns. With grid layout, you can control the size and position of elements on a web page with greater precision and flexibility.
The basic structure of a grid layout is made up of rows and columns, which are defined using the "grid-template-rows" and "grid-template-columns" properties. Items are placed inside the grid using the "grid-row" and "grid-column" properties. The grid-area property can also be used to specify a rectangular area within the grid and position an item there.
Some of the other properties that can be used in grid layout include:
grid-gap: to define the space between rows and columns.
justify-items and align-items: to align items along the row and column axis.
grid-template-areas: to define a named grid template, then assign items to it.
CSS Grid Layout is a powerful layout method that allows for more complex and responsive design compared to other layout methods such as floats or flexbox. It's particularly useful when the layout needs to be flexible and adaptable to different screen sizes and devices.
6. Media Queries:
CSS media queries are used to apply different styles to a web page based on the characteristics of the device or screen that is displaying the page. Media queries allow you to create responsive designs that adapt to the screen size and resolution of the device.
A media query is a CSS feature that uses a media type (such as "screen" or "print") and one or more expressions that check for the specific features of the device, such as its width, height, resolution, or aspect ratio. When the expressions in a media query are true, the styles inside the media query are applied.
Here's an example of a media query that changes the font size of the text when the screen width is less than 800 pixels:
@media screen and (max-width: 800px) {
body {
font-size: 16px;
}
}In this example, the media query checks if the media type is "screen" and the width of the screen is less than 800 pixels. If both conditions are true, the font size of the text inside the body element will be set to 16 pixels.
You can also use multiple media queries to apply different styles for different screen sizes and resolutions, this is called responsive design. Media queries are a powerful tool for creating responsive designs that adapt to the different devices and screen sizes that are used to access a web page.
7. Transitions and Animations:
CSS Transitions and Animations are used to add visual effects and dynamic behavior to web pages.
Transitions:
Transitions allow elements to gradually change from one state to another, over a specified duration of time. Transitions are defined using the "transition" property, which allows you to specify the duration, delay, and easing of the transition. Here's an example of how to create a transition for the background-color property:
div {
transition: background-color 1s ease-in-out;
}
div:hover {
background-color: yellow;
}In this example, the background color of the div element will gradually change to yellow over a period of 1 second when the mouse hovers over the element, with a smooth transition (ease-in-out).
Animations:
Animations allow elements to change from one style to another over a specified period of time, with the ability to control the animation using keyframes. The animation is defined using the @keyframes rule, which specifies the styles for different moments of the animation. The animation property is used to apply the animation to an element. Here's an example of how to create an animation that makes an element move across the screen:
@keyframes example {
from {left: 0px;}
to {left: 100px;}
}
.move {
animation-name: example;
animation-duration: 4s;
}In this example, the animation is named "example" and has a duration of 4 seconds, The class "move" is added to the element, which makes it move horizontally across the screen.
Both Transitions and Animations are useful tools to add visual interest and dynamic behavior to web pages, making them more engaging and interactive. However, it's important to use them judiciously, as overuse can make a website look cluttered and overwhelming.
8. Responsive Web Design:
Responsive web design is a technique that allows web pages to adapt to different screen sizes and resolutions of the devices used to access them. It involves using CSS media queries, flexible grid-based layouts, and flexible images and videos to create designs that adjust and reformat automatically based on the size of the screen.
Responsive web design allows developers to create a single codebase that can be used across multiple devices, instead of having to create separate versions of a website for different devices. This makes it more efficient and cost-effective to develop and maintain a website.
Here are some key techniques used in responsive web design:
Flexible grid-based layouts: using CSS Grid and Flexbox to create layouts that adjust automatically to different screen sizes.
Flexible images and videos: using the max-width and max-height properties to make images and videos adjust to the size of the screen.
Media queries: using CSS media queries to apply different styles to a web page based on the characteristics of the device or screen that is displaying it.
Fluid typography: using relative units such as percentage (%) or viewport units (vw, vh) instead of fixed units (px) for font size and line height.
Responsive web design is becoming increasingly important as more and more people access the internet using a wide variety of devices and screen sizes. By using responsive web design techniques, developers can ensure that their websites are accessible and usable on all devices, providing a better experience for users.
9. CSS Variables:
CSS variables, also known as CSS custom properties, are a way to store and reuse values throughout a CSS stylesheet. They allow you to define a value once and use it in multiple places, making it easier to maintain and update your styles.
CSS variables are defined using the -- notation and are set using the var() function. For example, you can define a variable for a color and then use that variable throughout your stylesheet to set the color of different elements.
:root {
--main-color: #ff0000;
}
h1 {
color: var(--main-color);
}
p {
background-color: var(--main-color);
}In this example, the variable --main-color is defined as #ff0000 and used to set the color of the h1 and p elements. If you want to change the color, you only need to change it in one place (the variable definition) instead of in all the places where the color is used.
CSS variables also can be scoped, which means that they can be defined inside a specific element or class, and only be accessible within that element or class, this allows for better management and organization of variables. They are supported by most modern browsers, and they make it easier to create more maintainable and scalable stylesheets.
10. Preprocessors:
CSS preprocessors are scripting languages that extend the capabilities of CSS and add features such as variables, functions, and mixins. They allow developers to write code in a more structured and organized way, making it easier to maintain and scale their stylesheets.
CSS preprocessors are used in the development and then transpired to plain CSS files, which are then included in the HTML file, this way the browser can interpret and apply the styles. Using a preprocessor can help developers to keep their stylesheets more organized, maintainable, and reusable. It also enables developers to use variables, functions, and other programming concepts to write more efficient and dynamic styles.
The most popular CSS preprocessors are:
Sass (Syntactically Awesome Style Sheets): A popular preprocessor that adds features such as variables, functions, and mixins to CSS. Sass files use the .sass or .scss file extension.
Less (Leaner Style Sheets): A preprocessor that is similar to Sass, but with a slightly different syntax. Less files use the .less file extension.
Stylus: A preprocessor that is similar to Sass and Less, but with a more minimalistic syntax. Stylus files use the .styl file extension.
All of these preprocessors have the ability to use variables, nesting, mixins, functions, and even control flow statements, such as loops and conditionals.
The Tech Platform