By styling CSS elements on your website, you can change the appearance and functionality of your site.
Let’s start by looking how you add styling options to your CSS elements.
As shown in the CSS introduction, styling is applied by delcaring an element and then placing styling options within a pair of curly brackets, just like this:
/* Element Example */button {color:red; padding:10px;} /* Class Example */.item {display:flex; margin:auto;}This is how you can call this styling into your HTML document:
<div class="item">
<button>Click Here</div>
</div>When calling a class into your HTML document, make sure to remove the . from the class. In the example above, this is class="item"
If you are using universal styling for your CSS Elements (headings, paragraph, buttons), sometimes you may want to change the way that specific elements appear on different pages.
You can easily do this by appling a new line of CSS. There are a few different ways that you can do this:
/* Option 1: Define the specific element/container that you want to style */
.contentwrap .item h2 {color:orange; text-align:center;}This is the part of the website this line of CSS would be applied to:
<div class="contentwrap">
<div class="item">
<h2>My Heading</h2>
</div>
</div>If you compare the CSS example to the HTML above, you can see that each class/element is seperated by a ., which means that each class/element is on a new line.
This CSS styling targets this specific h2 within this specific block of HTML. It will overwrite any universal styling that you have set to h2.
There is another way to target specific element/containers. You can do this:
/* Option 1: Define the specific element/container that you want to style */
.contentwrap.contact h2 {color:orange; text-align:center;}This is the part of the website this line of CSS would be applied to:
<div class="contentwrap contact">
<h2>My Heading</h2>
</div>The difference here is that .contentwrap and .contact have been connected to look like .contentwrap.contact. To call two connected CSS classes, you must add them both into the same class in your HTML document.
color: Specifies the text color
background-color: Sets the background color of an element
font-family: Defines the font family for text
font-size: Sets the size of the font
font-weight: Specifies the boldness of the font
text-align: Aligns the text horizontally within its container
text-decoration: Adds decoration to text (e.g., underline, overline, line-through)
text-transform: Changes the capitalisation of text
line-height: Sets the height of a line of text
letter-spacing: Adjusts the spacing between characters
word-spacing: Adjusts the spacing between words
display: Defines how an element is displayed (e.g., block, inline, flex)
width: Sets the width of an element
height: Sets the height of an element
margin: Sets the margin space around an element
padding: Sets the padding space inside an element
border: Adds a border around an element
box-shadow: Adds shadow effects around an element’s frame
position: Specifies the positioning method of an element (e.g., static, relative, absolute, fixed)
top, bottom, left, right: Positions an element relative to its containing element
float: Positions an element to the left or right of its container
clear: Specifies which sides of an element can’t have floating elements
flex-direction: Specifies the direction of flex items
justify-content: Aligns flex items along the main axis
align-items: Aligns flex items along the cross axis
flex-wrap: Specifies whether flex items are forced into a single line or can be wrapped onto multiple lines
grid-template-columns, grid-template-rows: Defines the columns and rows of a grid container
grid-column, grid-row: Specifies the size and location of grid items within a grid container
background-image: Sets one or more background images for an element
background-position: Specifies the starting position of a background image
background-repeat: Defines how background images are repeated
background-size: Specifies the size of the background image
animation-name: Specifies the name of the @keyframes animation
animation-duration: Sets the duration of the animation
animation-delay: Specifies when the animation will start
animation-iteration-count: Defines the number of times an animation should play
animation-timing-function: Sets the speed curve of the animation
animation-fill-mode: Specifies how a CSS animation should apply styles to its target before and after its execution
transform: Applies 2D or 3D transformations to an element (e.g., rotate, scale, skew)
transform-origin: Sets the origin point for transformations
transition-property: Specifies the CSS property to which a transition effect should be applied
transition-duration: Sets the duration of the transition effect
transition-timing-function: Sets the speed curve of the transition effect
transition-delay: Specifies when the transition effect will start
opacity: Sets the transparency level for an element
cursor: Specifies the type of cursor to be displayed when hovering over an element
z-index: Specifies the stack order of an element
Ready to start building your web pages? Explore more tutorials on HTML, CSS, and JavaScript on HowCodingWorks and take your web development skills to the next level.
Quick Links
Social Media
