Connect with us

Getting Started Coding in CSS – A Learning Journey to Web Development

css

Getting Started Coding in CSS – A Learning Journey to Web Development

Welcome back to the learning journey again. We’ve made good progress over the last weeks covering the basics of HTML. Now that we have an understanding of HTML, we’re going to spice things up by learning the basics of styling a web page. Today we’ll discuss the fundamentals and some basic syntax so that we can start coding in CSS right away.

N.B. This post is a part of the series ‘A complete learning journey to web development’ where we are learning web development from the ground up. Be sure to join us there.

What is CSS?

CSS, an acronym for Cascading Style Sheets, is a styling language for other markup languages like HTML, XML, SGML etc. CSS doesn’t have any use of its own. It integrates with other languages to provide visual properties.

Think about the websites you browse everyday. They all have their unique visual identity through the presentation of their content. Imagine how they’d look like if they didn’t have any styles! Not much pretty, right?

Why CSS?

HTML is a language that only gives documents a structural meaning. It was never intended for styling the document. But soon after when the internet became popular, the need of styling arose pretty aggressively.

As a result, some styling element like <font>, <center> etc was introduced in HTML 3.2. But that didn’t bring much good. Firstly, it was violating the main purpose of HTML. Styling documents with a language that only meant to provide structural meaning were inappropriate.

Secondly, It was a huge headache for developers to style with those elements because they had to write styling code separately for every single HTML elements. Also, they had to use the table element to create layout of the page, which is pretty messy (and semantically wrong) to work with.

So, that approach didn’t last very long. Realizing the unavoidable need of styling, W3C introduced CSS – a powerful language for creating layouts, positioning content and styling the web pages.

Benefits of CSS

CSS made life easier and more colorful for everyone. It has the power to tweak every visual aspect of a web page. So, soon after it’s release, the web became a beautiful place for the user.

On the other hand, it provided developer much more flexibility to style their pages. CSS files are usually created separately and later linked with HTML files to work together. Using that nature, styles of several HTML pages, or in-fact, of all the pages on a website, can be maintained from one single CSS file. Same way, A single HTML page can have several stylesheets too. Cool, right?

Coding in CSS

So let’s get into it! We already know about HTML elements and tags. The way CSS work is simple. First, You have to select an element from your HTML page. Then you can declare styles for it by changing the value of predefined CSS property. Let me break it down for you.

Let’s say you have a paragraph on your HTML page. You want your paragraph to appear in the middle of the screen instead of on the left side, and you want it to be colored red. Now, you need to tell CSS this: I want my paragraph to be colored red and to be aligned center of the screen.

1p { color: red; text-align: center;}

Here, p is your paragraph element. You are selecting the paragraph using its element name. This is called CSS selector. After the selector, begins the curly braces. Everything you put between the curly braces applies on the element you’ve selected. In this case, the paragraph.

Inside the curly braces, the first thing that appears is color. The color is a property of CSS. It lets us change the color of our element by setting its value to any color we wish. In the above case, we have it set to red. Then the statement ends with a semicolon.

Same way, text-align is another CSS property that lets us set the position of our HTML elements. In this case, we said center. Which means, we want our paragraph to be center aligned.

Then comes the closing curly braces which indicate the ending of this declaration. We can start another declaration outside the braces, or we can add more property and change their value inside the braces.

The class and id Selectors

The style rule we just wrote will make every single paragraph on HTML page to appear red and center aligned. But in real case scenario, most of the time we’ll want to style different elements differently. We’ll have to use a more specific selector to do that.

The element name isn’t the only way to select an element from HTML page. We can use class and id attribute on any HTML element so that we can select it specifically in our CSS. Let’s say, we have five paragraph on a page. We want only one of them to be red. To achieve that, we can set id on that particular paragraph, so that we can distinguish it later easily.

The HTML code would look like this:

<p>La La La La La</p> <p>La La La La La</p> <p id=”pa”>Pa Pa Pa Pa Pa</p> <p>La La La La La</p> <p>La La La La La</p>

And the CSS would be:CSS

#pa { color: red;}

Everything works the same way except that to use an id selector, you have to put ‘#’ before the name of the id.

Again, let’s say we have five paragraph on a page and we want three of them to be colored blue. Maybe because they have some kind of correlation between them. We can group them together by applying the same class name on them. Like this:

<p class=”la”>La La La La La</p> <p class=”la”>La La La La La</p> <p id=”pa”>Pa Pa Pa Pa Pa</p> <p>Ma Ma Ma Ma Ma</p> <p class=”la”>La La La La La</p>

And the CSS:CSS

.la {color: blue;}

Here, by selecting the class, we apply the same style to every element which has the class name of ‘la’. We don’t have to style them separately.

Remember, id is used to distinguish a unique element on a page. Hence, an id should be only used once in the whole page. On contrast, class is used to group together related content. The same class can be given to any number of element and they’ll all belong to one single group.

Yet still, this is not all there is about selector. Selectors can be combined together to create even more specific selectors. Understanding selector is extremely important for coding in CSS. We’ll have a dedicated post on it soon.

Applying CSS to your HTML file

There is three main way to connect CSS with your HTML file. They are:

  • Inline Stylesheet
  • Internal Stylesheet
  • External Stylesheet

Inline Stylesheet

You can apply style to an HTML element directly by writing CSS in the style attribute on that element. You can change the color of a paragraph this way:

<p style=”color: red;”>I’m a red paragraph.</p>

You can write any type of CSS code within the style attribute. But for some reason, which we’ll discover later, this is the least preferred method to write CSS.

Internal Stylesheet

In this method, All the CSS code resides in a style tag within the <head> element of an HTML file. The same code above could be written like this:Inline CSS

<!DOCTYPE html> <html>  <head>    <style>      p { color: red; }    </style>  </head>     <body>    <p>I’m a red colored paragraph.</p>  </body> <html>

External Stylesheet

The best and the most preferred way to write CSS is to create an entirely separate file of .css extension and then connecting that file using <link> tag in HTML. That way, you can keep all your CSS code detached from your HTML code which is great for maintainability.

To do this, create an empty file in the same directory where you have your HTML file. Name it whatever you want, but be sure the make the extension ‘.css’.

After that, open your HTML file and add link tag in the head section like this:The ‘link’ tag

<head>    <title>Your page title</title>    <link rel=”stylesheet” type=”text/css” href=”style.css”> </head>

The rel attribute specifies the relation between that file and your HTML file, type is the type of your file, and href specifies the path where your file is situated. If you have the file in the same directory, writing only the file name is enough.

After that, you can start coding in CSS in your newly created file and all those codes will be applied to your HTML file.

Exploring CSS style properties

Enough of bla bla. It’s your turn. Now you know enough to start coding in CSS. But only changing the color of text won’t satisfy you, I know. You need to know some more styling property of CSS. Check out this list of properties and learn more about them. You can click on any property name and have a detailed explanation on it.

Don’t be overwhelmed by seeing those numerous properties, you don’t have to memorize them. You won’t be using all of them either. Just explore and try out some of them on your own to see what happens. We’ll discuss the most important properties in upcoming posts.

Visit CSS Zen garden to get an idea on how much effect can CSS have on an HTML page. Try out different stylesheet and it’ll inspire you for sure.

Conclusion

That’s it for today. Try out some CSS and let me know your experience. I remember my first time, I was amazed by my ability to put ugly looking background color on texts. Also, feel free to ask me any question and don’t forget to share this post on your social network.

Hope you have a good time coding in CSS. Keep mistaking and I’ll see you again soon.

Continue Reading
Click to comment

Leave a Reply

Your email address will not be published. Required fields are marked *

More in css

About Me:

Szabi Kisded

Hey there, I'm Szabi. At 30 years old, I quit my IT job and started my own business and became a full time WordPress plugin developer, blogger and stay-at-home dad. Here I'm documenting my journey earning an online (semi)passive income. Read more

Sign up for my newsletter and get the YouTube Caption Scraper WordPress plugin for free
(worth 29$)!

All My Plugins In A Bundle:

My AutoBlogging Plugins:

My Online Courses:

A Theme I Recommend:

Featured Posts:

To Top