CSS Basics

CSS (cascading style sheets) is one simple way from going to a plain boring website to a professional looking masterpiece.

Sounds interesting right, but where do we start?

Basics

CSS helps you selectively stylize HTML elements. In this article we will talk about structure of a CSS rule-set and what selector types there are.

One example of this is styling an element:

p {
  color: red;
}

Let's break this down into parts and discover whats happening. In this CSS format we see that we are referring to the HTML "p" or paragraph tag. This part of the CSS is known as the selector and within brackets "{ }" we see the declaration setting the color to red.

Putting all this information together it will turn all paragraph elements in an HTML page red.

Selectors

Now that we have an idea how the structure of a simple CSS rule-set what other selectors can we use to identify HTML elements you want to style.

Simple Selectors these are the items based on name, class, and id.

Combinator Selectors which will allow for more than one selector

You can use a Combinator selector with any of the following.

• descendant selector (space)
Here the p element is in a div element and only p elements in the div element will take on the color of red.
• child selector (>)
Here the p element is in a div element and only p elements directly in the div element will take on the color of red.
• adjacent sibling selector (+)
Here all elements that are the adjacent siblings of a specified element is stylized.
• general sibling selector (~)
Lastly in the general sibling selector all elements that are siblings of a specified element is stylized.

div p {
 color: red;
}

div > p {
 color: red;
}

div + p {
 color: red;
}

div ~ p {
 color: red;
}

That's all for this post! Follow/React for more articles on basic web development.