Introduction to CSS | What is CSS? | How to add CSS? | Web Development for Beginners

Welcome to Introduction to CSS. CSS stands for Cascading Style Sheets & it is a fundamental part of web design because it controls how your web pages look. Without it, websites would only be able to display text on white backgrounds. Over the course of a few videos, I’ll cover all the foundations of CSS. Starting from how CSS is structured, to frequently used CSS styles like colors, fonts, spacing and the various ways CSS let’s you layout a page.

We’ll be learning about CSS from the ground up so you don’t need any prior knowledge about CSS at all. However, a basic understanding of HTML and being comfortable with using a text editor will help you get the most out of these tutorials. If at any point you have any questions about HTML I’d encourage you to check out my HTML tutorials, the link to which is above & in the description below. So, let me begin by first showing you a demo of what CSS can do. At this site, csszengarden.com they’ve done a really great job of showing the power of CSS.

Let me show you how. So, this is the homepage of the site. Now, I clicked here and downloaded just the HTML of this site. So now, we have this same site with just the HTML & no CSS.

It looks really plain. If you inspect, you will see the HTML that was used to construct it. They have used all the semantic elements like section, header, aside etc. Now this website encourages people to submit their own CSS to transform this plain HTML file into a stylized webpage.

So if I go back to their homepage & click on one of these designs here, you can see that this is one person’s CSS style sheet for styling this same web page.

And now again without changing any of the HTML at all, someone else added their own styles. It looks completely different. It’s the same exact HTML but it looks completely different. Similarly, many other people have added their own styles to this same web page & they all give a completely different look. That’s the power of CSS.

But, CSS wasn’t always around. It was first released by the World Wide Web Consortium in 1996.

So, before CSS, there were HTML tags like <font> that were distinctly about color, size and things like that. But, developers started hating these kind of tags that were used just for styling. As they made the documents unnecessarily complex & difficult to read.

They wanted to separate style from content. So, they started adding style attributes to the tags. For example here on this h1 tag you can add the style attribute and simply write “color:red”. And what this is going to do is it’s going to make this particular h1 heading red. It’s a nice way to just go in and add simple styling to your page.

However, this still kind of breaks our rule of wanting to separate content from style. And it’s really time consuming, because if you had multiple web pages on your website & wanted them all to have a consistent look & later wanted to change the h1 to, say, blue or green, then you will have to go in and change the style attribute on each h1 tag on each page. So, when CSS was officially released, it solved all these problems. Cascading style sheets are basically a way for you to write rules that say how you want to style all the paragraphs, or headings, or any other html tags. And the syntax or rules are set up like this.

First you have to write your selector, and selector is just kind of a fancy way of saying what it is you want to style.

In our case, we’ll start off by just giving the selector different tag names such as h1 or p. Once you find which tag it is you want to style, you say which property it is you want to change. By property, we mean things such as color, font-size or how much space we put around the tag. There are many properties in css.

But for now, let’s just start off really simple and deal with colors.

Then, you have to give each property a value, saying which color you want it to be. And the syntax here is really important. A lot of times, when you write HTML, the browser is really nice to you and if you forget to close a tag it’ll still go ahead and display the page anyway.

But, when you’re doing CSS, if you’re careless about your syntax, you’re not going to see what you expected on the page.

So, the brackets and the semicolons are very important. You have an opening curly / brace bracket and a closing curly bracket, and in between the brackets, you have this declaration which includes the property & value separated by a colon. And then there is a semicolon right at the end of this entire declaration. You can have multiple declarations inside these brackets for a single tag, each one separated by semicolons. Maybe, you wanted the background color of this h1 to be yellow, then you can write this.

And, what this code does is that, whenever the browser sees any h1 heading, it makes it blue & it’s background yellow. All right so now that you know how to write a CSS rule, how do we actually get it to work? So now, let’s talk about how we can include it in our HTML.

There are three different ways of inserting a style sheet to the HTML. Inline, Internal & External.

The inline method is the one which we saw earlier. It uses a style attribute which is added to the opening HTML tag of an element. It is mostly used to apply a unique style for a single element. So, in this case only this paragraph is going to turn red.

You can even add multiple styles here to the same paragraph as we saw earlier but the more you add, the harder it becomes to read.

So, use the inline method sparingly, if at all, because it is hard to manage. This method is also not reusable since it’s applied directly to each element. What if you had 100 paragraphs & wanted to style them all? You would have to add the style to each one. Also, CSS added by any other method is overwritten by these inline styles, creating more potential for conflict with other CSS style rules.

About this we are going to see in just a bit. The second method of adding CSS is the Internal Style Sheet method. This method is more flexible than the inline method because instead of adding styles to each individual element, the style rules defined by us are used to style all the matched elements on that page. In this, the CSS is added between the style tag in the head of the document. So what happens now is that when the browser opens your page, it gets to the head section and sees all your CSS rules.

And so it’s going to know to go through your page and apply those rules to all the h1 tags on the page. And if you have multiple rules including paragraphs, images, things like that, it’s going to apply the styles to all instances of those elements in the entire file. So, internal style sheets are really nice when you’re just trying to style up one page. But imagine if you had a site with multiple HTML pages and you wanted them all to have a very consistent look.

You would have to copy this style block to every single page to duplicate the styles.

So, instead what you want to do is, you want to use the third method of adding CSS which is called the External Style Sheet method. In this method you put your CSS rules in a different file. Let me show you how to do that. Open a file & save it something like style with a .css file extension.

Then write your rules in the file & after that all you need to do is add a link to the file into the head section of your HTML document. That is done with the help of the link element.

The link tag has two attributes, reel and href. Rel stands for the relationship and uses the value of stylesheet, the href value is the path to the CSS file. Link is an empty element so it doesn’t need a closing tag.

You may also see another attribute inside it, type=”text/css”, this was required in the previous versions of HTML, but is no longer needed in HTML5, the latest version, but if it’s there it doesn’t hurt either.

So now, what happens is that, every single HTML file that links to the external style sheet will all share that style sheet. So if you had a site with say a 1000 pages and you decide to change that color from blue to red or something like that? Then all you need to do is open up style.css, change one line of code, and you’ve now just changed potentially thousands of pages.

That is great! So, it’s always recommended to use External Style sheets whenever possible as it’s easier to manage code & you can actually separate the style from content making it easier to read & understand code. Now another thing I wanted to talk about is Code Placement. When you write code, it is important to get into the good habits of organizing your code. While there are no specific rules about how and where to place your code, there are definitely conventions.

The most common organization is to have one main folder with your html files in it.

And then you have a subfolder called “assets” with further subfolders for your CSS files, image files & JavaScript files. So as you can see, my assets folder which has the css is in the same directory as my html files. Therefore, my link to be added in the head section of my HTML will be: <link reel=”stylesheet” href= “assets/CSS/style.css”> Now finally, let’s talk about this idea of cascading style sheets.

What does it mean by Cascading? Well, when the browser starts making your page, the first thing it’s going to look at is its default styles. It will be like, ok, maybe they’re not telling me anything. How do I normally make h1 headings? How big do I make that font?

But then it goes, and it looks and says, oh are there any external style sheets? Because if so, I’m going to overwrite my browser defaults and put in the rules that are in the external style sheet instead.

Next it’s going to check for internal style. That style you have in the head section. Because in general, the browser thinks, well, maybe there’s something really special about this particular page, and here they want me to do these rules instead.

Finally, any of those inline styles where you use the style attribute, those are going to have the highest precedence of all. And as you can see the inline styles will override any external, internal & browser defaults for the same HTML elements. Which is why you really want to avoid using any inline style because it pretty much nullifies all your styling rules. So, now we know how those four styles, browser, external, internal & inline go.

But what if you’ve linked to two or three different style sheets, and that same h1 has been defined to be red, blue, and green, but in different files.

How does the browser know what to do? Well, how it works is that the rules from the most recent file have precedence. And that means the browser goes up into the head section and goes one, two, three, and it kind of looks at what order you listed them, and the last one you listed is the one that’s going to have precedence.

Now let’s look at another case. What if you’ve written h1 multiple times in a particular file.
This can actually happen quite a bit. Especially if there is a lot of code & you forget that you’ve already written rules for a particular element. Well, if that’s the case, once again, the browser’s going to look at the one it saw last.

So, in this case, I have two rules for h1. One is color: blue & font-family: Arial & the other one is color: red.

How the browser’s going to look at this is, it’s going to start reading from the top to bottom, & when it sees another set of rules for the same element, it’s going to go ahead and apply those. It’s just always is going to use the last one it saw. So, in this case the h1 gets the color red.

The font is still Arial as we did not change that. Same goes for writing multiple rules with same properties inside the same declaration block.

The browser always uses the last one it sees. There is, however, one way to overwrite this.

Suppose you’re writing something, and you really don’t want that style to be overwritten by any other styles, then you can use the! Important keyword like this. the important keyword will override source order and specificity.

It’s added to the end of the style declaration but just before the semicolon.

The only way you can override a style declaration with important is to use a selector with a higher specificity and the important keyword. That can get pretty messy so it’s useful to know how important works in case you encounter it in other projects or examples, but it’s generally considered bad practice because it doesn’t really adhere to any rules. So yeah, that’s what Cascading means : a specified priority sequence to determine which style rule applies if more than one rule matches a particular element. We covered a lot of technical stuff today which is very essential to start learning CSS.

But this is just the beginning. There are so many things you can do with CSS. And I will be covering many interesting things in the upcoming tutorials. So, come on with me & let’s create something together.

This is Juthika signing off, until next time, keep learning & keep coding.

System

https://clickbankprofit.biz/access/268.htm