What is CSS?
CSS (Cascading Style Sheets) is a language used to style and format HTML elements on a webpage.
Why Use CSS?
- Separates content (HTML) from design (CSS).
- Improves website appearance and user experience.
- Allows for responsive designs that adapt to different screen sizes.
- Reduces code duplication by applying styles across multiple elements.
How CSS Works
CSS applies styles using selectors, properties, and values.
p {
color: blue;
font-size: 16px;
}
- This changes the paragraph text color to blue and sets the font size to 16px.
Types of CSS
Note:
- CSS is not a programming language; it is a style sheet language used to design webpages.
Linking style.css to index.html
To apply external styles to an HTML page, you need to link a CSS file to your HTML document.
1. Using the <link> Tag
The best way to link CSS is by using the <link> tag inside the <head> section.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Website
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Welcome to My Website
</body>
</html>
- rel="stylesheet" specifies that the file is a CSS stylesheet.
- href="style.css" points to the CSS file.
2. Ensuring the Correct File Path
If the CSS file is inside a folder, update the path:
<link rel="stylesheet" href="css/style.css">
- If the CSS file is in a css folder, the correct path is css/style.css.
3. Alternative: Using an Internal Style
If linking is not working, try internal CSS:
<style>
body {
background-color: lightblue;
}
- Internal CSS is useful for quick changes but is not ideal for large projects.
Fonts in CSS
Fonts in CSS control the appearance of text, including its size, weight, spacing, and style.
1. Setting Font Family
The font-family property specifies the font of the text.
p {
font-family: Arial, sans-serif;
}
- Defines the font style with fallback options.
2. Using Google Fonts
Google Fonts allow you to use web fonts in your design.
@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
body {
font-family: 'Roboto', sans-serif;
}
- Uses custom web fonts from Google.
3. Setting Font Weight
The font-weight property adjusts the thickness of the text.
h1 {
font-weight: bold;
}
4. Changing Font Style
The font-style property applies italic styling to text.
span {
font-style: italic;
}
5. Setting Letter Spacing
The letter-spacing property increases or decreases spacing between characters.
h2 {
letter-spacing: 3px;
}
- Increases space between characters by 3px.
6. Adjusting Line Height
The line-height property controls the height between lines of text.
p {
line-height: 1.5;
}
- Sets line height to 1.5 times the font size.
7. Text Transformation
The text-transform property changes capitalization style.
h3 {
text-transform: uppercase;
}
- Converts all text to uppercase.
8. Text Decoration
The text-decoration property adds underlines, overlines, or strikethroughs to text.
a {
text-decoration: underline;
}
- Underlines links or text elements.
9. Applying Multiple Font Properties
You can apply multiple font properties in a single declaration.
p {
font: italic bold 20px Arial, sans-serif;
}
- Combines style, weight, size, and font family.
10. Responsive Font Sizes
The font-size can be defined in relative units for responsiveness.
h1 {
font-size: 5vw;
}
- Adjusts font size dynamically based on viewport width.
11. Font Variant
The font-variant property is used for small caps styling.
p {
font-variant: small-caps;
}
- Displays lowercase letters as small capitals.
12. Font Smoothing
The -webkit-font-smoothing property improves text rendering on webkit browsers.
body {
-webkit-font-smoothing: antialiased;
}
- Enhances text clarity on supported browsers.
13. Custom Font Loading
The @font-face rule allows loading of custom fonts.
@font-face {
font-family: 'MyCustomFont';
src: url('myfont.woff2') format('woff2');
}
- Loads a custom font from an external file.
14. Applying Different Fonts to Elements
Different font families can be applied to specific elements.
h1 {
font-family: 'Times New Roman', serif;
}
h2 {
font-family: 'Courier New', monospace;
}
- Different font styles for different elements.
15. Key Takeaways
- font-family defines text appearance.
- font-size controls text size.
- font-weight makes text bold or light.
- text-transform modifies capitalization.
- letter-spacing and line-height adjust text spacing.
- @font-face allows custom fonts.
Borders in CSS
Borders in CSS define the outline of elements, allowing for customization of width, style, and color.
1. Basic Border
The border property defines a border around an element.
div {
border: 2px solid black;
}
- Applies a solid black border with a thickness of 2px.
2. Different Border Styles
CSS provides various border styles.
div {
border-style: dotted;
}
div {
border-style: dashed;
}
div {
border-style: double;
}
- Applies a double-line border.
3. Border Width
The border-width property adjusts the thickness of a border.
div {
border-width: 5px;
}
- Sets the border width to 5px.
4. Border Color
The border-color property sets the color of the border.
div {
border-color: blue;
}
- Changes the border color to blue.
5. Individual Border Sides
Borders can be applied to specific sides.
div {
border-top: 3px solid red;
}
- Applies a red border only to the top.
6. Rounded Borders
The border-radius property rounds the corners of an element.
div {
border-radius: 10px;
}
- Creates rounded corners with a 10px radius.
7. Border Shorthand
All border properties can be combined into one shorthand.
div {
border: 3px dashed green;
}
- Applies a 3px dashed green border.
8. Border Image
The border-image property allows an image to be used as a border.
div {
border: 10px solid;
border-image: url('border.png') 30 round;
}
- Uses an image as the border.
9. Border Collapse (For Tables)
The border-collapse property controls whether table borders collapse into a single border or remain separate.
table {
border-collapse: collapse;
}
- Collapses table borders into one.
10. Key Takeaways
- border sets the width, style, and color of an element’s border.
- border-width controls the thickness.
- border-style defines how the border appears (solid, dashed, dotted, etc.).
- border-color sets the color.
- border-radius rounds corners.
- border-image allows an image to be used as a border.
Background in CSS
Background properties in CSS allow you to set colors, images, gradients, and patterns behind elements.
1. Setting Background Color
The background-color property sets the background color of an element.
div {
background-color: lightblue;
}
- Applies a light blue background color to the div.
2. Using Background Images
The background-image property sets an image as the background.
div {
background-image: url('background.jpg');
background-size: cover;
}
- Sets a background image that covers the entire div.
3. Background Repeat
The background-repeat property controls how a background image is repeated.
div {
background-image: url('pattern.png');
background-repeat: no-repeat;
}
- Prevents the background image from repeating.
4. Background Position
The background-position property specifies the starting position of a background image.
div {
background-image: url('image.png');
background-position: center center;
}
- Centers the background image within the div.
5. Background Attachment
The background-attachment property controls whether a background image scrolls with the page or stays fixed.
div {
background-image: url('bg.jpg');
background-attachment: fixed;
}
- Keeps the background fixed while scrolling.
6. Background Size
The background-size property defines how a background image fits inside an element.
div {
background-image: url('image.jpg');
background-size: contain;
}
- Ensures the entire image is visible within the element.
7. Background Gradient
The background property can be used to create gradients.
div {
background: linear-gradient(to right, red, yellow);
}
- Creates a gradient from red to yellow.
8. Multiple Backgrounds
CSS allows multiple background images to be layered.
div {
background: url('top.png') top left no-repeat, url('bottom.png') bottom right no-repeat;
}
- Applies two different background images at specified positions.
9. Background Clip
The background-clip property specifies how far the background extends.
div {
background: lightblue;
background-clip: padding-box;
}
- Ensures the background only extends up to the padding.
10. Background Shorthand
The background property allows multiple background properties to be set in one line.
div {
background: url('image.jpg') no-repeat center/cover fixed;
}
- Defines a background image with no-repeat, center alignment, cover fit, and fixed positioning.
11. Key Takeaways
- background-color sets solid background colors.
- background-image sets images as backgrounds.
- background-size controls how images fit within an element.
- background-attachment allows fixed or scrolling backgrounds.
- background-clip determines where the background applies.
- background shorthand simplifies multiple background properties.
Margins in CSS
Margins in CSS create space around elements, separating them from other elements on the page.
1. Setting Margin
The margin property controls the space around an element.
div {
margin: 20px;
}
- Sets a 20px margin on all sides of the div.
2. Individual Margins
Margins can be set separately for each side.
div {
margin-top: 10px;
margin-right: 15px;
margin-bottom: 20px;
margin-left: 25px;
}
- Defines different margins for each side of the element.
3. Auto Margin for Centering
The margin: auto is commonly used to center block elements.
div {
width: 50%;
margin: 0 auto;
}
- Centers the div horizontally within its container.
4. Percentage-Based Margins
Margins can be defined in percentages relative to the parent element.
div {
margin: 10%;
}
- Sets the margin to 10% of the parent container’s width.
5. Margin Collapsing
When two vertical margins meet, they collapse to the larger margin.
div {
margin-top: 30px;
margin-bottom: 20px;
}
- The total margin will be 30px instead of 50px due to margin collapsing.
6. Negative Margins
Negative values can be used to pull elements closer together.
div {
margin-top: -10px;
}
- Moves the element 10px upward.
7. Margin Shorthand
The margin shorthand can be used to define all sides at once.
div {
margin: 10px 15px 20px 25px;
}
- Sets margins in the order: top, right, bottom, left.
8. Margin for Inline Elements
Margins behave differently on inline elements compared to block elements.
span {
margin: 10px;
}
- Inline elements only respect horizontal margins.
9. Key Takeaways
- margin controls space around an element.
- margin: auto is used for centering block elements.
- Vertical margins collapse when they meet.
- Negative margins can pull elements closer together.
- Margin shorthand allows setting all sides in one line.
Float in CSS
The float property is used to position elements to the left or right, allowing text or inline elements to wrap around them.
1. Basic Float
The float property allows an element to be positioned on one side.
img {
float: right;
}
- Moves the image to the right side, allowing text to flow around it.
2. Floating Left
Elements can also be floated to the left.
div {
float: left;
}
- Positions the element to the left, with text wrapping around it.
3. Floating Multiple Elements
Floated elements can be placed side by side.
.box {
width: 30%;
float: left;
}
- Creates a layout where three boxes sit next to each other.
4. Clearing Floats
The clear property is used to prevent floating elements from affecting other elements.
div {
clear: both;
}
- Ensures that no floated elements appear beside this element.
5. Float Within a Container
Floated elements inside a container may cause issues; use overflow: hidden; to fix this.
.container {
overflow: hidden;
}
- Prevents the parent container from collapsing due to floating children.
6. Floats and Inline Elements
Floating inline elements helps structure content.
span {
float: left;
}
- Floats inline elements, causing them to wrap.
7. Float Shorthand
Float values include left, right, and none.
div {
float: none;
}
- Removes floating behavior from an element.
8. Key Takeaways
- float positions elements left or right.
- clear ensures that no floated elements interfere with others.
- Floats are commonly used for layouts but require clearing techniques.
- Using overflow: hidden; prevents parent elements from collapsing.
Position in CSS
The position property in CSS determines how an element is positioned in the document.
1. Static Positioning
The default positioning method.
div {
position: static;
}
- Elements are positioned according to the normal document flow.
2. Relative Positioning
The element is positioned relative to its normal position.
div {
position: relative;
top: 10px;
left: 20px;
}
- The div moves 10px down and 20px right from its original position.
3. Absolute Positioning
The element is positioned relative to the nearest positioned ancestor.
div {
position: absolute;
top: 50px;
left: 100px;
}
- If no ancestor is positioned, it is placed relative to the document.
4. Fixed Positioning
The element is positioned relative to the viewport.
div {
position: fixed;
top: 0;
right: 0;
}
- Remains fixed in place even when scrolling.
5. Sticky Positioning
The element toggles between relative and fixed based on scrolling.
div {
position: sticky;
top: 20px;
}
- Sticks 20px from the top when scrolling past it.
6. Z-Index
The z-index property controls stacking order.
div {
position: absolute;
z-index: 10;
}
- Elements with a higher z-index appear in front.
7. Key Takeaways
- static is the default positioning.
- relative moves the element without affecting other elements.
- absolute positions an element relative to its ancestor.
- fixed keeps an element fixed to the viewport.
- sticky toggles between relative and fixed.
- z-index controls element stacking.
Shadows in CSS
CSS provides properties to add shadows to elements and text, enhancing visual appeal.
1. Box Shadow
The box-shadow property applies a shadow to an element.
div {
box-shadow: 5px 5px 10px gray;
}
- Creates a gray shadow 5px right, 5px down, with 10px blur.
2. Multiple Box Shadows
Multiple shadows can be added by separating values with commas.
div {
box-shadow: 3px 3px 5px red, -3px -3px 5px blue;
}
- Adds a red shadow to the bottom right and a blue shadow to the top left.
3. Inset Box Shadow
The inset keyword creates an inner shadow.
div {
box-shadow: inset 5px 5px 10px rgba(0,0,0,0.5);
}
- Applies an inner black shadow with 50% opacity.
4. Text Shadow
The text-shadow property applies shadows to text.
h1 {
text-shadow: 2px 2px 5px black;
}
- Adds a black shadow to text with a slight blur.
5. Multiple Text Shadows
Like box shadows, multiple text shadows can be applied.
h1 {
text-shadow: 2px 2px 4px red, -2px -2px 4px blue;
}
- Creates a red shadow at the bottom right and a blue shadow at the top left.
6. Key Takeaways
- box-shadow applies shadows to elements.
- text-shadow applies shadows to text.
- Shadows can be layered with multiple values.
- inset creates an inner shadow effect.
- Blur radius controls how soft or sharp the shadow appears.
Transform in CSS
The transform property allows you to apply 2D and 3D transformations to elements.
1. Translate (Move Elements)
The translate() function moves an element along the X and Y axes.
div {
transform: translate(50px, 20px);
}
- Moves the element 50px to the right and 20px down.
2. Rotate Elements
The rotate() function rotates an element.
div {
transform: rotate(45deg);
}
- Rotates the element 45 degrees clockwise.
3. Scale Elements
The scale() function resizes an element.
div {
transform: scale(1.5, 1.5);
}
- Increases the element’s width and height by 1.5 times.
4. Skew Elements
The skew() function skews an element.
div {
transform: skew(20deg, 10deg);
}
- Tilts the element by 20 degrees along the X-axis and 10 degrees along the Y-axis.
5. Combining Multiple Transforms
Multiple transforms can be applied together.
div {
transform: rotate(30deg) scale(1.2) translate(50px, 0);
}
- Rotates the element, scales it, and moves it 50px to the right.
6. Transform Origin
The transform-origin property sets the point around which transformations occur.
div {
transform-origin: top left;
}
- Sets the transformation point to the top-left corner.
7. 3D Transformations
The perspective() function adds depth to 3D transformations.
div {
transform: perspective(500px) rotateY(45deg);
}
- Rotates the element 45 degrees along the Y-axis with a 500px perspective.
8. Key Takeaways
- translate() moves elements.
- rotate() rotates elements.
- scale() resizes elements.
- skew() skews elements along axes.
- Multiple transforms can be combined.
- 3D transformations require perspective.
Animations in CSS
CSS animations allow elements to transition between different styles smoothly over a defined duration.
1. Basic Animation
The @keyframes rule defines an animation.
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
div {
animation: fadeIn 2s;
}
- Fades in the element over 2 seconds.
2. Animating Position
Elements can move smoothly using animations.
@keyframes moveRight {
0% {
transform: translateX(0px);
}
100% {
transform: translateX(200px);
}
}
div {
animation: moveRight 3s linear;
}
- Moves the element 200px to the right over 3 seconds.
3. Looping Animations
The infinite keyword makes animations repeat endlessly.
div {
animation: moveRight 3s linear infinite;
}
- Continuously moves the element to the right.
4. Delay in Animation
The animation-delay property delays the animation start.
div {
animation: fadeIn 2s;
animation-delay: 1s;
}
- Waits 1 second before starting the fade-in effect.
5. Animation Iteration Count
Defines how many times the animation should repeat.
div {
animation: fadeIn 2s 3;
}
- The animation runs 3 times before stopping.
6. Changing Animation Timing
The animation-timing-function controls the animation speed curve.
div {
animation: fadeIn 2s ease-in-out;
}
- Starts slow, speeds up, then slows down.
7. Combining Multiple Animations
Multiple animations can be applied to an element.
div {
animation: fadeIn 2s, moveRight 3s;
}
- Applies both the fade-in and move animations.
8. Animation Fill Mode
The animation-fill-mode property determines the final state of an animated element.
div {
animation: fadeIn 2s forwards;
}
- The element remains visible after animation ends.
9. Key Takeaways
- @keyframes defines animations.
- animation applies animations to elements.
- animation-duration sets how long the animation lasts.
- animation-delay delays the start.
- animation-iteration-count controls repetition.
- Multiple animations can be combined.
Blog
Trying My Best in cybersecurity, tutorials, and more!