How to Change the Style of Any Element Within Your Page or Post

Shatela Hamza — Mon, 20 Nov 2017 23:04:35 +0000

Whether you are looking to create an art-directed experience on your blog or magazine website, or just want to change simple things like header color, menu link color, or a font on specific posts or pages, in most cases you need to use of CSS. If you aren’t familiar with how to add a style sheet to your website, read this article before you proceed.

Styling with CSS

Let’s say you have an element like an

or a
and you want to give this element a unique style , well you can easily do this by adding this code to your .Css section.

p{
font-size:18px; /* Changes the font-size to 18px for all
elements within the same post or page that this code has been added to/
}
h1{
color:red; / Changes the font color to red for all
elements within the same post or page that this code has been added to*/
}

IDs and Classes are Selectors

However, what if you have multiple

elements and you want to target specific ones or just one of them. This is where IDs and Classes come in. For example

, this will give us the ability to target this specific

by referring to it’s ID. Same goes for Classes, you can just add a class like so and refer to that class by calling it’s class name. Those two features are basically used as selectors for CSS and other languages like JavaScript to handle. But how are they used and how different are they?

ID’s

Unique and can’t be repeated in two different elements on the same page.
Each page can have only one of the same ID.
Referred to by using the # before the ID name
Overwrites Classes styles, since it is more dominant. (Specificity level 2 for ID’s Vs. level 5 for Classes)

#uniqueIDName{
background-color:red;
width:100px;
height:100px;
}/*Gives the ID uniqueIDName the properties placed between the {}*/

Classes

The same class can be used multiple times on multiple elements.
Classes have a lower level specificity than ID’s
An element can have more than one class by separating each with a space like so:

Referred to by using the . before the class name

.className{
background-color:red;
width:100px;
height:100px;
}/*Gives all the elements with this class the properties placed between the {}*/

Elements Can Have ID’s and Classes at The Same Time

CSS doesn’t prevent you from having both selectors given to the same element. Actually, it is better to do so because you might have a list of products on your website, where each one has a specific ID but all products have the same class, and if you want to refer to a specific product, you have it’s ID set.

The post How to Change the Style of Any Element Within Your Page or Post appeared first on Hamza Shatela.

Html Archives - Hamza Shatela