View source for CSS/C2/First-CSS-file/English

'''Title of the script: '''First CSS File

'''Author:''' Praveen S

'''Domain Reviewer: '''Ankita Maske, Om Prakash Soni

'''Novice Reviewer:''' Madhuri Ganapathi

'''Keywords: '''CSS, HTML, Web Page, Web Design, Web Technology, Video Tutorial, Spoken Tutorial, CSS Syntax, CSS Property, CSS Selector, CSS Declaration, Descendant Selector, Grouping Selector, Universal Selector Id Selector, Class Selector 



{| border="1"
|-
|| '''Visual Cue'''
|| '''Narration'''
|-
|| Slide: Title
|| Welcome to the Spoken Tutorial on '''First CSS File'''.
|-
|| Slide 2: 

Learning Objectives
|| In this tutorial we will learn,

* To create a '''CSS''' file 
* Syntax of '''CSS'''
* Linking a '''CSS''' file with the '''HTML''' file

|-
|| Slide 3: 

System Requirements

|| This tutorial is recorded using,

* '''Ubuntu Linux OS v 18.04 '''
* '''CSS3'''
* '''HTML5'''
* '''gedit Text Editor'''
* '''Firefox web browser'''

However you may use any other '''editor''' or '''browser''' of your choice.
|-
|| Slide 4: Prerequisite 

https://spoken-tutorial.org
|| To practise this tutorial, 

You should know to use any '''WYSIWYG '''or '''Text Editor''' and a '''Web Browser'''.

You should also have some basic knowledge of '''HTML.'''

If not, please go through the '''HTML '''tutorials on this website.
|-
|| Slide 5: Code Files
|| The files used in this tutorial are available in the '''Code Files''' link on this tutorial page.

Please download and extract them.

Make a copy and then use them while practising.
|-
|| Open Gedit
|| Now we will see how to create a simple '''CSS style''' file.

Open any '''text editor'''. 

I have already opened my '''gedit Text Editor.'''
|-
|| Slide: Syntax

selector {property: value}
|| This is the '''syntax''' to write the '''style''' for the '''HTML'''.

The '''syntax''' has two parts:

:'''Selector''' and '''Declaration'''
|-
|| Slide: Selector
|| The '''selector''' can be any one of the following:

* '''Element'''
* '''Descendant'''
* '''Grouping'''
* '''Universal'''
* '''Id'''
* '''Class'''

|-
|| Slide: Declaration
|| 
* '''Declaration''' assigns a particular '''property''' and '''value''' to the '''selector'''.
* We can declare multiple '''style properties''' for a '''selector''' using a '''semicolon'''.
* '''Declaration''' has to be written inside the braces.

|-
|| Slide: Syntax Example
|| Here is an example.
|-
|| Switch to gedit
|| Now let us start writing our '''CSS''' code.

Switch to the '''editor'''.
|-
|| [gedit]

body {

background-color: yellow;

}
|| First we will set the background color for the '''body''' as '''yellow'''.


To do so, type the code as shown.
|-
|| [gedit] Highlight: body
|| Here the '''selector''' is '''body''', a '''HTML tag.'''
|-
|| [gedit] Highlight: 

{

background-color: yellow;

}
|| Next I have declared the '''style''' within curly braces.

|-
|| [gedit] Highlight: 

background-color: yellow;
|| In the '''declaration''' part, '''background-color''' is the '''style property''' and '''yellow''' is its '''value'''.
|-
|| Only narration
|| Our code is ready. 

So let’s save this file now.
|-
|| Press '''Ctrl + S'''
|| I’ll press '''Ctrl + S '''keys on my keyboard.

The '''Save''' '''As''' dialog box opens.
|-
|| Select Desktop
|| Now choose the desired location to save your file.

I will select '''Desktop''' on my machine.
|-
|| Create Folder →my-css
|| I will create a folder with the help of the “'''Create Folder'''” button.

Then name the folder as '''my hyphen css'''.

Click on '''Create''' button.


This folder will help me to organize my '''css''' files in a single location on my machine.
|-
|| Filename → mystyle.css

|| I will name the file as '''mystyle.css'''


Please note that the '''CSS''' files have to be saved with '''.css''' file extension.
|-
|| Click on '''Save'''
|| Then click on the '''Save''' button. 

Our file is saved now.
|-
|| Open Desktop → my-css folder >> double-click to open
|| Let us check our saved file.

Go to the '''Desktop''' folder.

Here is the folder '''my hyphen css.'''

I will double-click to open it.
|-
|| Point to css file
|| This is the newly created '''CSS''' file.
|-
|| Only narration
|| We have successfully created our first '''CSS''' file and saved it.

Now let’s learn how to '''run''' it.
|-
|| Slide: Note
|| 
* '''CSS''' file is a dependent file.
* It must be '''linked''' with a '''HTML''' file to see the changes.

Let us link a '''CSS''' file to a '''HTML''' file.
|-
|| Point to Mypage.html in my-css folder
|| For this demonstration, we will use the file '''Mypage.html'''.

I have already downloaded this file and saved it in my practice folder.

The same file is available in the '''Code files''' link for practice.
|-
|| Right-click >> select '''Open With''' >> '''Select''' button
|| Right-click on the '''HTML''' file and select '''Open With Other Application '''option.
|-
|| Select '''Open With Firefox'''
|| Then choose any '''web browser''' that is available. 

I will choose '''Firefox'''.

Then click on '''Select''' button.

This will open our '''HTML''' file in the '''Firefox web browser'''.
|-
|| Highlight the background
|| The '''webpage''' opens.

Notice that the background color of the page is white.

Now let us set the background color to yellow with the help of our '''CSS''' file.
|-
|| Right-click >> select '''Open With'''
|| Switch to the folder.

Right-click on the '''HTML''' file and select '''Open With Other Application '''option.
|-
|| Select '''Open With gedit''' >> '''Select''' button
|| Then choose any '''text editor''' that is available. 

I will choose '''gedit'''.

Then click on '''Select''' button.

This will open our '''HTML''' file in the '''gedit text editor'''.
|-
|| [gedit - Mypage.html]

Type:

<link rel="stylesheet" href="mystyle.css">
|| Inside the '''head''' section next to the '''title tag''', type the code as shown.
|-
|| Highlight

<link rel="stylesheet" href="mystyle.css">
|| This will '''link''' the '''mystyle.css''' file which we created earlier, to this '''HTML''' file.
|-
|| Press Ctrl + S
|| Save the file.
|-
|| Switch to firefox
|| Switch to the '''browser''' and refresh the page.
|-
|| Highlight the output
|| Observe the output.

Now the background color is set to yellow.
|-
|| Switch to mystyle.css
|| Let’s do some more changes in the '''CSS''' file.

Switch to the '''mystyle.css''' file.
|-
|| [gedit - mystyle.css]

Type:

h1 { 

color: blue;

text-align: center;

}
|| Next to the '''body''' '''tag''', type the code as shown here.

This will set the text color to blue and align the content of '''h1 heading tag '''to the centre.
|-
|| Press Ctrl + S
|| Save the file once again.
|-
|| Switch to firefox
|| Switch to the '''browser''' and refresh the page.
|-
|| Highlight the output
|| Observe the output.

Now the text appears in blue colour and it is '''center-aligned.'''
|-
|| Only narration
|| So far, we have learned to set '''styles''' for the '''HTML element''' as a '''selector'''.

We also declared single and multiple '''style properties''' for the '''selector'''.

Now let us learn about the usage of other '''selectors'''.
|-
|| Slide: Selectors
|| 
* '''Descendant''' - This will set the '''style''' if a defined '''element''' comes inside a particular '''element'''
* '''Grouping''' - This will set the same '''styles''' for multiple '''elements'''
* '''Universal''' - This will set the '''styles''' of all the '''HTML elements '''at the same time
* '''Id''' - This will set the '''style''' for a single unique '''element'''
* '''Class''' - This will set the '''style''' for more than one '''element'''

Let us see some examples for this.
|-
|| Slide: Descendant Selector
'''p b {color: green;}'''
||'''Descendant'''.
In this case if the '''bold tag''' comes inside the '''paragraph tag''', text color will be set to green.

For this we have to give a '''space''' between the '''elements'''.
|-
|| Show example of Descendant Selector
|| Here is an example for '''Descendant Selector'''
|-
|| Slide: Grouping Selector
'''h1, h2, h3 { background-color: red;}'''
|| '''Grouping'''.
In this case the background colour for '''h1, h2 '''and''' h3 tags''' will be set to red.

For this we have to use a '''comma '''between the '''elements.'''
|-
|| Show example of Grouping Selector
|| Here is an example for '''Grouping Selector'''.
|-
|| Slide: Universal Selector
'''* {color: blue} '''
||'''Universal'''.
This will set the text color for the entire page to blue.

Here instead of '''element''' names, we have to use an '''asterisk symbol''' as a '''selector.'''
|-
|| Show example of Universal Selector
|| Here is an example for '''Universal Selector'''.
|-
|| Slide: id Selector

'''#list1 {color: blue;}'''
|| '''id'''.
In this case, in '''CSS''' we have a '''hash symbol''' and a name next to the '''id''' as a '''selector'''.
|-
|| Slide: id Selector

'''<nowiki><ul id="list1"></nowiki>'''

:'''<nowiki><li>HTML</li></nowiki>'''

:'''<nowiki><li>CSS</li></nowiki>'''

:'''<nowiki><li>Java Script</li></nowiki>'''

'''<nowiki></ul></nowiki>'''
|| In '''HTML''' we have to use '''id =''' name of the''' id''' in '''double quotes''' inside the respective '''element’s''' start '''tag'''.
|-
|| Show example of id Selector
|| Here is an example for '''id Selector'''.
|-
|| Slide: class Selector

'''. list1 {color: blue;}'''
|| '''Class'''.
In this case, in '''CSS''' we have a '''dot operator''' and a name of the '''class''' as a '''selector'''.
|-
|| Slide: class Selector

'''<nowiki><ul class="list1"></nowiki>'''

:'''<nowiki><li>HTML</li></nowiki>'''

:'''<nowiki><li>CSS</li></nowiki>'''

:'''<nowiki><li>Java Script</li></nowiki>'''

'''</ul>'''
|| In '''HTML''' we have to use '''class = '''name of the''' class''' in '''double quotes''' inside the respective '''element’s''' start '''tag'''.
|-
|| Show example of class Selector
|| Here is an example for '''class Selector'''.
|-
|| 
|| Try these on your own.

With this we have come to the end of this tutorial. 

Let us now summarize.
|-
|| Slide 6: Summary 

|| In this tutorial, we have learnt:

* How to create a '''CSS '''file
* Syntax of '''CSS'''
* About types of '''Selectors'''
* Style '''Declaration'''
* Linking a '''CSS '''file with a '''HTML '''file

|-
|| Slide 8: Assignment
|| As an assignment-

* Create a '''styles.css''' file using any '''text editor'''
* Set the '''background '''as '''lightblue'''
* Create a '''webpage.html''' using any '''text editor'''
* Link the '''styles.css''' file to '''webpage.html''' file
* Observe the output on the '''web browser'''

|-
|| Slide 9:

About Spoken Tutorial project
|| The video at the following link summarises the Spoken Tutorial project.

Please download and watch it.
|-
|| Slide 10: Spoken Tutorial Workshops
|| The Spoken Tutorial Project team conducts workshops and gives certificates.

For more details, please write to us.
|-
|| Slide 11:

Answers for THIS Spoken Tutorial
|| Do you have questions in THIS Spoken Tutorial?

Please visit this site.

Choose the minute and second where you have the question

Explain your question briefly

The Spoken Tutorial project will ensure an answer

You will have to register to ask questions
|-
|| Slide 12:

Forum for specific questions:

|| The Spoken Tutorial forum is for specific questions on this tutorial.

Please do not post unrelated and general questions on them.

This will help reduce the clutter.

With less clutter, we can use these discussions as instructional material.
|-
|| Slide 13: Acknowledgement
|| Spoken Tutorial project is funded by Ministry of Education (MoE), Govt. of India.
|-
|| Slide 14: Thanks
|| The script for this tutorial is contributed by Praveen

and this is Madhuri Ganapathi from IIT Bombay.

Thank you for watching.
|-
|}