CSS Introduction
CSS (Cascading Style Sheets) is a language designed to simplify the process of making web pages presentable.
- It allows you to apply styles to HTML documents by prescribing colors, fonts, spacing, and positioning.
- The main advantages are separation of content (in HTML) and styling (in CSS) and the same CSS rules can be used across all pages and not have to be rewritten.
- HTML uses tags and CSS uses rule sets.
- CSS styles are applied to the HTML element using selectors.
Why CSS?
- Saves Time: Write CSS once and reuse it across multiple HTML pages.
- Easy Maintenance: Change the style globally with a single modification.
- Search Engine Friendly: Clean coding technique that improves readability for search engines.
- Superior Styles: Offers a wider array of attributes compared to HTML.
- Offline Browsing: CSS can store web applications locally using offline cache, allowing offline viewing.
CSS Syntax
CSS consists of style rules that are interpreted by the browser and applied to the corresponding elements. A style rule set includes a selector and a declaration block.
- Selector: Targets specific HTML elements to apply styles.
- Declaration: Combination of a property and its corresponding value.
// HTML Element
<h1>GeeksforGeeks</h2>
// CSS Style
h1 { color: blue; font-size: 12px; }
Where -
Selector - h1
Declaration - { color: blue; font-size: 12px; }
- The selector points to the HTML element that you want to style.
- The declaration block contains one or more declarations separated by semicolons.
- Each declaration includes a CSS property name and a value, separated by a colon.
Example
p {
color: blue;
text-align: center;
}
CSS declaration always ends with a semicolon, and declaration blocks are surrounded by curly braces. In this example, all paragraph element (<p> tag) will be centre-aligned, with a blue text color.
Ways to Apply CSS
1. Inline CSS: Directly within the HTML element using the style attribute.
<html>
<head>
</head>
<body>
<p style="color: red;">This is inline CSS.</p>
</body>
</html>
2. Internal CSS: Within a <style> tag in the <head> section.
<html>
<head>
<style>
p {
color: red;
}
</style>
</head>
<body>
<p>Welcome to the world of GFG</p>
</body>
</html>
3. External CSS: The external CSS is the CSS linked to an HTML file using the <link> tag.
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<p>Hello GFG</p>
</body>
</html>
/* styles.css */
p {
font-family: sans-serif;
font-size: xx-large;
font-weight: 900;
color: green;
}
CSS Features and Use Cases
1. Changing Text Color
Changes the text color of all <p> elements to green.
<html>
<head>
<style>
p {
color: green;
}
</style>
</head>
<body>
<p>This text is green.</p>
</body>
</html>
2. Cascading in CSS
CSS resolves conflicts by prioritizing rules based on specificity and order. Shows how CSS applies rules based on specificity.
<html>
<head>
<style>
* {
color: black;
}
p {
color: blue;
}
#special {
color: orange;
}
</style>
</head>
<body>
<p>This text is blue.</p>
<p id="special">This text is orange.</p>
</body>
</html>
3. Background Color
Sets the background color of a <div> to chocolate.
<html>
<head>
<style>
div {
background-color: chocolate;
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div>Hello GFG</div>
</body>
</html>
4. Centering Text
Centers text horizontally within a container.
<html>
<head>
<style>
.center-text {
text-align: center;
}
</style>
</head>
<body>
<div class="center-text">Hello, World!</div>
</body>
</html>
5. Adding Padding
Adds padding around the content inside a <div>.
<html>
<head>
<style>
div {
padding: 20px;
border: 1px solid black;
}
</style>
</head>
<body>
<div>Hello with padding</div>
</body>
</html>
6. Hover Effects
Changes button color on hover for interactive effects.
<html>
<head>
<style>
button {
background-color: greenyellow;
color: white;
padding: 10px 20px;
border: none;
border-radius: 5px;
transition: background-color 0.3s ease;
}
button:hover {
background-color: blue;
}
</style>
</head>
<body>
<button>Hover me</button>
</body>
</html>
7. Font Weight
Makes text bold using the font-weight property.
<html>
<head>
<style>
p {
font-weight: bold;
}
</style>
</head>
<body>
<p>This is bold text.</p>
</body>
</html>
8. Flexbox for Centering Items
Centers an item within a container using Flexbox.
<html>
<head>
<style>
body {
margin: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background: #f4f4f4;
}
.container {
display: flex;
justify-content: center;
align-items: center;
width: 300px;
height: 200px;
background: #4caf50;
color: white;
}
</style>
</head>
<body>
<div class="container">Centered</div>
</body>
</html>
9. Font Size
Sets the font size of text to 24 pixels.
<html>
<head>
<style>
p {
font-size: 24px;
}
</style>
</head>
<body>
<p>Large text</p>
</body>
</html>
Key Advantages of CSS
- Simplifies web design and maintenance.
- Enhances website performance and user experience.
- Supports responsive and adaptive designs for all devices.
CSS Introduction – FAQs
What is CSS?
CSS (Cascading Style Sheets) is a language for styling HTML or XML documents, controlling layout, colors, fonts, and overall appearance to enhance user experience.
Why is CSS important?
CSS separates content from design, improves accessibility, enhances user experience, and provides responsive designs for different devices and screen sizes.
How do you add CSS to a web page?
- Inline CSS: Using style attribute within HTML.
- Internal CSS: Using <style> block in <head>.
- External CSS: Linking a CSS file with <link> tag.
What is the syntax of CSS?
CSS syntax: selector { property: value; }. Selectors target elements; properties define style attributes; values specify styling details.
What are CSS selectors?
CSS selectors target elements for styling. Common types: element, class, ID, and attribute selectors.
What are CSS properties?
CSS properties define styles like color, font-size, margin, and padding. Example: p { color: blue; }.
