CSS Guide For Beginners Part 2

CSS FOR BEGINNERS PART 2

Welcome to part two of our CSS Guide For Beginners. If you missed part one, click here to read it! This is the final part of the series which teaches you some of the more useful styling options of CSS.

Basic Styling Attributes FONTS

We will now look at some basic styling attributes that we can apply to our elements. Let’s look at font manipulation and how we can make our text look the way we want it. We’ve already shown you the font-size attribute. All you need to do is put a number for how big you want your font size to be. The number can be in px, em, pt, or a percentage.

font-size: 12px;
font-size: 12pt;
font-size: 15em;
font-size: 20%;

To read up on the different types of font size units, we recommend this post: http://kyleschaeffer.com/development/css-font-size-em-vs-px-vs-pt-vs/ which gives a great explantion for each one. We can easily set the font color too:

color: #FFF;
color: red;

Notice you can use both Hexcodes and normal color strings. A usful color picker can be found here:http://www.colorpicker.com/ Here are some more font styling options:

font-weight: 600;
font-weight: bold;
font-weight: normal;

Font weight will make the text bolder, and you can sometimes add varying degrees of boldness by using applying an integer (it usually increments in units of a hundred, with 500 being about the normal weight). Font Family allows us to specify the type of font we want our webpage to use. We can specify multiple fonts too, incase the computer viewing the webpage doesn’t have that font already downloaded on their computer. The attribute will try each font in turn until it finds one that the computer has, from left to right.

font-family: “Times New Roman”, sans-serif;

The above styling will first try to load the webpage in Times New Roman and then if the browser cannot find this font, it will then try sans-serif. Notice the Times New Roman font is in quotes, because this font is more than one word. You can find a list of the most commonly used fonts on google. You can even now include some more fancier fonts into your webpage by using the Google Fonts. You can also change the font-style of the element. You can make a font italic, normal and oblique.

font-style: italic;
font-style: normal;

Finally, don’t forget the Text Decoration attribute, which allows you to underline your text.

text-decoration: underline;
text-decoration: overline;
text-decoration: line-through;

Remember you can chain multiple style attributes together:

#myID { font-size: 14px; color: #000000; font-weight: bold; font-style: italic; text-decoration: underline; }

Padding And Margins

Some of the great things about using CSS our margins and paddings. It can at times drive a designer crazy, but as someone starting you’ll soon see how having control over these two styling attributes can help make your webpages look nice and clean. Padding allows you to create space around your elements. It works by setting a numerical value that is used to create an indent inside the element. For example, consider the adding padding to a p tag:

<p id=&rdquo;paddingTest&rdquo;>This p tag has some padding.</p>
<p>No padding here.</p>

And our CSS rule:

#paddingTest { padding: 10px; }

The p tag with the ID paddingTest will now have a 10 pixel padding around it. It will create extra space around the p tag. You might not think why this is important, but suppose you have a paragraph of text that is more important than others, creating padding around it can help make it stand-out from others. The padding tag can have just the top, bottom, left or right side of the element applied to it by using the following styling attributes:

#paddingTest { padding-left: 15px; padding-right: 10px; padding-top: 1px; padding-bottom: 5px; }

Giving you the control over how your paragraphs are spaced.

Magins

Like padding, margins allow us to control the space around our elements. Instead of indenting our elements, margin will move other elements away from our selected element. Support we have an image with a magin of 10px, it will move any other elements away from our image by 10pixels. It works in exactly the same way as padding:

<img src=&rdquo;an image&rdquo; class=&rdquo;margin-test&rdquo;> some text here

CSS rule:

.margin-test { margin: 20px; }

This will create a 20 pixel margin around our image. The text “some text here” will have a 20 pixel margin from our image. Likewise, you can also control the left, top, bottom and right areas.

.margin-test{ margin-left: 5px; margin-top: 20px; margin-right: 5px; margin-bottom: 10px; }

Borders

You can add borders to most elements too including text, images, divs and links. A border has quite a few properties that you can style. Let’s begin with border width and border-style:

<p class=&rdquo;myBorder&rdquo;>Some bordered text</p>

CSS:

myBorder { border-width: 5px; border-style: solid;  }

In the example above, we have used the border-width attribute and border-style. The border-width property determines how thick are border will be around our object. In the case above, it will be 5px wide. The border will run all around the p tag. The border-style allows to determine how our border will look. In this case, we have chosen solid, which is just a solid line. But other properties include: dashed, dotted, solid and double. You can find a complete list here: http://www.w3schools.com/cssref/pr_border-bottom_style.asp Next, we can also determine the color of our border by using the border-color attribute:

myBorder { border-width: 1px; border-color: #000000; }

This will create a 1px black border around our paragraph tag. You can also determine each side of the border individually using the following styles (similar to padding and margins):

border-bottom-width
border-bottom-style
border-bottom-color

And just replace bottom with top, left or right for whichever side of the border you want to style. You can also set all three styles in one go using the border attribute:

myBorder{ border: 1px solid #000000; }

The syntax is: border: (border-width) (border-style) (border-color). You can create space between your border and element by adding padding too. For example:

myBorder{ padding: 10px; border: 1px solid #000000; }

This will create a border around your element, and then leave a 10px gap between the border and the element. You can also created curved borders by using the border-radius property:

myBorder { border: 1px solid #000000; border-radius: 4px; }

Backgrounds

Another CSS property that you can apply to elements is the background. The most obvious background you can control is the web-page body. To select this, just use the following:

body { background-color: #000000; }

The above will set the web-page background to black. As you can see you just give the background property the hex-color code. You can also include an image as your background using the background-image property:

body { background-image: url(‘myimage.png’); }

Notice the url(‘myimage.png’) part. The contents inside the url() function must refer to an image file on your web-directory. Using the background-repeat option, you can also make an image repeat as the background:

body { background-image: url(‘myimage.png’); background-repeat: repeat-x; }

The background-repeat option will repeat the image horizontally or vertically depending on the value you give to the css attribute. Repeat-x will repeat the image horizontally and repeat-y will repeat the image vertically. By default, the image is repeated by horizontally and vertically. You can also use the no-repeat value if you just want your image to only be shown once in the background. By default, the image always starts at the top-left corner of the webpage. You can change this by using the background-position attribute:

body { background-image: url(‘myimage.png’); background-repeat: no-repeat; background-position: top; }

You can apply background-position with different values to determine the position of the background image. You can use a generic position keyword such as the following:

top
bottom
left
right
center

You can also use two of these for a more precise position:

background-position: top left;

But you can also use pixels and percentages:

background-position: 50px 200px;

It uses the x and y position of the web-page to determine the position.

Divs

If you ever read our HTML For Beginners guides, you will remember something called the <div> tag. This tag allows us to place content anywhere on our page. We have lots of control over the placement of DIVs and there various ways to position then. The four main ways of positioning are: Relative - acts like a normal element and is positioned relative to the html around it. Absolute - Position the div anywhere on the screen using top, bottom, left and right values Fixed - Position anywhere on the screen, but kept in a fixed position no matter if you scroll down the page. Let&rsquo;s take a look at a simple relative div:

.myDiv { position: relative; }

Pretty simple. Sometimes you may want Div content in your page and normally you don&rsquo;t have to explicitly define the position, it will automatically be relative by default, but there are some cases when you put divs within divs that not putting the position: relative will cause issues. Best to always define it. Things really start to get fun with the position: absolute div. We can place our div anywhere on the page relative to it&rsquo;s parent. If we have a single div, the parent will be the body of the page, meaning we can position it anywhere. You can position from the top of the page and left hand side, or bottom and right. Examples:

#myDiv { position: absolute; top: 200px; left: 300px; }

Our div will be positioned 200 pixels from the top and 300 pixels from the left. If our div is inside another, for example:

<div id=&rdquo;anotherDiv&rdquo;>
<div id=&rdquo;myDiv&rdquo;>
</div>
</div>

Then we position our #myDiv relative to #anotherDiv since it is our parent. So using the CSS example above, #myDiv will be 200px from the top of #anotherDiv and 300px from the left. Using the fixed position div works similarly. You just set the position using top, left, right and bottom and the div will stay exactly where it is on the screen- even when scrolling. If you&rsquo;re going to be practising with DIVs, why not add a border around your divs so you can visually see where your DIVs are being placed on your page:

#myDiv { border: 1px solid #000000; position: absolute; left: 100px; top: 50px; width: 200px; height: 300px; background: #FFFFFF; }

This will create a div with a black border and white background of size 200x300px positioned 50px from the top of the page and 100px from the left of the page.

Conclusion

That concludes our CSS For Beginners tutorials! I hope you found them useful. If you have any questions about CSS and any of the topics covered in this article, feel free to comment below.

Enjoyed that? Check These Posts Out