Logo

dev-resources.site

for different kinds of informations.

Day 3 of Coding Challenge! First CSS! Finally Some Color!

Published at
5/26/2021
Categories
css
webdev
beginners
colors
Author
nerdeye
Categories
4 categories in total
css
open
webdev
open
beginners
open
colors
open
Author
7 person written this
nerdeye
open
Day 3 of Coding Challenge! First CSS! Finally Some Color!

Look out world! This up-and-coming coder has added some spice to his web pages! All jokes aside, I am very excited to have been able to start learning how to style these pages. They aren't great but its a start. Thank you to Peter for sending me the Markdown format; hopefully I did it correctly but if not please let me know! Here's a breakdown of my notes:

Color: May be displayed and specified multiple ways

Name: Limited to the browser selection but colors can be used
through names (i.e. cyan)

RGB: Controls colors by adjusting the RGB color model (Red,
Green, and Blue. The color cyan can instead be written as
rgb(0,255,255)

Hexadcimal: Number systems based off the number 0-9 and A-
F(representing 10-15) Cyan would then be written as 00ffff or
in this case can be shortened to 0ff

Alt Text

Text:

Font-family: Gives the ability to select what font is seen. In
the case that the user's browser does not support that font
having a backup font and then the general font category gives
the user a similar experience to what you intended (i.e. font-
family: Arial, Helvetica, sans-serif
)

There are plenty of other ways to manipulate text including
text-align(orientation of the text), font-weight(boldness),
line-height(space between lines, standard number set at 1),
and lots more. Here's the MDN on the all the ways:
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Text

CSS Code:
Alt Text

Result:
Alt Text

colors Article's
30 articles in total
Favicon
Help Improve Shademaker!
Favicon
A Complete Guide to Color Shades: From Primary to Pastel
Favicon
Simplifying multiplatform Colors
Favicon
Three primary colors of LED display
Favicon
Free tool: Tailwind CSS Colors ✨
Favicon
Tailwind CSS Customization with UI Colors
Favicon
Optimizing Web Design through Advanced Techniques in CSS: Colours and Backgrounds
Favicon
What’s Your Go-To Method for Defining Colors in CSS?πŸ€”
Favicon
Compare Colors Palettes
Favicon
How to use light mode and dark mode colors web development
Favicon
Why You Should Use Descriptive Names for Colors in Your Palette or Theme
Favicon
Unhex - convert colors to RGB, HEX or HSL in bulk
Favicon
Color palete site recommendations
Favicon
How to use colors in designs
Favicon
What is Css?
Favicon
Random Hex Color (semi-golfed)
Favicon
The numeric colour palettes in modern web frameworks explained
Favicon
Day 3 of Coding Challenge! First CSS! Finally Some Color!
Favicon
Custom colors in React-Native
Favicon
Best resources for #developers
Favicon
Building a Color Scheme Toggle
Favicon
Choosing colors for websites
Favicon
Choosing Theme Colors
Favicon
A Short History of Interface Colors
Favicon
Most Powerful Palette Generator
Favicon
Welcome to ImageHive v2
Favicon
Random Hex Color Code Generator
Favicon
How do color pickers work? - HSL Panel
Favicon
Build a VSCode Theme
Favicon
GUIDE - Customizing your Windows Terminal with themes and different Shells

Featured ones: