+ 1
How to do css
11 Respuestas
+ 2
CSS is used to style HTML — colors, fonts, layout, spacing, and more.
Ways to Apply CSS:
Inline CSS – directly in HTML tags:
<p style="color: red;">Hello</p>
Internal CSS – inside <style> in HTML:
<head>
<style>
p { color: blue; font-size: 18px; }
</style>
</head>
External CSS – separate .css file linked in HTML:
<link rel="stylesheet" href="styles.css">
/* styles.css */
p {
color: green;
font-size: 20px;
}
Basic CSS Concepts:
Selectors: Target elements to style (p, h1, .class, #id)
Properties & Values: Define style (color: red; font-size: 16px;)
Box Model: Every element has content, padding, border, margin
Positioning: static, relative, absolute, fixed, sticky
Flexbox & Grid: For layout and alignment
Example:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: #f0f0f0;
font-family: Arial, sans-serif;
}
.highlight {
color: red;
font-weight: bold;
}
</style>
</head>
<body>
<p>Hello, this is normal text.</p>
<p class="highlight">This text is highlighted in red!</p>
</body>
</html>
Good Luck!
+ 2
https://www.freecodecamp.org/ has some amazing interactive courses for free.
+ 1
Entangle into the Web Development (HTML + CSS + JS) or Introduction To CSS (Only CSS) course in the learning section.
+ 1
https://www.sololearn.com/learn/courses/css-introduction
____________________________________________
CSS practice
https://mastery.games/build/zelda/
https://gridcritters.com/ 179$ cost
https://flexboxzombies.com/
https://flukeout.github.io/
https://www.tynker.com/parents/
http://www.flexboxdefense.com/
http://cssgridgarden.com
https://flexboxfroggy.com/
https://frontendmentor.io
+ 1
ibtihal imtiaz, by "Elipse button", do you mean an ellipse-shaped button or an ellipsis button (three-dot button)?
If it's the former, that can be done quite easily if you use the border-radius property with unequal horizontal and vertical dimensions.
However, if want an ellipsis or three-dot button, then that requires a bit more work.
Please let me know if you want that.
0
Thanks and how to do gradient
0
ibtihal imtiaz, you can create linear gradients in CSS quite easily following this syntax:-
background: linear-gradient(direction, colour1, colour2, ...);
For radial gradients, you can use this syntax:-
background: radial-gradient(shape size at position, colour1, colour2, ...);
Note that a linear gradient transitions colours along a straight line (horizontal, vertical, or at a specified angle) while a radial gradient radiates from a central point outward in a circular or elliptical shape.
You can visit these links for further information:
https://www.w3schools.com/css/css3_gradients.asp
https://www.w3schools.com/cssref/func_radial-gradient.php
https://css-tricks.com/a-complete-guide-to-css-gradients/
Additionally, this can be quite useful while coding: https://cssgradient.io/
0
ibtihal imtiaz, since you did not specify whether you want to create background gradients or text gradients, I take this opportunity to tell you that, to apply gradients to text, you may used the background-clip and text-fill-color declarations after you declare a background gradeint.
background-clip specifies extent of the background. Hence, when you set it to text like:-webkit-background-clip:text;
background is “clipped” to the shape of the text, which makes the gradient appear inside the text.
Then, declare-
-webkit-text-fill-color: transparent;
To make the gradient visible inside the text, the actual text colour must be transparent so that the forecolour does not block the gradient.
If is seems difficult, you can think of it this way: The text is a window & gradient is a colourful sheet behind the window.
-webkit-background-clip: text; makes the gradient show only through the shape of the letters.
-webkit-text-fill-color: transparent removes the “glass” (forecolour) so gradient is visible.
0
Thanks for everyone and I want Elispe button
0
I am in grade 6
My name is Ibtihal
And I am new in coding thanks for guiding me every one 🕐🕜♥️🫥🥰😀😃😄
0
We're happy to help, ibtihal imtiaz!
Keep coding, keep growing.
¿Tienes a menudo preguntas como esta?
Aprende gratis de forma más eficaz
En tendencia hoy
??
1 Votes
Hello guys,
1 Votes
Help me
1 Votes
Programming
0 Votes
how do they use javascript
0 Votes
Code coach isn't awarding xp
0 Votes