Introduction to CSS
CSS (Cascading Style Sheets) is a stylesheet language used to control the visual appearance of web pages. It allows developers to separate the content (HTML) from the presentation (CSS) to make websites visually appealing and easier to maintain.
Why CSS is Important?
- Separation of Content and Design: Keeps HTML code clean by separating structure from styling.
- Consistency: Allows applying uniform styles across multiple web pages using a single stylesheet.
- Improves User Experience: Enhances usability with proper design, colors, and layouts.
- Responsive Design: CSS enables creating layouts that adapt to different screen sizes (desktop, mobile, etc.).
How CSS Works?
CSS follows a "selector { property: value; }" syntax, where the selector targets the HTML element, and the property defines what style to apply with a specific value.
/* Example CSS */
h1 {
color: darkblue;
text-align: center;
font-size: 36px;
}
Ways to Apply CSS
There are three main ways to apply CSS to an HTML document:
1. Inline CSS
Applied directly within an HTML element using the style attribute.
<p style="color: red; font-size: 20px;">
This is an example of Inline CSS.
</p>
2. Internal CSS
Written within the <style> tag inside the HTML <head> section. Used for styling a single page.
<style>
h1 {
color: green;
text-align: center;
}
</style>
3. External CSS
Written in a separate .css file, which is linked to the HTML page. This method is preferred for large projects with multiple pages.
/* styles.css */
body {
background-color: lightgray;
font-family: Arial, sans-serif;
}
To link the external stylesheet to an HTML file:
<link rel="stylesheet" href="styles.css">
Cascading Order
The term "Cascading" in CSS refers to the hierarchy that determines which styles are applied when multiple rules target the same element. The order of precedence is:
- Inline Styles (highest priority)
- Internal Styles
- External Styles
- Browser Default Styles (lowest priority)
Basic Structure of a CSS Rule
Below is the structure of a typical CSS rule:
selector {
property: value;
}
Explanation:
- Selector: Targets the HTML element (e.g.,
p,h1,.class,#id). - Property: Defines the style to apply (e.g.,
color,font-size). - Value: Specifies the value of the property (e.g.,
red,20px).
CSS Selectors
CSS selectors are patterns used to select and style specific HTML elements. They allow targeting elements based on their name, class, ID, attributes, or hierarchy within the HTML structure.
1. Universal Selector
The universal selector * selects all elements on the web page.
/* Example: Apply margin 0 to all elements */
* {
margin: 0;
padding: 0;
}
2. Type (Element) Selector
Targets all elements of a specific type (HTML tag).
/* Example: Style all paragraph elements */
p {
color: darkblue;
font-size: 18px;
}
3. Class Selector
Targets elements with a specific class. Use . followed by the class name.
/* Example: Style elements with class 'highlight' */
.highlight {
background-color: yellow;
font-weight: bold;
}
Usage in HTML:
<p class="highlight">This is highlighted text.</p>
4. ID Selector
Targets a specific element with a unique ID. Use # followed by the ID name.
/* Example: Style an element with ID 'header' */
#header {
background-color: #333;
color: white;
text-align: center;
}
Usage in HTML:
<div id="header">Welcome to My Website</div>
5. Group Selector
Applies the same styles to multiple selectors. Use commas to separate the selectors.
/* Example: Style all h1 and h2 elements */
h1, h2 {
font-family: Arial, sans-serif;
color: darkgreen;
}
6. Descendant Selector
Selects elements that are descendants of a specific element.
/* Example: Style paragraphs inside div elements */
div p {
font-style: italic;
}
Usage in HTML:
<div>
<p>This paragraph will be italic.</p>
</div>
7. Child Selector
Selects direct child elements of a specific element. Use > between the parent and child elements.
/* Example: Style only direct child paragraphs of div */
div > p {
color: red;
}
8. Adjacent Sibling Selector
Selects an element that is immediately next to another element. Use + between the selectors.
/* Example: Style the paragraph immediately following an h1 */
h1 + p {
font-weight: bold;
}
9. General Sibling Selector
Selects all siblings of a specific element. Use ~ between the selectors.
/* Example: Style all paragraphs that are siblings of an h1 */
h1 ~ p {
color: gray;
}
10. Attribute Selector
Selects elements based on their attributes. There are different ways to match attributes:
[attribute]: Selects elements with the specified attribute.[attribute="value"]: Selects elements with an attribute that exactly matches the value.[attribute^="value"]: Selects elements whose attribute value starts with the specified value.[attribute$="value"]: Selects elements whose attribute value ends with the specified value.[attribute*="value"]: Selects elements whose attribute value contains the specified value.
/* Example: Style input elements with a placeholder attribute */
input[placeholder] {
border: 2px solid blue;
}
11. Pseudo-classes
Pseudo-classes define the special state of an element, such as when a link is hovered.
/* Example: Change color on hover */
a:hover {
color: red;
}
12. Pseudo-elements
Pseudo-elements style specific parts of an element, such as the first letter.
/* Example: Style the first letter of a paragraph */
p::first-letter {
font-size: 24px;
color: darkred;
}
CSS Properties
CSS properties are used to define the styles applied to selected elements in your web pages. Each property has a specific function and value that determine how the elements are displayed.
1. Color and Background Properties
These properties control the text color and background color of elements.
/* Example: Setting text and background colors */
h1 {
color: navy; /* Text color */
background-color: lightgray; /* Background color */
}
2. Font Properties
Font properties are used to control the typography of text elements.
/* Example: Setting font properties */
p {
font-family: Arial, sans-serif; /* Font type */
font-size: 16px; /* Font size */
font-weight: bold; /* Font weight */
font-style: italic; /* Font style */
text-transform: uppercase; /* Text transformation */
}
3. Text Properties
These properties control the alignment, decoration, and spacing of text.
/* Example: Text properties */
h2 {
text-align: center; /* Text alignment */
text-decoration: underline; /* Underline text */
line-height: 1.5; /* Line height */
letter-spacing: 1px; /* Spacing between letters */
}
4. Box Model Properties
The CSS box model describes how elements are structured and spaced. Key properties include:
/* Example: Box model properties */
div {
width: 300px; /* Width of the element */
height: 200px; /* Height of the element */
padding: 20px; /* Space inside the border */
margin: 15px; /* Space outside the border */
border: 2px solid black; /* Border properties */
}
5. Layout Properties
Layout properties are used to control the positioning and display of elements.
/* Example: Layout properties */
.container {
display: flex; /* Flexible box layout */
flex-direction: column; /* Arrange children vertically */
justify-content: center; /* Center children vertically */
align-items: center; /* Center children horizontally */
position: relative; /* Positioning context */
}
6. Margin and Padding Properties
Margin creates space outside of elements, while padding creates space inside.
/* Example: Margin and padding */
.box {
margin: 20px; /* Margin outside the box */
padding: 15px; /* Padding inside the box */
}
7. Border Properties
Border properties control the appearance of borders around elements.
/* Example: Border properties */
.box {
border: 2px solid black; /* Border width, style, and color */
border-radius: 10px; /* Rounded corners */
}
8. Positioning Properties
Positioning properties determine how elements are positioned on the page.
/* Example: Positioning properties */
.absolute-box {
position: absolute; /* Absolute positioning */
top: 50px; /* Position from the top */
left: 100px; /* Position from the left */
}
9. Display Properties
Controls how elements are displayed in the document flow.
/* Example: Display properties */
.hidden {
display: none; /* Hide element */
}
.block {
display: block; /* Block-level element */
}
.inline {
display: inline; /* Inline-level element */
}
10. List Properties
Used to style lists, including bullet points and indentation.
/* Example: List properties */
ul {
list-style-type: square; /* Bullet style */
padding-left: 20px; /* Indentation */
}
11. Animation Properties
Control the animations and transitions for elements.
/* Example: Animation properties */
@keyframes example {
from {background-color: red;}
to {background-color: yellow;}
}
.animated {
animation: example 2s infinite; /* Animation name and duration */
}
12. Transition Properties
Define the transition effects when a property value changes.
/* Example: Transition properties */
.box {
background-color: blue;
transition: background-color 0.5s ease; /* Transition effect */
}
.box:hover {
background-color: green; /* Change color on hover */
}
CSS Box Model
The CSS Box Model is a fundamental concept that describes how HTML elements are structured and how their dimensions are calculated. It consists of four main parts: content, padding, border, and margin. Understanding the box model is crucial for effective layout design.
1. Content Box
The content box is where text and images appear. Its size is determined by the width and height properties.
/* Example: Set content dimensions */
.box {
width: 200px; /* Width of content */
height: 100px; /* Height of content */
}
2. Padding Box
Padding is the space between the content and the border. It increases the size of the box but does not affect the layout of surrounding elements. Padding can be set for all sides or individually.
/* Example: Add padding */
.box {
padding: 20px; /* Uniform padding on all sides */
/* OR individual padding */
/* padding-top: 10px; */
/* padding-right: 15px; */
/* padding-bottom: 10px; */
/* padding-left: 15px; */
}
3. Border Box
The border is a line surrounding the padding and content. You can style borders using width, style, and color. Like padding, borders increase the overall size of the box.
/* Example: Add a border */
.box {
border: 5px solid black; /* 5px width, solid style, black color */
}
4. Margin Box
Margin is the space outside the border, creating distance between the box and other elements. Unlike padding and border, margins do not increase the size of the element's box.
/* Example: Add margin */
.box {
margin: 30px; /* Uniform margin on all sides */
/* OR individual margin */
/* margin-top: 10px; */
/* margin-right: 15px; */
/* margin-bottom: 10px; */
/* margin-left: 15px; */
}
5. Box Model Visualization
Here's a visual representation of the CSS Box Model:
6. Calculating Total Width and Height
The total width and height of a box can be calculated as follows:
Total Width = Width + Padding (left + right) + Border (left + right) + Margin (left + right)
Total Height = Height + Padding (top + bottom) + Border (top + bottom) + Margin (top + bottom)
This is important for understanding how elements fit together in a layout.
7. Box-Sizing Property
The box-sizing property alters how the total width and height of an element are calculated. The two common values are:
content-box: Default value. Width and height include only the content, excluding padding and border.border-box: Width and height include content, padding, and border, making it easier to manage element sizes.
/* Example: Using box-sizing */
.box {
box-sizing: border-box; /* Include padding and border in the width/height */
width: 200px; /* Total width includes padding and border */
padding: 20px;
border: 5px solid black;
}