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

The Big Bang of Web Development: Adding Some csstyle

DZone's Guide to

The Big Bang of Web Development: Adding Some csstyle

If you are new to the field of web development and looking to get started with CSS, then this is the post for you! Read on to learn how to style web pages.

· 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.

Where HTML is all about structure, CSS is all about style. 

[If you are not sure what I am referencing, start at this blog post]

CSS, or Cascading Style Sheets, is the second side of the web development language pyramid. Some will argue with me over calling CSS a language, but let the haters hate.

CSS is used to tell things where to sit on the page, how much space should around the rendered tag, what color the font should be, and many more things. While I’m not going to deep dive into stylesheets (a document of CSS elements), I want to make sure we have a good understanding of how style is used in HTML and how it manipulates the elements on the page.

We won’t deep dive, because CSS can get a little messy and some companies have “perfected” CSS for us. If you have heard of Bootstrapping, this is one very popular way to make your pages look good with little effort. It has evolved into a great Web App framework too, but for now, we’ll focus on the styling portion. It was invented by a couple people over at a little company called Twitter.

But back to pure CSS that we have to write ourselves!

body {
    background-color: lightblue;
}

h1 {
    color: white;
    text-align: center;
}

p {
    font-family: verdana;
    font-size: 20px;
}

So I stole some CSS samples from W3Schools to help us better understand how this is all working.

In this example, you may recognize a couple tags, like bodyh1, and p. HTML tags, by default, have some style associated with them. Using CSS, we can modify or add some additional styling to the tag. The body tag got a background color, meaning anything that is inside the opening and closing <body> tags will have a light blue background (unless overwritten by another styling tag).

Let’s see how this changes our web page. Remember the index.html file in our last article? Time to make it prettier!

Open up a blank file in your favorite code editor. Paste in the above CSS into that file. Save the file in the same directory as the index.html file we created last week. Name it style.css.

Congratulations, you’ve created a stylesheet!

Now we need to link this style sheet to our index file. Open up your index.html file. To link the stylesheet to this HTML file, you need to define the link in the header (Reminder: the header is all the stuff between the opening and closing <head> tags. The link will have a property of type which is text/css, a relationship (or rel) which is a stylesheet, and, finally, the location of the document with href.

<link type="text/css" rel="stylesheet" href="style.css">

Save your changes!

Since the index.html already contains a bodyh1 and p tags, we should see the style immediately reflected. Open your index.html file in a browser. You should now see a light blue background and the header should be centered and white text.

Easy, right?

There are other ways to add style to your page besides tags.

Let’s say you have two paragraph tags that you wanted to be styled differently, and we want the style of the second paragraph to match the link. You can also define style classes in your stylesheet. To define a style class, you add a  . to the front of the style name.

.bluetext {
  color: blue;
}

So everything with the bluetext class would have blue text.

You can also define multiple types for a style. For example, if we want to be able to mimic the p tag style in non-p tags, we can also create a class name for it.

p, .p {
    font-family: verdana;
    font-size: 20px;
}

Now we can access the p tag styling for any tag.

Let’s add the bluetext class to our second paragraph tag, and add p and bluetext styling to our link.

<p class="bluetext">And then I added more that I want to be in a new paragraph. </p>
<a href="https://people.sap.com/meredith.hassett" target="_blank" class="bluetext p">Meredith's Profile</a>

Save your changes. Now when you refresh your application, the last two lines will be blue and the link text styling will match the other paragraphs.

CSS can get really complicated. You can define styles for certain tags or classes that also have a certain attribute set and beyond. The important thing is that we understand how to assign styles to the page and how it impacts the look and feel of our page. Also, the reason we use CSS styles and classes is that it’s reusable. Instead of writing style for each element or tag, we can use stylesheets to define reusable styling. This makes our code easier to read and refactor.

Here are some great resources for CSS:

Now that we know how to style, we’re ready to tackle dynamic components of JavaScript in our next post!

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:
web dev ,css ,bootstrap ,css style ,front-end development

Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

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

{{ parent.tldr }}

{{ parent.urlSource.name }}