Cascading Style Sheets (CSS) is a style language for describing the presentation of documents written in HTML or XML. It tells how the document should look as regards the layout of elements, text, images, and position itself; thus, it is the key to enabling developers to create beautiful, responsive, and user-friendly websites.
Importance of CSS
- Separation of Content and Design: CSS allows you to separate a website’s structure (HTML) from its presentation.
- Responsive Design: CSS enables websites to adapt seamlessly to different devices and screen sizes.
- Efficiency: With CSS, you can apply styles to multiple pages by linking a single stylesheet.
- Customizable Designs: CSS provides developers complete control over colours, layouts, animations, etc.
CSS Syntax
A CSS rule has two parts: the selector and the declaration block:
selector { property: value; }
Example:
h1 { color: blue; font-size: 24px; }
Explanation:
- Selector: Selects the HTML element to which the style is to be applied (in this case,
h1). - Property: Describes what will be styled (in this case,
color). - Value: Is how it will be styled (in this case,
blue).
Types of CSS
- Inline CSS
- Directly applied on each HTML element using the
styleattribute. - For example:
- Directly applied on each HTML element using the
<ol start="2"> <li><strong>Internal CSS</strong> <ul> <li>Inside a <code><style></code> tag in an HTML document under the <code><head></code> section.</li> <li>For example:</li> </ul> </li> </ol> <ol start="3"> <li><strong>External CSS</strong> <ul> <li>In another <code>.css</code> file that is linked to HTML.</li> <li>For example:</li> </ul> </li> </ol>
Inside styles.css:
body { background-color: lightgray; }
Common CSS Properties
| Property | Description | Example |
|---|---|---|
color |
Sets text color | color:blue; |
background-color |
Sets background color | background-color:yellow; |
font-size |
Sets the size of the text | font-size:16px; |
margin |
Defines area outside an element | margin:10px; |
padding |
Defines area inside an element | padding:15px; |
border |
Gives a border around an element | border:2px solid black; |
width |
Sets the width of an element | width:100%; |
height |
Sets the height of an element | height:200px; |
text-align |
Aligns text (left, right, center) | text-align:center; |
display |
Defines how an element is displayed | display:flex; |
Advanced CSS Concepts
- Box Model: The box model consists of
- Content: The actual content
- Padding: The space between content and border
- Border: It surrounds the padding
- Margin: The space outside the border
div { padding: 10px; border: 2px solid black; margin: 20px; }
- Flexbox: Used for setting the layout of a box by aligning its items either in a row or a column.
.container { display: flex; justify-content: center; align-items: center; }
- Grid Layout: A powerful layout system for creating complex designs.
.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
- Responsive Design with Media Queries: Make your website responsive using media queries:
@media (max-width: 768px) { body { background-color: lightblue; } }
- CSS Variables: Reusable values for properties.
:root { --primary-color: #ff6347; } body { color: var(--primary-color); }
CSS Animations and Transitions
- Transitions: Add smooth effects when properties change.
button { background-color: blue; transition: background-color 0.3s ease; } button:hover { background-color: green; }
- Animations: Make complex animations using keyframes.
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } div { animation: fadeIn 2s ease-in-out; }
CSS Frameworks
Frameworks help to ease the design process with their pre-styled components and layouts. Here is a basic introduction to popular CSS frameworks:
- Bootstrap: For responsive designs, mobile-first.
- Tailwind CSS: Utility-first CSS framework.
- Foundation: A responsive front-end framework.
Leave a Reply