Learn programming! Today we learn CSS!

Greetings, my friends! In my pervious lessons, we learnt, what is Internet, how browser works and some basic HTML. Here are the links to my tutorials:

1. The Beginning

2. HTML basics

Today we start learning CSS!

CSS or Cascading Style Sheet is a programing language created for web design. With CSS, it is very easy and simple to create beautiful pages, apps and websites!

Firstly, we have HTML code, but where CSS code goes?

We have three options:

Put it inside a "style" attribute
Put is in "style" tag
Put it in external file

If we go for first option, here is how it looks like:

< p style = "here goes CSS code"> My paragraph. </ p >

If we go for second option:

< style > CSS code goes here </ style >

< p > My paragraph. </ p >

Third option is the best option. We just create .css file, inside the folder where we created .html file. For this to work, we need to put < link > tag inside HTML file to link HTML and CSS. I will explain this in my next tutorial. For this tutorial, imagine that we have already linked these two files and all HTML and CSS codes are in separate files.

CSS syntax is also very simple. First we need a selector. Selector is HTML element ( tag names ), which we want to style. After the selector, we need to put a declaration block. Here is an example:

selector { this is a declaration block }

Inside declaration block goes properties and their values. Properties are specific things, which we want to style on selected element. They can be it's font, color, border, background color... Here is an CSS code example for changing text in every paragraphs to red ( default is black ).

p { color: red; }

From HTML lesson, we know that the < p > tag is for paragraphs. For CSS, we only need it's name, which is "p".

We can put as many different properties, inside the declaration block, as we want. Example:

p { color: red; margin: 10px; padding: 20px; background-color: blue; }

We will focus on properties later, first we need to learn enough about selectors.

Here is a HTML code:

< p >

< h1 > This is my heading. </ h1 >

< p > This is a paragraph. </ p >

</ p >

We have one paragraph and one heading inside second paragraph. If we style an element that contains other elements (parent), contained element (child) will inherit it's parents style. So, if we put in CSS that p tag will have blue text color, elements inside it will also have it.

Important is to know, that when we put a p tag as selector, CSS will influence on every paragraph in our HTML document. Also, if we put heading one (h1) as selector, it will influence on every h1 in our HTML. How can we influence only on h1 that is inside a p (paragraph) ?

Simple, we just put this selector:

p h1 { declaration block }

Whatever is in declaration block, will influence on every h1 tag, that is inside p tag. Now, if h1 was not inside p tag, but if it was above it, how could we influence on both of them?

< h1 > text1 </ h1 >

< p > text2 </ p >

Here is a CSS:

h1, p { declaration block}

Now the same declaration block will influence on every p and h1 tag in our HTML.

Know, if we have two p tags, but we want to style only one, how do we do that? Well, I need to introduce to you new HTML attribute, named id. Example:

< p id = "first_paragraph" > text1 </ p >

< p > text2 </ p >

We have given an id for first paragraph. We could give id to second one too, but it just need to have different name, because one id name can be used only once!

Now, when we have given an id for first paragraph, here is how to style only first paragraph:

#first_paragraph { declaration block }

We just put "#" and id name, after it and that is it. We have styled only first paragraph. But, what if we want to have same style for one heading and one paragraph, but not other headings and other paragraphs?

In this case, we need HTML attribute named class. When we crate one class, by giving it a name, we can put that same class for unlimited,ited number of other elements.

< h1 class = "my_class"> text1 </ h1 >

< p class = "my_class" > text2 </ p >

Now when we style "my_class", heading and paragraph will be styled.

.my_class { declaration block }

For classes, we use "." not "#".

This will be all for today. If you want to experiment with selectors here is a code for you to copy:

< html >

< head ></ head >

< body >

< style >

Put your CSS code here

</ style >