CSS uses rules to define the design of an HTML element.
Here's an HTML element labeled with the CSS properties that control different aspects of its appearance. When you want to style an HTML element, imagine there is a box around it and apply these properties to style it.
We've already looked at three properties to control the appearance of an HTML element's text. The next few cards will cover five more properties that affect the space surrounding the text.
background-color property sets the color for the background of an HTML element.
background-color to the hex number
Instead of a solid color, the
background-image property sets an image as the background of an HTML element.
border property sets the width, style, and color of an element's border
3px solid #cc0000. This changes the border width to
3px, the border style to
solid, and the border color to
padding property creates space between the content and border of an element. This whitespace is useful in order to improve readability and organization of the page.
padding property sets the padding on all sides. It's possible to set the padding on each side.
padding-right are available to set the padding on each side of an HTML element.
margin property creates space for multiple HTML elements. The margin is a transparent area outside the border of an element.
margin property sets the margin on all sides. It's possible to set the margin on each side.
margin-right are available to set the margin on each side of an HTML element.
margin-right are available to set the
margin on either side of an HTML element. If one of these properties is set to
auto, then it will take as much as possible.
To move the HTML element to the far left of the screen, use
margin-right: auto. This will maximize the amount of space there is on the right side margin, pushing the element to the far left.
To center an element, set
margin-right: auto and
margin-left: auto. The margin to the left and right will be equal and the element will be centered.
margin-right: auto, add
margin-left: auto in order to center the h1 element.
Here's an example of using CSS in a web page:
The head element contains information that the web browser needs to display the page.
The link element tells the browser where to find the CSS file used to style the page. The
relattribute tells the browser that the file being linked is a CSS file to style the page. The
hrefattribute gives the browser the path to the CSS file.
The body element contains the content of the page that shows up in the web browser.