Mastering CSS Styles for Adding Colors to Your Web Design
Learn how to create custom styles for HTML tags using CSS, including adding colors and defining styles for paragraphs, headings, and table cells. Explore predefined color options and discover how to specify colors using RGB and hex codes for more precise design control. Take away essential tips for successful styling with CSS!
Download Presentation
Please find below an Image/Link to download the presentation.
The content on the website is provided AS IS for your information and personal use only. It may not be sold, licensed, or shared on other websites without obtaining consent from the author. Download presentation by click this link. If you encounter any issues during the download, it is possible that the publisher has removed the file from their server.
E N D
Presentation Transcript
Colors Basic CSS Styles
Creating Styles: Creating Styles: Examples Examples: : p { background-color: purple; line-height: 150%; } You can create a style for any html tag How? Take the tag s name, then put { and } around the style (You ve seen this for paragraphs) For each line: The thing you re styling has a : after it The style you give it has a ; after it h2 { background-color: green; line-height: 250%; } td { background-color: orange; line-height: 90%; }
Colors Colors Let s start with adding some colors You can add color to any html tag E.g., background colors, font colors, border colors, shadow colors, etc. How? That s coming For now, let s look at the predefined colors you can use
List of predefined colors (you can use any of these names!): List of predefined colors (you can use any of these names!):
What if you want more colors? What if you want more colors? What, the 148 colors on the previous page weren t enough??? Okay, so, yes, you can be more precise with your color choices BRIEF overview of color* RGB: specify (up to 255) the amount of red, green, and blue Example: rgb(240,0,32); would be a reddish color with just a smidge of blue undertones Hex: more complicated: count from 0-9, then A-F 0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F use 2 of the above for red, 2 of the above for green, and 2 of the above for blue E.g., #FC0034; About the same color as the rgb color a bright reddish color with a hint of blue undertone # means it s a hex number *For more info on RGB and Hex, try the challenge!
TakeAways TakeAways: : Colors: You can make a style for any html tag name_of_tag { style definition goes here, between the squiggly brackets There are 148 predefined color names you can use in styling things } Will work with every browser Remember your : and your ; in the right places! If you want more, learn about hex and rgb colors
