CSS中的Class和Style用于控制HTML中的元素样式，使得HTML页面更加美观且功能强大。

.class-name {
/* class的样式*/
}
#id-name {
/* id的样式*/
}
element{
/* 标签的样式*/
}
[attribute] {
/* 属性选择器的样式*/
}

Class和Style的区别在于，Class是一种可以重复使用的样式，可以用于不同的元素上。而Style是一种样式直接应用于单个元素上的方式。

下面是一个例子，展示了如何使用Class来控制样式：

.bg-blue {
background-color: blue;
}
.bg-red {
background-color: red;
}

HTML代码:

<div class="bg-blue">这是背景蓝色的div</div><div class="bg-red">这是背景红色的div</div>

此时会出现两个不同颜色的div。

Style可以直接使用HTML标签的style属性来定义样式，但是不建议使用。Style的重要性在于可以在JavaScript中动态设置元素样式。

下面是一个Style的例子：

<div style="background-color: blue;">这是一个蓝色的div</div>

在使用Class和Style时，记得选择有具体含义的类名和id名，这样在后期维护时更加的方便。