In order for the CSS page to control the appearance of HTML pages they have to be linked. This is done with an HTML element written in the opening and closing tags of the head element.
Sets the color of the background of the element. Background colors use a hexadecimal number, or you can use a set of standard color names, like red or blue.
To determine the hex codes for colors you can look them up in a program such as Photoshop or Illustrator. You can also use an online tool like this one.
Sets the background as an image. The image will repeat unless specifically noted not to. The image is found with a relative link. If the image is in a folder, the link in the CSS value should include that folder.
By default, background images repeat. You can edit this with the background-repeat property.
If you always want the background image to be large enough to fill the space and respond to the browser size, use the background-size property.
Some folks don’t have the font you want to use on their system, so in most cases you use the font-family property to set multiple font choices listing in order of preference.
Sets the size of type. You can use different units of measurement, but pixels are most widely used.
Sets the weight of the font from light to bold. You can define the weight with words:"normal", "bold", "lighter", etc. or with a number: "100", "200".."700".
Sets the style of a font to bold or italics.
Text decoration can put an underline, overline, or strike through on your text. This one is particularly useful when you want to remove an underline. To remove an underline, use "none" as the value.
Sets the color of type. Web colors use a hexadecimal number, or you can use a set of standard color names, like red or blue.
To determine the hex codes for colors you can look them up in a program such as Photoshop or Illustrator. You can also use an online tool like this one.
Allows you to set the type to all caps.
Specifies the horizontal alignment of text. DO NOT CENTER YOUR TEXT unless you . Are you just trying to balance the page? How else can you solve the problem besides centering the text?
Adjusts the line height of text. You can define it with a number or percentage.
Sets the characters used in a list (bullet, square, none). Handy for removing bullets from elements.
Define the width of an element (such as an image). You can also set a max-width or a min-width. These are great for a responsive websites (you need the element to grow or shrink based on the device size).
Define the height of an element. USE THIS WITH CAUTION. Frequently defining the height of an element will break the design of your site. How else can you solve the problem?
Sets the box type of an element. Elements either act like a box (block) and stack on each other, or act like water and flow around each other (inline). This is handy for getting block elements like list elements to display side by side.
If you think of elements as little boxes the margin is the space pushing out from the edge of the box to other elements. The margin can be set on individual sides (margin-right, margin- bottom, etc.) or all of the sides at the same time. To set the all of the sides, set the top, right, bottom, left in that order
If you think of elements as little boxes the padding is the space pushing inward from the edge of the box into the content. The padding can be set on individual sides (padding-right, padding- bottom, etc.) or all of the sides at the same time. To set the all of the sides, set the top, right, bottom, left in that order.
Set the color, size and style of border around an element. You can set individual sides (border-right, border-left) or all of the sides at the same time. To set the all of the sides set the size, style and color in that order
To rotate elements, use the transform property with the rotate value. See the syntax is the example below.
Round corners can be created with the "border-radius". The value can be set in percentage or pixels.
Round corners can applied to each individual corner by setting 4 values.
Circles can be created by setting the value of "border-radius" to 50%. Keep in mind your object must be square in order for your object to be a circle and not an oval.
Drop shadow can be added to text or boxes with a few lines of CSS. The value of drop shadow can define the size, spread, and color of the shadow.
box-shadow: h-offset v-offset blur spread color
The most effective way to create your shadow with code is to use a Shadow Generator like this one.
To center content within the browser, you need to define the width of the content and then set the left and right margin to "auto".
Images are tricky to center because by default they are inline objects, meaning they secretly take up the full width of the section, despite how large or small the image is. To center the image, make sure to change the display to "block".
Links use pseudo-classes to demonstrate interactions. These include hover, visited, and active.
These pseudo-classes are created by using a colon after the selector name.
Animation is a strategic component in web design used to indicate action, influence user behavior, and call attention. Using animation as hover states is both fun and effective... and fairly easy!
