- This topic is empty.
-
Topic
-
CSS (Cascading Style Sheets) is a stylesheet language used to describe the presentation of a document written in HTML or XML (including XML dialects like SVG or XHTML). CSS code is used to control the layout, color, font, spacing, and other visual aspects of web pages.
CSS Basics
1. CSS Syntax
CSS code is composed of selectors and declarations.
- Selector: Targets the HTML element(s) you want to style.
- Declaration: Defines the styles you want to apply. Each declaration includes a property and a value, separated by a colon and ended with a semicolon.
Syntax Example:
cssselector {
property: value;
}
Example:
cssh1 {
color: blue; /* Sets the text color of h1 elements to blue*/
font-size: 24px; /* Sets the font size to 24 pixels */
}
2. Adding CSS to HTML
CSS can be added to an HTML document in three main ways:
- Inline CSS: Directly within an HTML element using the
style
attribute. - Internal CSS: Within a
<style>
tag in the<head>
section of the HTML document. - External CSS: In a separate
.css
file linked to the HTML document.
Inline CSS Example:
html<p style="color: red; font-size: 18px;">This is a red text.</p>
Internal CSS Example:
html
<html>
<head>
<style>
p {
color: green;
font-size: 20px;
}
</style>
</head>
<body>
<p>This is a green text.</p>
</body>
</html>
External CSS Example:
CSS File (
styles.css
):cssbody {
background-color: #f0f0f0;
font-family: Arial, sans-serif;
}
h1 {
color: #333;
}
HTML File:
html
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Hello, World!</h1>
</body>
</html>
CSS Selectors
Selectors determine which HTML elements the CSS rules will apply to. Here are some common selectors:
- Element Selector: Targets all instances of a specific HTML element.
css
p {
color: blue;
}
- Class Selector: Targets elements with a specific class attribute. Use a dot (
.
) before the class name.css.highlight {
background-color: yellow;
}
- ID Selector: Targets a single element with a specific ID attribute. Use a hash (
#
) before the ID name.css#header {
font-size: 24px;
}
- Attribute Selector: Targets elements with a specific attribute.
css
[type="text"] {
border: 1px solid gray;
}
- Pseudo-class Selector: Targets elements in a specific state, such as
:hover
for when a user hovers over an element.cssa:hover {
color: red;
}
- Pseudo-element Selector: Targets a specific part of an element, such as
::first-line
or::before
.cssp::first-line {
font-weight: bold;
}
CSS Properties
CSS properties define the styles to be applied. Some common properties include:
- Color and Background
css
color: #333; /* Text color */
background-color: #f0f0f0;/* Background color */
background-image: url('image.jpg');/* Background image */
- Font
css
font-family: Arial, sans-serif; /* Font family */
font-size: 16px;/* Font size */
font-weight: bold; /* Font weight */
- Text
css
text-align: center; /* Text alignment */
line-height: 1.5;/* Line height */
text-decoration: underline; /* Text decoration */
- Box Model
css
width: 100px; /* Width of the element */
height: 50px;/* Height of the element */
margin: 10px; /* Space outside the element*/
padding: 10px; /* Space inside the element */
border: 1px solid black;/* Border of the element */
- Positioning
css
position: absolute; /* Positioning method */
top: 10px;/* Distance from the top */
left: 20px; /* Distance from the left */
- Display and Visibility
css
display: block; /* Element display type */
display: none;/* Hide the element */
visibility: hidden;/* Hide the element but still occupy space */
Advanced CSS
- Flexbox: For flexible, one-dimensional layouts.
css
.container {
display: flex;
justify-content: space-between;
}
- Grid: For two-dimensional layouts.
css
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
- Media Queries: For responsive design.
css
@media (max-width: 600px) {
.container {
flex-direction: column;
}
}
- Animations and Transitions: For dynamic effects.
css
.box {
transition: background-color 0.3s ease;
}.box:hover {
background-color: blue;
}
Best Practices
- Keep Styles Organized: Use clear and consistent naming conventions and comments.
- Optimize Performance: Minimize CSS file size and use efficient selectors.
- Ensure Accessibility: Consider color contrast and readability for all users.
- Use Responsive Design: Apply media queries to make your design adaptable to different screen sizes.
- You must be logged in to reply to this topic.