Basics of CSS Properties

posted: category: web-design


Basics of CSS Properties

Cascading Style Sheets (CSS) allows you to add styling to HTML elements. Once you understand how to add CSS, then you can begin to use it to style your web page however you wish. CSS is added in three main ways:

Using a link tag - (Referencing an external CSS file, this way the same CSS can be used across your entire site)

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

Using a style tag - (Mostly used on a page for page specific CSS)

<style type=”text/css”>
p {
font-size: 12px;
font-weight: bold;
}
</style>

Using the style attribute – (Placed inside

an element, this will override any other CSS)

<p style=”font-size: 12px; font-weight: bold;”>Some formatted text</p>

An Overview of CSS

There are numerous css properties, capable of effecting the look of any HTML element on your page. To list them all is impossible in a single post, for more reference, try a site such as w3schools.  In this post, you’ll find an overview of the most commonly used css properties and how to use them with HTML tags.

When you are writing a CSS file or adding a style tag, you will first reference the HTML element you want to style. Normally you will either directly reference an HTML tag (body, div, p, ul, etc.), a class ( .someclass), or an id ( #someid). Each reference has a set of curly brackets that contains all of the css properties you are using:

 #someid {
width: 150px;
height: 100px;
}  

You can also reference a child element of a parent element. Such as:

#someid p {font-size: 12px;} Would give a font size of 12px to all paragraph tags that are inside an element with the #someid id.

Here are some of the most commonly used css properties, along with the elements they are most used with:

Sizing an element can be done by using the width and height properties. The most used value types given to width and height are pixels and percentages.

div {width: 100px; height: 150px;} would make all div elements 100px wide by 150px tall.

div {width: 50%; height: 60%;} would make all div elements 50% the width and 60% the height of their parent element.

Setting background properties allow you to change the background of elements. Background-color, background-image, and background are the most used.

div {background: rgba(255,255,255, 0.7);} would give all div elements a slightly opaque white background.

div {background-color: #ffffff;} would give all div elements a solid white background. With background-color you can use either hex values or rgb numbers.

Body {background-image: url(‘media/someimage.jpg’);} gives the body element a background image named someimage.jpg which is located in a folder called media. If you are going to use the background-image property, there are a couple of other useful properties to go with it. Background-position and background-repeat.

Background-position sets where the image starts in the element specified along the length with – top, center, or bottom; and along the width with – left, center, or right. So to use the background-position to have the image start in the top left corner: background-position: top left;

Background-repeat specifies if you want to have the image repeat at all. The main options are: no-repeat, repeat (tiles the image), x-repeat (repeat horizontally), and y-repeat (repeat veritcally).

Those three properties can also be used in a single string: background-image: url(‘media/someimage.jpg’) top left no-repeat;

Another couple useful properties are margin and padding. Margin is how much extra space you want outside of an element (between your element and its parent element, or the previous / next element). Padding is how much space you want between the border of your element and any child element inside it.

 

 

comments powered by Disqus

About the Author

Jeff K.

Jeff K.

Jeff is a web designer and graphic artist. In addition to web design, Jeff enjoys other forms of art, including pencil sketching and illustration.

If you are looking for affordable web design services for your business, Cloudy Mouse provides timely personalized service. Our focus is creating great looking responsive website designs for small businesses without breaking their bank.

Take a look at our Web Design Services and discover how we can get your business into the cloud.