CSS stands for Cascading Style Sheets. CSS is used to style your HTML. Everything from color to positioning can be modified with CSS. You can add borders, change margins and make drop down menus. To use CSS you must first link your HTML Page to it. After that name a tag you want to style and add {. Hit "enter" And use the elements below to style. Then hit enter and Close with }. One cool thing you can do with CSS is use a
class. Instead of a tag name put a "." followed by the name of the class you want. To use the class go to your HTML and in the tag you want to change add: Class="( name of class)". This allows you to style tags anyway you want regardless of what it is.
Name of Element
How, when and why to use it
Picture of Code
Picture of render (some don't render)
Color element
The Color element is used to color text. You can use multiple ways off getting the color. Use a default color name (Ex: Purple, Blue) or using HEX or RGB values. You can make any color but make sure the colors work well together.
Size element
The Size element is used to size text. You can change any text, to any size. Use pixel lengths or percentages to get the perfect size. Otherwise text would be default. Use it to highlight big topics or draw attention to certain things.
Background element
The Background element is used to do multiple things to it. The Example to the right is "Background-color". You can do others like "Background-img" and a lot more. This can be used to hightligt different sections off the page or just set sections. Use the color rules above for the background.
Margin element
The Margin element is used to create space around other elements. It is used to move text or picutures apart to create white space (which is very useful). You can margin all sides the same or each side individually. Note: Space will be double amount stated if both elemnts are being affected.
Border element
The Border element is used to put a border around the elemnt. You can change the width of the border, change if its solid, dashed, ect or change its color. You can change each individually. I have a basic example on the right. Use
W3schools to learn more about how to do each side. Note: Border must have a defined width to be styled.
Padding element
The Padding element is used to define space between it and its border. You can add padding to all sides or one or two. Using the padding element you can help define a section and add white space.
Font-weight element
Font-weight element thickens or lightens the text. You can use it using simple phrases(lighter, bolder, bold and normal) or use the hundreds between 100-900. Use it to emphasize text or use lighter on unimportant text.
Text decoration element
The Text decoration element adds lines under over or trough text. You can dot these lines and add color. Strike through is probably the most common one used as well as line under.
Font element
The Font Family element allows you change the font, for example, to times new roman. You can use others like "font-style" to add italics and much more. Use these to get the perfect font and text for your webpage. Just remember some fonts are better suited than others
Float element
The Float element is used to position text or pictures on the page. Floating it right makes it appear on te right. The lef tis the exact opposite. Its a pretty straight forward tag.
