JavaScript和CSS作为前端开发的两大语言，都有各自独特的特点，结合使用可以实现更加多样化且有趣的效果，而if语句作为JavaScript中的一个重要运算符，也在编写程序时发挥了重要作用。

if语句主要用于执行条件分支，根据判断条件的不同选择不同的执行路径，比如：

if(a === b){
console.log("a等于b");
} else {
console.log("a不等于b");
}

如上代码，通过比较a和b的值，根据是否相等选择了不同的输出路径。若a等于b，则输出"a等于b"，否则输出"a不等于b"。

在实际应用中，if语句还可以嵌套使用，实现更加复杂的条件判断，例如：

if(a === b){
console.log("a等于b");
} else if(a >b) {
console.log("a大于b");
} else {
console.log("a小于b");
}

如上代码，通过if语句三个分支，比较a和b的大小关系，根据大小不同选择不同的输出路径。

CSS中的if语句概念略有不同，数量不多，主要是指@media规则中的条件判断，例如：

@media screen and (max-width: 600px) {
body {
font-size: 14px;
}
}
@media screen and (min-width: 601px) and (max-width: 900px) {
body {
font-size: 16px;
}
}
@media screen and (min-width: 901px) {
body {
font-size: 18px;
}
}

上述代码中，@media规则用于响应不同的屏幕尺寸，以优化网页的显示效果。通过if语句实现了不同的条件判断，根据不同的屏幕尺寸选择不同的字体大小。

总的来说，if语句作为JavaScript中的重要运算符，被广泛应用于编写程序中的条件分支。而在CSS中，if语句则主要用于@media规则中的条件判断，实现不同屏幕尺寸下的优化显示效果。