£11.98
£33.98
£24.98
£49.98
Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in a markup language like HTML. CSS is one of the cornerstone technologies of the World Wide Web, alongside HTML and JavaScript.
CSS is used to control the style and layout of web pages. It allows you to apply styles to HTML elements, such as setting colors, fonts, spacing, and positioning. CSS helps in keeping content and presentation separate, which improves accessibility and maintainability.
CSS can be applied in three ways:
style attribute in HTML elements.<style> tag in the <head> section of the HTML.<link> tag in the HTML <head> section.External styling is generally preferred for maintaining larger websites.
<p style="color: blue; font-size: 20px;">This is a blue paragraph.</p>
<style>
p {
color: red;
font-size: 16px;
}
</style>
In your HTML file:
<link rel="stylesheet" type="text/css" href="styles.css">
In styles.css file:
p {
color: green;
font-size: 14px;
}
CSS is composed of selectors and declarations. A selector points to the HTML element you want to style, while a declaration block contains one or more declarations separated by semicolons. Each declaration includes a property and a value, separated by a colon.
h1 {
color: navy;
margin-left: 20px;
}
Type Selector: Selects elements by their type.
h1 {
color: orange;
}
Class Selector: Selects elements by the class attribute. Prefixed with a dot.
.myclass {
font-weight: bold;
}
ID Selector: Selects a single element by its id attribute. Prefixed with a hash.
#myid {
background-color: yellow;
}
Color and Background
color: Sets the text color.background-color: Sets the background color.p {
color: red;
}
div {
background-color: lightblue;
}Text Formatting
font-size: Sets the size of the font.text-align: Sets the horizontal alignment of text.p {
font-size: 16px;
}
h1 {
text-align: center;
}
Box Model
margin: Space around elements.padding: Space inside the element between the content and the border.border: Border around the element..box {
margin: 10px;
}
.box {
padding: 20px;
}
.box {
border: 1px solid black;
}
Positioning
position: Specifies the type of positioning (e.g., absolute, relative)..element {
position: absolute;
top: 10px;
left: 20px;
}
You can combine multiple selectors to target elements more specifically.
/* Selects all <p> elements inside <div> elements */
div p {
color: blue;
}
Flexbox is a layout model that allows for responsive design elements to be aligned and distributed within a container.
.container {
display: flex;
justify-content: center; /* Aligns items horizontally */
align-items: center; /* Aligns items vertically */
}
.item {
flex: 1; /* Allows items to grow to fill available space */
}
CSS Grid Layout is a two-dimensional layout system for the web, enabling more complex layouts and alignments.
.grid-container {
display: grid;
grid-template-columns: auto auto auto; /* Creates a three-column layout */
gap: 10px; /* Space between grid items */
}
.grid-item {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
padding: 20px;
}
Pseudo-classes and pseudo-elements allow you to style specific parts of your elements.
a:hover {
color: green; /* Changes color when the mouse hovers over a link */
}
p::first-letter {
font-size: 200%;
color: red; /* Styles the first letter of a paragraph */
}
Media queries are a key feature of responsive design, allowing you to apply styles based on the size of the device.
@media screen and (max-width: 600px) {
.container {
background-color: lightblue;
}
}
CSS Variables (Custom Properties) let you store values to reuse in your stylesheet.
:root {
--main-bg-color: coral;
}
body {
background-color: var(--main-bg-color); /* Use the stored color */
}
Transitions allow for smooth changes between states, while animations enable more complex sequences of style changes.
.button {
background-color: blue;
transition: background-color 0.5s ease; /* Smooth transition for background color */
}
.button:hover {
background-color: red;
}
@keyframes example {
from {background-color: red;}
to {background-color: yellow;}
}
.div {
animation-name: example;
animation-duration: 4s;
}
You can increase the specificity of your selectors by combining multiple types.
#nav .item:hover {
color: purple; /* This applies only to elements with class 'item' inside the element with id 'nav' when hovered */
}
This guide introduces the basics of CSS, from how to apply CSS to HTML elements to understanding the syntax, selectors, and some common properties. As you practice and explore more complex aspects of CSS, you'll be able to create more visually appealing and functionally rich web pages. Remember, the best way to learn CSS is through hands-on experience and experimentation.
