DEV Community

Cover image for Day 3 of Coding Challenge! First CSS! Finally Some Color!
nerdeye
nerdeye

Posted on

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

Image of Docusign

Bring your solution into Docusign. Reach over 1.6M customers.

Docusign is now extensible. Overcome challenges with disconnected products and inaccessible data by bringing your solutions into Docusign and publishing to 1.6M customers in the App Center.

Learn more

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs