CSS

About CSS

Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in a markup language like HTML. CSS is a cornerstone technology of the World Wide Web, alongside HTML and JavaScript.

CSS is designed to enable the separation of presentation and content, including layout, colors, and fonts. This separation can improve content accessibility, provide more flexibility and control in the specification of presentation characteristics, enable multiple web pages to share formatting by specifying the relevant CSS in a separate .css file, and reduce complexity and repetition in the structural content.

Separation of formatting and content also makes it feasible to present the same markup page in different styles for different rendering methods, such as on-screen, in print, by voice (via speech-based browser or screen reader), and on Braille-based tactile devices. CSS also has rules for alternate formatting if the content is accessed on a mobile device.

The name cascading comes from the specified priority scheme to determine which style rule applies if more than one rule matches a particular element. This cascading priority scheme is predictable.

The CSS specifications are maintained by the World Wide Web Consortium (W3C). Internet media type (MIME type) text/css is registered for use with CSS by RFC 2318 (March 1998). The W3C operates a free CSS validation service for CSS documents.

In addition to HTML, other markup languages support the use of CSS, including XHTML, plain XML, SVG, and XUL.

10 CSS Code Examples

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.

Let’s say you want every paragraph (that’s everything with a <p> HTML tag) 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.

“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:

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.

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

Lets Play with CSS

Google Sites

Report abuse

CSS