CSS Equivalent of the "If" Statement

CSS Equivalent of the if statement

No. But can you give an example what you have in mind? What condition do you want to check?

Maybe Sass or Compass are interesting for you.

Quote from Sass:

Sass makes CSS fun again. Sass is CSS, plus nested rules, variables, mixins, and more, all in a concise, readable syntax.

Can you use if/else conditions in CSS?

Not in the traditional sense, but you can use classes for this, if you have access to the HTML. Consider this:

<p class="normal">Text</p>

<p class="active">Text</p>

and in your CSS file:

p.normal {
  background-position : 150px 8px;
}
p.active {
  background-position : 4px 8px;
}

That's the CSS way to do it.

Then there are CSS preprocessors like Sass. You can use conditionals there, which'd look like this:

$type: monster;
p {
  @if $type == ocean {
    color: blue;
  } @else if $type == matador {
    color: red;
  } @else if $type == monster {
    color: green;
  } @else {
    color: black;
  }
}

Disadvantages are, that you're bound to pre-process your stylesheets, and that the condition is evaluated at compile time, not run time.

A newer feature of CSS proper are custom properties (a.k.a. CSS variables). They are evaluated at run time (in browsers supporting them).

With them you could do something along the line:

:root {
  --main-bg-color: brown;
}

.one {
  background-color: var(--main-bg-color);
}

.two {
  background-color: black;
}

Finally, you can preprocess your stylesheet with your favourite server-side language. If you're using PHP, serve a style.css.php file, that looks something like this:

p {
  background-position: <?php echo (@$_GET['foo'] == 'bar')? "150" : "4"; ?>px 8px;
}

In this case, you will however have a performance impact, since caching such a stylesheet will be difficult.

If else statements in CSS?

There are no real if/else statements in CSS, you can just use media queries and define your css depending on the width of the window like this:

@media only screen and (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}

if the window is smaller than 600px, the background color is set to lightblue. You can use several queries like min-width and max-width to define your CSS. Just have a look at:
https://www.w3schools.com/css/css_rwd_mediaqueries.asp

If ... else conditional statements in CSS stylesheet processed as PHP

Oops ...

The problem was my variable $fixed_navigation_Home which was declared by a controller file. Thanks to Mr Alien for drawing my attention to it.

The problem, I now realise, is that web pages are stateless: once the PHP processor has processed the page variables are destroyed. Consequently, my variable was not being 'remembered' since the style sheet is called by the browser after the page is generated.

Declaring the variable as a global did not help, for the reason given above. For those interested in the issue there are other pages which explain how to resolve the 'pass variable between pages' problem:

https://stackoverflow.com/questions/9726352/using-php-variables-across-different-files

Number of ways to share a variable defined in one PHP file among all the files of a website / application?

Using PHP variables on multiple pages

Thanks for the responses.

How can I do if statement in css?

Try using media queries and set min-width as you want.
Here an example.

<style>
@media (min-width : 1000px) {
.your_class {
padding-top: 200px;
}
}
</style>

JavaScript changing CSS not working inside of if statement

I think you don't need to use an if else statement, you only need to add a delay between both animation. So you may try this :

You need to make your element inline-block or block for the rotation to work.

document.getElementById("signUpBtn").style.transformOrigin = "top center";document.getElementById("signUpBtn").style.display = "inline-block";document.getElementById("signUpBtn").style.transition = "1s ease-in-out";
function rotateBtn() {  document.getElementById("signUpBtn").style.transform = "rotateY(90deg)";
  setTimeout(function() {    document.getElementById("signUpBtn").style.transform = "rotateY(0deg)";  },1000);}

<a class="btn btn-primary btn-lg" id="signUpBtn" href="./pages/createaccount.php" onmouseover="rotateBtn()">     Sign up »</a>

alert('you\'re good to go!');