Beginner's Guide to CSS

HTML and CSS have a close relationship. Before starting this guide, you should have a basic familiarity with HTML, as covered in our previous blog, Beginner's Guide to HTML. Already checked that out? Let's get started.

What is CSS?

Short for cascading style sheets, CSS is a front-end development language that tells web browsers how elements should appear on each webpage. Working hand-in-hand with HTML, CSS helps create consistency on your website.

There are three different methods to add a style sheet—inline, internal, or external. External .css files are considered to be the most practical, as you can easily change the layout and style of several webpages at once, just by changing one file.

How do you link CSS to HTML?

External style sheets can be linked to your HTML with a path relative to the current web page. For example, let's say your style sheet is named "websitestyles." If your HTML and CSS files are located within the same folder, you would update your HTML to include the following:

If your HTML and CSS files are located within different folders, you would simply specify the folder the style sheet can be found within before the file name.

Once you've linked the two together, your webpages' style will change based upon what you enter into your style sheet.

CSS Basics

Selectors, Properties, and Values

In CSS, selectors are patterns used to select the HTML element(s) that are being styled. Properties then specify how you are styling those selected elements. Lastly, values are added in the form of integers, real numbers, lengths, or percentages to further direct the style. For example, let's consider what it would look like to specify a 14px font size and white color to our HTML body elements.

Color

Color Names

In CSS, you can specify the color of an element using predefined color name, such as the following:

• Tomato
• Orange
• MediumSeaGreen
• Gray
• SlateBlue
• Violet
• LightGray

HTML/CSS support a total of 140 different color names. To view the full list, visit here.

Color Values

In addition to the predefined color names, colors can also be specified in CSS using RGB values, HEX values, HSL values, RGBA values, and HSLA values. For example, the color name "tomato" has a HEX value of #FF6347, so either value could be entered to achieve this color.

Position

The position property defines which type of positioning method is used on an element; there are five different positioning methods to choose from.

Static

Static positioning is the default for all elements. Typically, this is not a position that you would choose to assign to your elements since it is not positioned in any special way, it's just set according to the normal flow of the page.

Absolute

This position allows you to choose exactly where you want an element to go. The most important thing to remember about absolute positioning is that it can limit the flexibility of your site if overused or used improperly. This is because an element that is absolutely positioned is not affected by other elements and it doesn’t affect other elements, either.

Relative

In order for this position to actually do something, you must set some other parameters such as top, left, bottom or right. These other positioning attributes help determine how to move the element in relation to its normal position. For example, you could set "position: relative;" and "top: 20px;" to move your element down 20 pixels from where it started.

Fixed

An element in a fixed position is exactly what it sounds like. No matter how you alter your browser or scroll down the webpage, the element remains in the same exact spot. Navigation bars are a common example of an element that is typically set to a fixed position.

Sticky

Sticky positioning is often considered a hybrid between relative and fixed positioning. When an element is sticky, it will act relative until you scroll past it. At this point, the element "sticks" to that spot and remains in a fixed position. This position is most easily understood through a visual example, shown here.

Float

The float property is used for positioning and formatting content. It determines where an element, such as an image, is placed in relation to its container, allowing text and inline elements to wrap around it. Three basic float values include none, left, and right.

None

This is the default for the element, meaning it does not float and displays right where it occurs within the text.

Left

When an element is set to float left, the element moves to the very left of its containing block.

Right

An element that floats right is positioned at the very right of its container.

Try it for yourself. Change "float: right;" to "float: left;" and "float: none" here to see how the webpage is affected.

Box Model

The box model is essentially a container that wraps around every HTML element, consisting of margins, borders, padding, and the content itself. The following image visually displays how this concept works.

The box model allows us to add a border around and define space between elements. Here's an example of how you could implement this model:

Summary

At WynHouse Software, we like to compare development languages to a house. HTML would be the frame, while CSS would be the appearance. Just as all rooms don't have the same furniture or decorations, webpages don't all have the same text and images. This is where CSS comes in: to determine the size, shape, and color of the elements on each specific webpage.