CSS Basics

CSS is a language designed to express how a web page should look. It adds “style” to the web page; adding color, padding, margins, and more depending on the content of the HTML web page. But, how does the language work? How do you style the page?

 

Styling Basics

To style a web page, you can simply apply style properties inside of your HTML code. But, in the industry, it’s better to separate styling from the HTML code. To do this, you would use CSS; you have to create CSS rules that match the effect you want. A CSS rule consists of multiple parts; the selector and declaration. The declaration consists of multiple parts; the property and value. For example, here’s a CSS rule.

As you can see, this example changes some properties about the body element on the page. When this CSS is included on an HTML web page, the background of the page will be black and text will be white. Now, that’s just the basic way to use a CSS rule. you can get more specific on the rule by adjusting the selector; here’s another example.

 

Class Rules

As you can see we have a new rule. This rule uses a name as a selector; notice the “.” at the start. This means that it will apply when a class is applied to any HTML element that can support changing text color. This gives us more flexibility when using CSS since we can apply it to any HTML element we choose. Now, there is one more type of CSS declaration that is important to know, which focuses on IDs.

 

ID Rules

ID rules are CSS rules that use the ID as a selector. Now, just like any ID in the real world, these should be unique and used only once in the HTML page and in the CSS. I would follow this rule with any webpage you build. So, how do you create a CSS rule for an ID? Here’s an example.

 

In this example, we have another CSS rule. Notice the subtle difference between this and class rule; the difference is ID declarations use a “#”. That’s the main difference between the two types of rules. Now, this might be convenient just knowing these few ways of using rules, but let’s take it a step further with CSS prioritization.

 

CSS Prioritization (Specification)

As mentioned before, CSS is used to add styling to an HTML webpage. Now, every HTML webpage consists of tags. CSS rules are applied to those tags (HTML elements). We’ve seen how to create many types of CSS rules, but mainly for general cases, but we can be more specific. Here’s an example.

We create two rules in this example; one for the unordered list and another for DIVs in HTML. Notice we combine the selectors we’ve used in the previous examples (ul.navigation); this is what makes the CSS rule more specific. This allows us to define CSS rules that only apply to specific types of HTML elements on the page; it creates conditions that need to be met before the rule is applied. Also, given that we can apply multiple classes or properties to an HTML element, this leads to the Prioritization I mentioned. More specific CSS rule will overwrite any other CSS rules that are less specific. Remember this when creating your web pages in the future.

Now, there are even more advanced CSS tips for creating CSS rules; you can find them here. Other than that, this is the end of the basics of CSS; I hope this information helps you with creating your own web pages.

 

Additional Sources

MDN CSS

W3 CSS

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s