CSS Tutorials for Beginners
1. Selectors:
Selectors target HTML elements to apply styles. Common types include element selectors (e.g., `p`, `h1`), class selectors (e.g., `.class-name`), and ID selectors (e.g., `#id-name`).
Example:
p {
color: blue;
}
.button {
background-color: green;
}
#header {
font-size: 24px;
}2. Properties and Values:
Properties define the style to be applied, and values determine the specific aspect of the style.
Example:
p {
font-family: Arial, sans-serif;
margin: 10px;
}3. Color and Background:
You can set text and background colors using `color` and `background-color` properties.
Example:
4. Box Model:
The box model defines an element's layout, including its content, padding, border, and margin.
Example:
.box {
width: 200px;
padding: 10px;
border: 1px solid #ccc;
margin: 20px;
}5. Typography:
Control font properties like `font-family`, `font-size`, `font-weight`, and `text-align` to enhance readability.
Example:
.article {
font-family: "Times New Roman", serif;
font-size: 16px;
font-weight: bold;
text-align: justify;
}6. Margin and Padding:
`margin` creates space outside an element, while `padding` creates space within an element.
Example:
.card {
margin: 10px;
padding: 20px;
}
7. Display and Positioning:
Set the `display` property to control how elements are rendered (e.g., `block`, `inline`, `flex`). Use `position` to control element positioning.
Example:
.sidebar {
display: inline-block;
}
.modal {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
8. Flexbox:
Flexbox is a powerful layout system for creating flexible and responsive designs.
Example:
.container {
display: flex;
justify-content: space-between;
align-items: center;
}9. Grid Layout:
CSS Grid allows you to create complex layouts with rows and columns.
Example:
.grid-container {
display: grid;
grid-template-columns: 1fr 2fr 1fr;
grid-gap: 10px;
}10. Float and Clear:
`float` is used to create text wrapping around an element. `clear` prevents elements from wrapping around floated elements.
Example:
.image {
float: left;
margin-right: 10px;
}
.clearfix::after {
content: "";
display: table;
clear: both;
}11. Transitions and Animations:
CSS allows you to create smooth transitions and animations using `transition` and `@keyframes`.
Example:
.button {
transition: background-color 0.3s ease;
}
@keyframes slide {
0% { transform: translateX(0); }
100% { transform: translateX(100px); }
}12. Pseudo-classes and Pseudo-elements:
Pseudo-classes (e.g., `:hover`, `:nth-child`) and pseudo-elements (e.g., `::before`, `::after`) target specific states or parts of an element.
Example:
.button:hover {
background-color: lightgreen;
}
.list-item::before {
content: "•";
margin-right: 5px;
}13. Media Queries:
Media queries enable responsive design by applying styles based on the device's screen size.
Example:
@media (max-width: 768px) {
.menu {
display: none;
}
}14. Transform and Transition:
Use `transform` to apply 2D or 3D transformations, and `transition` to create smooth transitions between states.
Example:
.box {
transform: rotate(45deg);
transition: transform 0.5s ease;
}15. Font Icons:
Use fonts to display icons instead of images. Popular libraries include Font Awesome and Material Icons.
Example:
.icon {
font-family: "Font Awesome";
content: "\f015"; /* Unicode for a specific icon */
}16. Overflow:
The `overflow` property controls how content overflows an element's box.
Example:
.overflow-container {
width: 200px;
height: 100px;
overflow: scroll;
}17. Box Shadow and Border Radius:
Create visual effects with `box-shadow` and rounded corners with `border-radius`.
Example:
.card {
box-shadow: 2px 2px 5px #888888;
border-radius: 10px;
}18. Gradient Backgrounds:
Apply gradient backgrounds using the `linear-gradient` function.
Example:
19. @media Rule:
The `@media` rule enables you to define styles for specific media types or conditions.
Example:
@media screen and (max-width: 600px) {
.sidebar {
display: none;
}
}20. Position: Sticky:
The `position: sticky` property combines elements of both `position: relative` and `position: fixed`, creating a sticky effect within a certain scroll range.
Example:
.navbar {
position: sticky;
top: 0;
background-color: white;
}
21. CSS Variables (Custom Properties):
Define custom properties (variables) to store and reuse values throughout your stylesheet.
Example:
:root {
--primary-color: #3498db;
}
.button {
background-color: var(--primary-color);
}
22. Combining Selectors:
Combine multiple selectors to apply styles to specific elements.
Example:
.button.primary {
background-color: #3498db;
}
ul li {
list-style-type: square;
}23. Z-index:
The `z-index` property controls the stacking order of elements.
Example:
.overlay {
position: absolute;
z-index: 100;
}24. CSS Variables (Custom Properties):
Define custom properties (variables) to store and reuse values throughout your stylesheet.
Example:
css
:root {
--primary-color: #3498db;
}
.button {
background-color: var(--primary-color);
}25. Combining Selectors:
Combine multiple selectors to apply styles to specific elements.
Example:
.button.primary {
background-color: #3498db;
}
ul li {
list-style-type: square;
}26. Z-index:
The `z-index` property controls the stacking order of elements.
Example:
.overlay {
position: absolute;
z-index: 100;
}27. Importing External Fonts:
Use the `@font-face` rule to import and use custom fonts in your stylesheet.
Example:
@font-face {
font-family: 'CustomFont';
src: url('custom-font.woff2') format('woff2'),
url('custom-font.woff') format('woff');
}
.body {
font-family: 'CustomFont', sans-serif;
}28. Selectors Combinators:
Combine selectors using combinators like descendant, child, and adjacent sibling.
Example:
.container p {
font-size: 18px;
}
ul > li {
font-weight: bold;
}
h2 + p {
margin-top: 10px;
}29. Grouping Selectors:
Group selectors to apply the same styles to multiple elements.
Example:
h1, h2, h3 {
color: #333;
}30. Inheritance:
CSS properties can be inherited from parent elements to their children.
Example:
.parent {
font-size: 16px;
color: blue;
}
.child {
/* Inherits font-size and color from parent */
}