- Animation
- Background image
- Border Color
- Border radius
- Border width
- Borders
- Box model
- Box shadow
- Class attribute
- Clip path
- Color
- Comment
- Display property
- First-child selector
- Flexbox
- Font family
- Font size
- Font style
- Font weight
- Gradient
- Grid layout
- Height
- Linking a style sheet
- Margin
- Media query
- N-th-child selector
- Overflow property
- Padding
- Pixels
- Position property
- Pseudo-classes
- Pseudo-elements
- Rounding an image
- Selectors
- Specificity
- Text align
- Transition property
- Units
- Variable
- Width
- Z-index
CSS
What is CSS: Syntax, Usage, and Examples
CSS (Cascading Style Sheets) lets you control the look and feel of a website. It styles HTML elements by defining colors, fonts, layouts, and animations. Without CSS, web pages would be plain and unstyled.
How to Use CSS
You can apply CSS in three ways: inline, internal, and external. Each method affects how you manage styles across your project.
1. Inline CSS (Directly in an HTML Element)
You apply inline CSS inside an HTML tag using the style attribute.
<p style="color: blue; font-size: 18px;">This text is styled with inline CSS.</p
Inline CSS works well for quick changes, but it’s not practical for large projects because it makes styles hard to manage.
2. Internal CSS (Inside an HTML File)
You define internal CSS inside a <style> block within the <head> section of an HTML file.
<head>
<style>
p {
color: green;
font-size: 20px;
}
</style>
</head>
<body>
<p>This paragraph is styled using internal CSS.</p>
</body>
Internal CSS is helpful when styling a single page, but it’s not ideal for multi-page websites since you’d have to duplicate styles in each file.
3. External CSS (In a Separate File)
The best way to manage CSS for a website is to store styles in an external file. This keeps HTML clean and makes styling consistent across multiple pages.
/* styles.css */
h1 {
color: red;
font-family: Arial, sans-serif;
}
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Styled using an external CSS file.</h1>
</body>
External CSS makes your site easier to maintain and improves performance by allowing browsers to cache stylesheets.
When to Use CSS
You should use CSS whenever you want to enhance the design and usability of a website.
1. Consistent Styling Across Pages
Instead of repeating styles in each HTML file, you can use CSS to keep elements like headers, footers, and buttons consistent.
2. Making Websites Responsive
With CSS, you can create layouts that adapt to different screen sizes. Media queries let you define styles for desktops, tablets, and mobile devices.
@media (max-width: 600px) {
body {
background-color: lightgray;
}
}
3. Adding Animations and Effects
CSS can animate elements without JavaScript.
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
button {
animation: fadeIn 2s ease-in-out;
}
4. Customizing Forms and Buttons
You can make forms and buttons match your website’s style.
input {
border: 2px solid #333;
padding: 8px;
border-radius: 5px;
}
button {
background-color: blue;
color: white;
padding: 10px 20px;
}
5. Improving Readability
CSS lets you fine-tune typography, making content easier to read.
p {
font-size: 16px;
line-height: 1.6;
}
Examples of CSS
Changing Text Color and Size
h1 {
color: purple;
font-size: 30px;
}
Creating a Flexbox Layout
Use display: flex to create a flexible layout, allowing elements to align dynamically within the container.
.container {
display: flex;
justify-content: space-between;
}
Adding a Hover Effect to Buttons
Improve user interaction by changing the button's background color when hovered over.
button:hover {
background-color: darkblue;
}
Learn More About CSS
What is CSS Used For?
CSS makes websites look polished and professional. You can use it to:
- Define colors, fonts, and spacing.
- Create responsive layouts.
- Add animations and transitions.
- Customize user interfaces.
What is the HTML Tag?
An HTML tag is a keyword enclosed in angle brackets (< >) that defines elements on a page. CSS uses these tags as selectors to apply styles.
Example:
h1 {
color: red;
}
What is CSS Code?
CSS code consists of rules that tell the browser how to display HTML elements. Each rule has:
- Selectors (which elements to style).
- Properties (what to change).
- Values (how to style it).
Example:
p {
color: blue;
font-size: 16px;
}
What is a CSS File?
A CSS file (.css) contains style rules for multiple web pages. You link it to HTML files to keep styles organized.
Example of linking a CSS file:
<link rel="stylesheet" href="styles.css">
What is CSS Profile?
A CSS profile refers to a specialized set of styles for different media types, like print or mobile.
Example of print-specific CSS:
@media print {
body {
font-size: 12pt;
}
}
What is CSS Abstraction?
CSS abstraction helps you write cleaner, reusable styles. You can use CSS Variables, SASS, or BEM (Block Element Modifier) to structure styles better.
Example using CSS Variables:
:root {
--primary-color: blue;
}
h1 {
color: var(--primary-color);
}
What is a CSS Snippet?
A CSS snippet is a small, reusable piece of code that simplifies styling tasks.
Example of a responsive navigation bar:
.navbar {
display: flex;
justify-content: space-between;
}
What Does Embedded CSS Do?
Embedded CSS (internal CSS) applies styles within an HTML document using the <style> tag.
Example:
<style>
p {
color: red;
}
</style>
What is the Inline Method for CSS Styles?
Inline CSS applies styles directly inside an HTML tag.
Example:
<p style="color: red;">This paragraph is styled with inline CSS.</p>
What is Custom CSS?
Custom CSS lets you override default styles and create personalized designs.
Example of overriding styles:
body {
background-color: black;
color: white;
}
What is CSS in Web Design?
CSS is essential in web design for structuring layouts, animations, and responsiveness. Frameworks like Bootstrap and Tailwind CSS simplify CSS styling.
Example using Bootstrap:
<button class="btn btn-primary">Click Me</button>
Best Practices for Writing CSS
- Use external stylesheets for maintainability.
- Avoid inline styles unless necessary.
- Use classes instead of styling individual elements.
- Organize styles with comments.
- Test responsiveness with media queries.
CSS transforms a plain HTML document into an interactive, visually appealing website. Whether you’re applying simple styles or building a complex layout, mastering CSS helps you create a seamless and engaging user experience.
Sign up or download Mimo from the App Store or Google Play to enhance your programming skills and prepare for a career in tech.