Css Archives - Hamza Shatela

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.

Add Custom CSS To WordPress Post or Page

Shatela Hamza — Sun, 19 Nov 2017 15:24:15 +0000

Have you ever wanted to style an element in a certain page or post within your WordPress website in a beautiful way that will stand out? Fortunately, there is a plugin that will help you do that without the use of child themes.

Adding Custom CSS To Your WordPress Post or Page – CSS Plugin

CSS Plus is a plugin that will help you by adding a CSS editor under the Visual tab in any page or post of your website.

How to Setup the Plugin

To be able to use this feature, navigate to your “plugins Tab” in your wordpress dashboard, and click “Add New” plugin. In the search bar, type and search for CSS Plus. Search in the list of plugins for a Css plugin by Paulo Calixto.

After you have installed the plugin by clicking INSTALL NOW, you then have to activate it by clicking on ACTIVATE NOW in the list of installed plugins.

Once it is installed and active, you can now style any page or post of your website with the CSS Editor which is found in your “page/post” page. Any Additional code you add to the “Editor Section” will be included by default in the tags of selected page.

Css Plugin Support

SUBLIME TEXT BINDINGS
SIMPLE VISUAL
INLINE LESS
COMPRESSED CONTENT
EASY INSTALLATION
AUTO UPDATES
TROUBLESHOOTING
Different language

Animation in CSS helps you manipulate an element on your website in a stylish way. Whether you want an element to bounce up and down ten times, or continuously change colors, Keyframes help you do that. To learn more read how to Animate elements using CSS Keyframes?

How to Create a Custom Page in WordPress

Customizing the Page templates in WordPress is a great way to add structural variations or highly customized functionality and design to your website. Custom WordPress page templates are easy to create and simple to modify. Follow the steps in this article “How to Create a Custom Page in WordPress” to start structuring your page layout as you wish.

The post Add Custom CSS To WordPress Post or Page appeared first on Hamza Shatela.

Animating elements with CSS Keyframes

Shatela Hamza — Sun, 19 Nov 2017 15:03:16 +0000

Syntax and What it Does.

Syntax

.yourCustomClassOrID{
animation-name: myAnimationName;
animation-duration: 6s ; /* or 6000ms */
animation-iteration-count: 2; /* or infinite */
animation-direction: normal; /* or alternate */
animation-delay: 1s; /* or 1000ms */
animation-fill-mode: both; /* or backwards, forwards, none */
animation-timing-function: ease; /* or ease-in, ease-out, ease-in-out, linear, cubic-bezier()*/}

However, there is a shorthand for this property, and it goes like this:

.yourCustomClassOrID{
animation: myAnimationName duration delay iteration-count direction fill-mode;}
Order doesn’t matter if you don’t have your duration and delay set, otherwise you have to follow this order.

To start styling your animation, we use the @keyframes rule, which is what manipulates the element from one style to another:

@keyframes myAnimationName{
from{ color: white }
to{ color: red }
/*From white color to red color within the duration you set in the animation property */}

Sounds easy right? Well, for this property, you also need to include prefixes to support cross-browser compatibility, and the way you initialize prefixes is the following:

.yourCustomeClassOrID{
-webkit-animation: myAnimationName 3s infinite; /* Safari 4.0 – 8.0 */
-o-animation: myAnimationName 3s infinite; /* Opera 12.0+ */
-moz-animation: myAnimationName 3s infinite; /* FireFox 5.0+ */
animation: myAnimationName 3s infinite; /* IE 10.0+ */}

@-webkit-keyframes yourAnimationName{
0%{ background-color: red }
50%{ background: yellow }
100%{ background: blue }
}

@-moz-keyframes yourAnimationName{
0%{ background-color: red }
50%{ background: yellow }
100%{ background: blue }
}

@-o-keyframes yourAnimationName{
0%{ background-color: red }
50%{ background: yellow }
100%{ background: blue }
}

@keyframes yourAnimationName{
0%{ background-color: red }
50%{ background: yellow }
100%{ background: blue }
}
/*Any % from 0% to 100% can be used to set intervals between each animation*/

Animation Example

This concludes Animating with keyframes. The only limit to animating with keyframes is your imagination, so go out and and start animating!

The post Animating elements with CSS Keyframes appeared first on Hamza Shatela.