Style starts here
CSS was created to separate the styling from the structure of an HTML document. We’ll explore three types of CSS inclusions: inline, internal, and external. We’ll only focus on the basics. We’ll style text, images, and a few other HTML elements. The main focus of this chapter though will be on responsive design. Responsive design allows your website to scale properly across any screen size. We’ll tackle this the hard way first, utilizing pure CSS only, and then we’ll use the Bootstrap framework to simplify that process.
CSS (Cascading Style Sheets) is the “language for describing the presentation of web pages, including colors, layout, and fonts.” CSS allows for the separation of content and style. Why do we need a separation of content and presentation? To make your website easily indexable by search engines. For your website to be Search Engine friendly, we’ll remove any excess bloating from the markup and focus on proper semantics. CSS will help us retain the visual appeal of the site while at the same time improve our SEO (Search Engine Optimization).
Prior to the implementation of CSS, HTML elements were styled with certain element attributes. For example, cell-padding was an attribute that was used to create padding inside a table, <table cellpadding=”10">..</table>. As of HTML5, cellpadding is no longer supported. To add padding to a table in HTML5, use CSS. We’ll cover <tables> in a later article.
Including CSS
The first thing that you will have to learn is how to add CSS to the document. There are three ways:
inline
internal
external
Inline CSS can be added to any HTML element using the style attribute. If we wanted to add padding to our button, and change the background color to blue, we could do the following:
<button
style=”padding: 10px; background-color: blue;”
>
Click Me
</button>
Even with only two styles added to the button, the code readability is already starting to suffer. If you had multiple buttons and wanted each one to have a padding of 10px’s and a blue background color, you would have to copy the style to each button. Code maintainability would suffer. Inline styling should be avoided whenever possible. There is a time when inline styles should be used; we’ll get back to that shortly.
Internal CSS is included inside the <head> tag. The CSS code is placed inside the <style> tag. Let’s look at the previous button code and see how we can produce the same result with much more readable code.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Internal Stylesheet</title>
<style>
button {
padding: 10px;
background-color: blue;
color: white;
}
</style>
</head>
<body>
<h1>This button is blue.</h1>
<button>Click Me!</button>
</body>
</html>
Looking at the code, the CSS has been moved to the <head> tag leaving the body tag with minimal markup. It’s significantly easier to read.
External CSS stylesheets are documents that are not part of the HTML document. This is a separate file that ends in the .css extension. To utilize the CSS elements within your HTML document, you will have to include the file. The file is included by specifying the location of the stylesheet inside the <head> tag:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>External Stylesheet Include</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>The following page includes an external stylesheet.</h1>
<button>Click Me!</button>
</body>
</html>
We first specify that the <link> is a stylesheet; it’s followed by the location of the stylesheet. The location to the stylesheet is specified using the href attribute. Both index.html and style.css files are inside the same folder, so the relative path to the style.css file can be used. If the file was nested inside a subfolder, a relative path to that subfolder should be provided: <link rel=”stylesheet” href=”css/style.css”>. If the file is located on an external server, the absolute path may be used. The absolute path specifies the full path to the file. For example,
<link rel=”stylesheet” href=”http://example.com/css/style.css”>.
The external stylesheet allows for a total separation of style and content and is the preferred method of using CSS.
/*
style.css
CSS Stylesheet
*/
button {
padding: 10px;
background-color: green;
color: white;
}
The external document, style.css, is listed above. All of the code is moved to the external sheet, leaving the HTML document free of any CSS clutter. The resulting page displays a green button.
Let’s revisit inline styles. If you specify that each button should be blue in your external document, but you need one button to be red, an inline style can be used on that specific button. Inline CSS takes precedence over internal and external CSS.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>External Stylesheet Include</title>
<link rel="stylesheet" href="style.css">
<style>
button {
background-color: blue;
}
</style>
</head>
<body>
<h1>The following page includes an external stylesheet.</h1>
<h2>The button below should be red.</h2>
<button style="background-color: red;">Click Me!</button>
</body>
</html>
Let’s walk through the code above. It contains a link to the external stylesheet. The external sheet contains a style for the button. The background color of the button in the external stylesheet is set to green. It also has a padding of 10 pixels and a font color of white. Below the include is the internal style for the button. It contains a blue background color. The blue background color overrides the green background color. The inline style overrides both the internal and external styles and shows the background color of the button to be red. The padding and font color styles are inherited from the external stylesheet.
CSS Series
Continue your CSS Learning.
Style starts here
Part one of our CSS fundamentals series sets up your styling toolkit. Learn how to link a style sheet, read selectors, and use the cascade to override browser defaults—laying the groundwork for responsive layouts, color palettes, and clean typography.