If you have read through my previous blog on Beginning with HTML, you would have a basic understanding on how to create a simple webpage. However, it lacks the design, styling or colors. To be honest, everything looks like a black and white document without a proper alignment or format. This blog would help you achieve all of aforementioned with the help of CSS.
CSS stands for Cascading Style Sheet. Where HTML is what defines the structure and content of a web page, a Cascading Style Sheet is a web document that allows you to change the appearance of the HTML.
CSS allows you to change the size, style, font, and color of text; margins and padding; background colors and border styles. It can also be used to position elements on a page (but we’ll leave that for another day).
The best thing about CSS is that it allows you to make global style changes that affect every instance of a certain element throughout your blog or website so that you don’t have to make these changes at the individual page level. This saves you a ton of time when it comes to redesigning your blog.
To make it simpler, the h1 (heading 1) tag within the HTML is displayed as extra large, bold, black text. If we want to change the color, font and size of all the h1’s on our blog to keep consistency throughout, all you need to do is define what all h1’s will look like in your CSS.
Sometimes different browsers may display slightly different default styles. Using a style sheet to define what a specific element should look like can keep the look of your blog consistent from one browser to another as well as one device to another.
A very important piece of CSS is the “Cascading” part. The browser reads style definitions from top to bottom in a style sheet. This means that a style you define lower in the style sheet will override any previous styles defined earlier in the style sheet. We’ll get into that in a moment. You can also have a style sheet override another style sheet. There are certain defualt styles applied for specific tags by the browser and this is how we are able to override predefined styles from our webpage, as our custom style sheet is usually the last one read by the browser.
There are three different ways to implement CSS on a webpage
Internal or embedded CSS requires you to add <style> tag in the <head> section of your HTML document. This CSS style is an effective method of styling a single page. However, using this style for multiple pages is time-consuming as you need to put CSS rules to every page of your website.
Here's how you can use Internal CSS
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
body {
background-color: blue;
}
h1 {
color: red;
padding: 60px;
}
</style>
</head>
<body>
<h1>This is a heading.</h1>
<p>This is a paragraph.</p>
</body>
</html>
With external CSS, you’ll link your web pages to an external .css file, which can be created by any text editor in your device (e.g., Notepad++, VSCode).This CSS type is a more efficient method, especially for styling a large website. By editing one .css file, you can change your entire site at once.
Follow these steps to use external CSS:
body {
background-color: blue;
}
h1 {
color: red;
padding: 60px;
}
<link rel="stylesheet" type="text/css" href="style.css" />
Don’t forget to change style.css with the name of your .css file.
Inline CSS is used to style a specific HTML element. For this CSS style, you’ll only need to add the style attribute to each HTML tag, without using selectors. This CSS type is not really recommended, as each HTML tag needs to be styled individually. Managing your website may become too hard if you only use inline CSS.
However, inline CSS in HTML can be useful in some situations. For example, in cases where you don’t have access to CSS files or need to apply styles for a single element only.
Let’s take a look at an example. Here, we add an inline CSS to the <p> and <h1> tag:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1 style="color:white;padding:30px;">This is a heading.</h1>
<p style="color:white;">This is a paragraph.</p>
</body>
</html>
CSS is applied to HTML elements in a web page by declaring specific styles for each element. A style declaration looks like this:
selector {
property: value;
}
Let’s look at each of these pieces separately:
The selector is the piece of content that we want to target and style. It is either an HTML element or a Class Name. When defining an HTML element, we use the tag name without the opening and closing bracket. For example, the <p> (or paragraph tag) would simply be: p
A Class Name always begins with a dot(.) For example, .container
Property and their respective values always live within curly braces:
p {
}
Properties are predefined terms within CSS that all web browsers understand. They are things like: font-family, font-size, color, etc. A property is always followed by a colon (:)
p {
font-family:
font-size:
}
The value is the particular style or variable you choose to assign to a property. A value is always followed by a semi-colon (;) For example:
p {
font-family: Arial;
font-size: 16px;
color: gray;
}
So the example above tells the browser that we want all of our page titles (or any element surrounded by an
tag) to be displayed in Arial font at 16 pixels in size and in the color gray. Pretty easy, right?
Let me know what you think about this article. I Hope this provided you an introduction to CSS.
Peace!