HTML and CSS Basic Styling
Cascading Style Sheets, also generally known as CSS, is a language that allows you to style your HTML code and presentation. CSS, in conjunction with HTML and JavaScript, are the driving technologies that help power the internet and World Wide Web. In this blog post, we are going to focus on HTML and CSS, and highlight how CSS allows you to alter the format, color, and layout of your HTML.
Basic HTML without CSS
First, we are going to create a basic HTML web page without styling. In your coding studio, create an index.html file and begin to fill out your HTML skeleton. Remember to start your HTML code with <!DOCTYPE html> and the opening and closing <html> tags.
Let’s get started:
<!DOCTYPE html><html><head><h1>Hello </h1></head><body><h2>This is an HTML and CSS Tutorial</h2></body></html>
Here is our basic HTML skeleton. Recall that your head will appear at the top of the page, and the body will appear below that. In addition, remember there are 6 total heading tags, ranging from <h1> to <h6>, with <h1> being the largest and most prominent heading. Therefore, the <h1> tag in the head is going to appear larger than the <h2> tag found in the body. Now, let’s take a look at how our webpage looks as a result of this HTML code.
Styling with CSS
As you can see, this webpage is bland and boring. There is zero coloring and formatting to it. But, this is changeable with CSS. CSS allows us to customize the display of our HTML code by changing the alignment, formatting, and coloring of the entire page. Let’s try adding some color to our webpage.
There is more than one way to write CSS code. You can add it directly to your html code, or you can create another file specifically for your CSS code. For purposes of this tutorial, we are going to use the latter method. However, this does require you add an extra line or two into your HTML code. First, you are going to want to create your CSS file, and name it style.css. Afterwards, you are going to want to update the current HTML skeleton to include this specific line of code: <link rel=”stylesheet” href=”style.css”/>. Your updated HTML code should now look like this:
<!DOCTYPE html><html><head><link rel="stylesheet" href="styles.css"/><h1>Hello </h1></head><body><h2>This is an HTML and CSS Tutorial</h2></body></html>
Adding this specific line allows your HTML code to gain access to the code written in your style.css file. Now, we can begin to write CSS code. In this first example, we are going to change the background color of the webpage only. To do this, you are going to write the following code in your style.css file:
body{background-color: turquoise;}
This should have accomplished our goal of changing the background color to turquoise. Let’s take a look to see if this was the case.
We were able to successfully change the background color of our webpage. Now, let’s work on changing the styling of our “Hello” and “This is an HTML and CSS Tutorial” heading. Here is the following code to change our <h1> and <h2> headings. Add this to your style.css file.
h1{color: white;text-align: center;border: 4px red solid;}h2{color: black;text-align: center;border: 4px brown dashed;}
This code should have centered both headings, while making the texts white and black respectively. Borders have been added to both headers, and have been aligned to the center. Let’s take a look at the outcome:
Conclusion
I hope you found this mini CSS and HTML tutorial helpful. Remember, CSS allows you to add styling to your HTML code and web page. There are many ways to customize your webpage with CSS. This demonstration only gave you a small glimpse of what CSS can do. But, next time you visit a website, just remember that it was likely styled with CSS (: