Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Using CSS: An Introduction to the Basics

DZone's Guide to

Using CSS: An Introduction to the Basics

If you're new to web development, read on to get a quick intro to the concepts behind CSS, and start making cool looking sites.

· Web Dev Zone ·
Free Resource

Deploying code to production can be filled with uncertainty. Reduce the risks, and deploy earlier and more often. Download this free guide to learn more. Brought to you in partnership with Rollbar.

Want to know how to design cool web interfaces using CSS (Cascading Style Sheets)? Well, it’s super easy and this article will dig deep to show you how you can use CSS to design these interfaces.

For starters, the best way to define CSS is by showing you these two images from Twitter. The difference between the two images that meets the eye is CSS.

Twitter just about the time it was founded


Twitter Today

The bottom line is that web development has evolved a lot since the advent of the Internet, and so has design and visual style. This is where CSS comes into play. It is a set of rules including, but not limited to, background-color, font-size and everything you can think of that involves styling web pages. These rules are then applied to HTML tags to change how they look. It is by far the de-facto standard for web styling and you will never go wrong mastering it. The rules are cascading which means that, if there are multiple rules that match a particular element, the more specific rules will apply. In this how-to, we will give you a quick primer on using CSS for web app design.

First, let us look at a few ways to include CSS into our web page.

Using Inline CSS Styles

This is the easiest way to use CSS and involves defining CSS rules in an HTML element using the element’s attribute “style.”

Example:

<div style= "color: red" "backgroundColor: black">Hello</div>

The content inside the double quotes is what makes the CSS rules. This example will style the div element to have red color text and a black background.

Using an External CSS File

As your website begins to grow, using inline CSS tends to c­lutter your website and it is recommended that you separate our the different parts of your files, i.e. structure (HTML), styles (CSS), and logic (JavaScript) into different files. Now, we will be putting all of our CSS rules in one file. Before we do this, however, you need to understand the concept of CSS selectors, which is basically answering the question, “How do we refer to HTML elements inside of CSS files?” There are 3 ways to refer or select HTML elements: tags, classes, or ids.

The syntax to use is:

selector {
background-color:”black”;
color: “red”;
. . .
}

To achieve the same effect as above, but now with tags as selectors, we would do:

div {
background-color: “black”;
color: “red”;
}

However, there is one problem with this approach. The rules will apply the specified CSS rules to all “divs.” Which brings me to an improvement. Let’s try using classes. First, we will have to assign a class to our div element to which we want to refer.

<div class=”mydiv” style=”color: red”;background: black”>Hello</div>

Then in CSS, we would do:

.mydiv {
background-color:”black”;
color:”red”;
}

Note the dot (.) before the class name. This is what instructs the CSS processor that we are referring to a class name and not an HTML tag.

If we were to use an id we would edit our HTML like so:

<div id=”mydiv” style=”color:”red”; background:”black”>Hello</div>

Then in the CSS file, you would do:

#mydiv{
background-color: “black”;
color: “red”;
}

Note the octothorp (#) before the id name. This is to tell the CSS processor that we are referring to the id, "mydiv."

Mostly, you will find yourself using id and class names as your CSS selectors. Let’s examine common use cases for these selectors:

  • Using an ID selector: In HTML, you can only have one id per HTML page. This means that an id is a unique selector and you use it when you want to style a single specific element in a very specific way.

  • Using a class selector: In HTML, class names can be shared between several elements providing a way of identifying all these elements at once. If you find yourself wanting to style a group of elements together this should be your first choice. First, you will assign all the elements the same class and then refer to that class name in your CSS file.

CSS selectors can be joined and/or chained.

Joining of CSS selectors

div#mydiv {
           ...
}

This will style only the div which has the id of “mydiv.”

chaining of CSS selectors

div li {
…
}

This will style only the ‘li’ element(s) that is a child of a ‘div’ element.

After writing your CSS rules in a CSS file, you will need to include it into your HTML page. You do this by using the link tag in the head section of your HTML like so:

<link type=”text/css” href=”/path/to/filename.css” rel=”stylesheet” />

Using Libraries and Frameworks

There is more to CSS than meets the eye. As you deal with CSS more, you may need to do more complex CSS operations like animations, media queries, use variables, etc. This may become cumbersome, but worry not, there are libraries that can help you with this. Each was built for a specific purpose and you would need to research more on them, but I will just list some of the most popular:

  • Pure CSS

  • Materialize

  • Bootstrap

Cheers!

Deploying code to production can be filled with uncertainty. Reduce the risks, and deploy earlier and more often. Download this free guide to learn more. Brought to you in partnership with Rollbar.

Topics:
css ,html ,web dev ,user interface design

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}