.
VR
CSS Coding

← Mentorships



IMO the best website that explains the intricacies of coding is W3Schools (LINK), these are free tutorials describing each elements of the code.

Firstly in order for everyone to know the proper terms I'm going to post the proper syntax in CSS:



These are the definitions of cover and contain:

COVER

Scale the background image to be as large as possible so that the background area is completely covered by the background image. Some parts of the background image may not be in view within the background positioning area

CONTAIN

Scale the image to the largest size such that both its width and its height can fit inside the content area.

So the difference between them is that contain will fit the WHOLE image into the positioning area while cover will cut off some pieces. When you use contain you might see fragments of the solid background (if you set your background color to black you will see black stripes on the sides or top and bottom) and cover as the name suggests will fill the whole space.

All CSS Background Properties


background: Sets all the background properties in one declaration
background-attachment: Sets whether a background image is fixed or scrolls with the rest of the page
background-color: Sets the background color of an element
background-image: Sets the background image for an element
background-position: Sets the starting position of a background image
background-repeat: Sets how a background image will be repeated

When adding decorations and borders while trying to arrange everything in order please remember about the box structure and how it is organized.

This is called a box model



Explanation of the different parts:
Content - The content of the box, where text and images appear
Padding - Clears an area around the content. The padding is transparent
Border - A border that goes around the padding and content
Margin - Clears an area outside the border. The margin is transparent

Example
div {
width: 300px;
padding: 25px;
border: 25px solid navy;
margin: 25px;
}

Border-style values


none: Defines no border
dotted: Defines a dotted border
dashed: Defines a dashed border
solid: Defines a solid border
double: Defines two borders. The width of the two borders are the same as the border-width value
groove: Defines a 3D grooved border. The effect depends on the border-color value
ridge: Defines a 3D ridged border. The effect depends on the border-color value
inset: Defines a 3D inset border. The effect depends on the border-color value
outset: Defines a 3D outset border. The effect depends on the border-color value
Border - Individual sides

In CSS it is possible to specify different borders for different sides:

Example
p {
border-top-style: dotted;
border-right-style: solid;
border-bottom-style: dotted;
border-left-style: solid;

All CSS Border Properties


border: Sets all the border properties in one declaration
border-bottom: Sets all the bottom border properties in one declaration
border-bottom-color: Sets the color of the bottom border
border-bottom-style: Sets the style of the bottom border
border-bottom-width: Sets the width of the bottom border
border-color : Sets the color of the four borders
border-left : Sets all the left border properties in one declaration
border-left-color : Sets the color of the left border
border-left-style: Sets the style of the left border
border-left-width: Sets the width of the left border
border-right: Sets all the right border properties in one declaration
border-right-color: Sets the color of the right border
border-right-style: Sets the style of the right border
border-right-width: Sets the width of the right border
border-style: Sets the style of the four borders
border-top: Sets all the top border properties in one declaration
border-top-color: Sets the color of the top border
border-top-style: Sets the style of the top border
border-top-width: Sets the width of the top border
border-width: Sets the width of the four borders




COMPANY
REQUEST HELP
CONTACT US
SITEMAP
REPORT A BUG
UPDATES
LEGAL
TERMS OF SERVICE
PRIVACY POLICY
DMCA POLICY
REAL VAMPIRES LOVE VAMPIRE RAVE
© 2004 - 2024 Vampire Rave
All Rights Reserved.
Vampire Rave is a member of 
Page generated in 0.045 seconds.
X
Username:

Password:
I agree to Vampire Rave's Privacy Policy.
I agree to Vampire Rave's Terms of Service.
I agree to Vampire Rave's DMCA Policy.
I agree to Vampire Rave's use of Cookies.
•  SIGN UP •  GET PASSWORD •  GET USERNAME  •
X