Pinterest Stumbleupon Whatsapp
Advertisement

Once you’ve started dabbling in HTML 17 Simple HTML Code Examples You Can Learn in 10 Minutes 17 Simple HTML Code Examples You Can Learn in 10 Minutes If you know the following 17 HTML tags (and the extra few that go with them), you'll be able to create a basic webpage from scratch or tweak the code created by an app like... Read More , you’ll probably be interested in adding more power to your web pages. CSS is the best way to do that. CSS lets you apply changes across your entire page without having to use lots of inline HTML styles 9 Mistakes You Shouldn't Make When Building a Web Page 9 Mistakes You Shouldn't Make When Building a Web Page These following HTML coding mistakes are easy to make, but if you head them off earlier rather than later, your page will look better, be easier to maintain, and function how you want it to. Read More .

We’ll go over how to create an inline stylesheet so you can practice your CSS skills, and then we’ll move onto 10 simple examples that will show you how to do a few basic things. From there, your imagination is the limit!

If you want a slightly more technical introduction, be sure to check out 5 Baby Steps to Learning CSS & Becoming a Kick-Ass CSS Sorcerer 5 Baby Steps To Learning CSS & Becoming A Kick-Ass CSS Sorcerer 5 Baby Steps To Learning CSS & Becoming A Kick-Ass CSS Sorcerer CSS is the single most important change webpages have seen in the last decade, and it paved the way for the separation of style and content. In the modern way, XHTML defines the semantic structure... Read More .

Inline Stylesheet

Every HTML document contains a <head> tag. That head section is where your inline CSS stylesheet goes. Here’s what it’ll look like:

<head>
  All of your CSS declarations.
</head>

Put that at the top of your document, fill it with your CSS, and you’re set to go.

1. Easy Paragraph Formatting

The cool thing about styling with CSS is that you don’t have to specify a style every time you create an element. You can just say “all paragraphs should have this particular styling” and you’re good to go. Here’s an example of how you might do that.

Advertisement

Let’s say you want every paragraph (that’s everything with a <p> HTML tag Top 11 HTML Tags Every Blogger & Website Owner Must Know Top 11 HTML Tags Every Blogger & Website Owner Must Know The world wide web knows many languages and is coded in several different ones. The one language however, that can be found all over and has been around since the invention of webpages, is the... Read More ) on your page to be slightly larger than usual. And dark grey, instead of black. Here’s how you would do that with CSS:

p {
  font-size: 120%;
  color: dimgray;
}

That’s all there is to it. Now, whenever the browser renders a <p> paragraph, the text will inherit the size (120 percent of normal) and the color (“dimgray”).

If you’re curious as to which plain-text colors you can use, check out this CSS color list from Mozilla.

2. Change Letter Case

Okay, so now that we’ve seen how to make a change to every paragraph, let’s look at how we can be a bit more selective. Let’s create a designation for paragraphs that should be in small caps. Here’s how we’d do that:

p.smallcaps {
  font-variant: small-caps;
}

To make a paragraph that’s entirely in small caps, we’ll use a slightly different HTML tag. Here’s what it looks like:

<p class="smallcaps">Your paragraph here.</p>

As you can see, adding a dot and a class name to any specific element in CSS specifies a sub-type of that element defined by a class. You can do this with text, images, links, and just about anything else.

If you want to change the case of a set of text to a specific case, you can use these CSS lines:

text-transform: uppercase;
text-transform: lowercase;
text-transform: capitalize;

The last one capitalizes the first letter of every sentence.

3. Change Link Colors

Let’s try changing the style of something other than a full paragraph. There are four different colors a link can be assigned: its standard color, its visited color, its hover color, and its active color (which it displays while you’re clicking on it). Here’s how we might change those:

a:link {
  color: gray;
}

a:visited {
  color: green;
}

a:hover {
  color: rebeccapurple;
}

a:active {
  color: teal;
}

Note that each “a” is followed by a colon, not a dot.

Each one of those declarations changes the color of a link in a specific context. There’s no need to change the class of a link to get it to change color. It will all be determined by the user and the state of the link.

4. Remove Link Underlines

While underlined text pretty clearly indicates a link, it sometimes looks nicer to scrap that underline. This is accomplished with the “text-decoration” attribute. Here’s how we’d get rid of underlines on links:

a {
  text-decoration: none;
}

Anything with the link (“a”) tag will remain un-underlined. Want to underline it when the user hovers over it? Just add this below:

a:hover {
  text-decoration: underline;
}

You could also add this text-decoration to active links to make sure the underline doesn’t disappear when the link is clicked.

5. Make a Link Button

If you want to attract more attention to your link, using a link button is a great way to go about it. This one requires a few more lines, but we’ll go over them each individually:

a:link, a:visited, a:hover, a:active {
  background-color: green;
  color: white;
  padding: 10px 25px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
}

By including all four link states, we ensure that the button doesn’t disappear when a user hovers or clicks on it. You can also set different parameters for hover and active links, like changing the button or text color, to add a bit of pop.

The background color is set with background-color, and text color with color. Padding defines the size of box — the text is padded by 10px vertically and 25px horizontally. Text-align ensures that the text is displayed in the center of the button, instead of off to one side. Text-decoration, as we saw in the last example, removes the underline.

makeuseof link button

“display: inline-block” is a bit more complicated. In short, it lets you set the height and width of the object, and ensures that it starts a new line when it’s inserted.

6. Create a Text Box

A plain paragraph isn’t very exciting. If you want to highlight your call to action or another element on your page, you might want to throw a border around it. Here’s how to do that with a string of text:

p.important {
  border-style: solid;
  border-width: 5px;
  border-color: purple;
}

This one is pretty straightforward. It creates a solid purple border, 5 pixels wide, around any important-class paragraph. To make a paragraph inherit these properties, just declare it like this:

<p class="important">Your important paragraph here.</p>

This will work regardless of the size of your paragraph; a single line will get a border the width of the page, one line high, and a longer paragraph will be surrounded by a larger border.

There are many different border styles you can apply; instead of “solid,” try “dotted” or “double.” And the width can be “thin,” “medium,” or “thick.” You can even define the thickness of each border individually, like this:

border-width: 5px 8px 3px 9px;

That results in a top border of 5 pixels, a right border of 8, a bottom of 3, and a left border size of 9 pixels.

7. Center-Align Elements

For a very common task, this is a surprisingly unintuitive thing to do with CSS. Once you’ve done it a few times though, it becomes much easier. There are a couple different ways to center things.

For a block element (usually an image), we’ll use the margin attribute:

.center {
  display: block;
  margin: auto;
}

This ensures that the element is displayed as a block, and that the margin on each side is set automatically (which makes them equal). If you want to center all of the images on a given page, you can even add “margin: auto” to the img tag:

img {
  margin: auto;
}

To learn why it works this way, check out the CSS box model explanation at W3C. Here’s a short, graphical version:

css box model

But what if we want to center text? CSS has a specific method of doing that:

.centertext {
  text-align: center;
}

If we want to use the “centertext” class to center the text in a given paragraph, all we need to do is add that class to the <p> tag:

<p class="centertext">This text will be centered.</p>

Remembering those different steps, however, is another matter. You might want to bookmark this page.

8. Adjusting Padding

The padding of an element specifies how much space should be on each side. For example, if you add 25 pixels of padding to the bottom of an image, the following text will be pushed 25 pixels down. Many elements can have padding, but we’ll use an image for an example here.

Let’s say you want every image to have 20 pixels of padding on the left and right sides, and 40 pixels on the top and bottom. There are a number of ways you can do this. The most basic:

img {
  padding-top: 40px;
  padding-right: 25px;
  padding-bottom: 40px;
  padding-left: 25px;
}

There’s a short hand we can use to present all of this information:

img {
  padding: 40px 25px 40px 25px;
}

This sets the top, right, bottom, and left paddings to the right number. But we can make it even shorter:

img {
  padding: 40px 25px
}

When you use only two values, the first value is set for the top and bottom, while the second will be left and right.

9. Highlight Table Rows

CSS can do a lot to make your tables look really nice. Adding colors, adjusting borders, and making your table responsive to mobile screens are all easy. We’ll look at just one cool effect here: highlighting table rows when you mouse over them.

Here’s the code you’ll need for that:

tr:hover {
  background-color: #ddd;
}

Now whenever you mouse over a table cell, that row will change color. To see some of the other cool things you can do, check out the W3C page on fancy CSS tables.

fancy css table

10. Shifting Images Between Transparent and Opaque

CSS can help you do cool things with images, too. For example, it can display images at less than full opacity (they appear slightly “whited out”) and bring them to full opacity when you mouse over them. Here’s how we’ll do that:

img {
  opacity: 0.5;
  filter: alpha(opacity=50);
}

The “filter” attribute does the same thing as “opacity,” but Internet Explorer 8 and earlier don’t recognize the opacity measurement, so it’s a good idea to include it.

Now that the images are slightly transparent, we’ll bring them to fully opaque on a mouseover:

img:hover {
  opacity: 1.0;
  filter: alpha(opacity=100);
}

Become a CSS Master

With these CSS code examples, you should have a much better idea of how CSS works. Once you’ve gone through all of them, you’ll notice a number of patterns that you can apply to further CSS code Learn HTML and CSS with These Step by Step Tutorials Learn HTML and CSS with These Step by Step Tutorials Curious about HTML, CSS, and JavaScript? If you think that you have a knack for learning how to create websites from scratch -- here are a few great step-by-step tutorials worth trying. Read More . And that’s when you know you’ve really started becoming a CSS master.

And if all of this sounds too complicated, remember that you just grab some CSS templates 11 CSS Template Sites: Don't Start From Scratch! 11 CSS Template Sites: Don't Start From Scratch! There are thousands of free CSS templates available online, all embracing modern design trends and technologies. You can use them in their original form, or customize them to make them your own. Read More and modify them.

What do you do with CSS? Which examples would you like to see in the future? Share your thoughts in the comments below!

Leave a Reply

Your email address will not be published. Required fields are marked *

  1. Pho3nix
    June 14, 2017 at 5:30 am

    Last example should be img:hover instead of img.hover :)

    • Dann Albright
      June 16, 2017 at 8:00 pm

      Thanks for pointing that out! Fixed.

  2. Pho3nix
    June 14, 2017 at 5:26 am

    Last example should be img:hover, not img.hover :)

  3. EA
    June 13, 2017 at 10:14 pm

    7. Center-Align Elements:
    This only works when the block element has a width less than 100%.
    By default display: block will be 100% of your window width, so you won't notice any centering of the element.
    Give the block element a width of, say, 50% and you will see it will indeed center.

    • Dann Albright
      June 16, 2017 at 7:59 pm

      Thanks for pointing that out!