Difference between revisions of "CSS/C2/First-CSS-file/English"

From Script | Spoken-Tutorial
Jump to: navigation, search
(Created page with "'''Title of the script: '''First CSS File '''Author:''' Praveen S '''webDomain Reviewer: '''Ankita Maske, Om Prakash Soni '''Novice Reviewer:''' Madhuri Ganapathi '''Keywo...")
 
Line 3: Line 3:
 
'''Author:''' Praveen S
 
'''Author:''' Praveen S
  
−
'''webDomain Reviewer: '''Ankita Maske, Om Prakash Soni
+
'''Domain Reviewer: '''Ankita Maske, Om Prakash Soni
  
 
'''Novice Reviewer:''' Madhuri Ganapathi
 
'''Novice Reviewer:''' Madhuri Ganapathi
Line 71: Line 71:
  
 
selector {property: value}
 
selector {property: value}
−
|| This is the syntax to write the style for the '''HTML'''
+
|| This is the '''syntax''' to write the '''style''' for the '''HTML'''.
  
−
The syntax has two parts:
+
The '''syntax''' has two parts:
  
−
'''Selector''' and '''Declaration'''
+
:'''Selector''' and '''Declaration'''
 
|-
 
|-
 
|| Slide: Selector
 
|| Slide: Selector
Line 91: Line 91:
 
||  
 
||  
 
* '''Declaration''' assigns a particular '''property''' and '''value''' to the '''selector'''.
 
* '''Declaration''' assigns a particular '''property''' and '''value''' to the '''selector'''.
−
* We can declare multiple style '''properties''' for a '''selector''' using a '''semicolon'''.
+
* We can declare multiple '''style properties''' for a '''selector''' using a '''semicolon'''.
 
* '''Declaration''' has to be written inside the braces.
 
* '''Declaration''' has to be written inside the braces.
  
Line 111: Line 111:
 
}
 
}
 
|| First we will set the background color for the '''body''' as '''yellow'''.
 
|| First we will set the background color for the '''body''' as '''yellow'''.
 +
  
 
To do so, type the code as shown.
 
To do so, type the code as shown.
Line 148: Line 149:
 
|-
 
|-
 
|| Create Folder →my-css
 
|| Create Folder →my-css
−
|| Then I will create a folder with the help of the “'''Create Folder'''” button and name it as '''my hyphen 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.
 
This folder will help me to organize my '''css''' files in a single location on my machine.
Line 155: Line 161:
  
 
|| I will name the file as '''mystyle.css'''
 
|| I will name the file as '''mystyle.css'''
 +
  
 
Please note that the '''CSS''' files have to be saved with '''.css''' file extension.
 
Please note that the '''CSS''' files have to be saved with '''.css''' file extension.
 
|-
 
|-
 
|| Click on '''Save'''
 
|| Click on '''Save'''
−
|| Then, click on the '''Save''' button.  
+
|| Then click on the '''Save''' button.  
  
 
Our file is saved now.
 
Our file is saved now.
Line 183: Line 190:
 
||  
 
||  
 
* '''CSS''' file is a dependent file.
 
* '''CSS''' file is a dependent file.
−
* It must be linked with a '''HTML''' file to see the changes.
+
* It must be '''linked''' with a '''HTML''' file to see the changes.
  
 
Let us link a '''CSS''' file to a '''HTML''' file.
 
Let us link a '''CSS''' file to a '''HTML''' file.
Line 194: Line 201:
 
The same file is available in the '''Code files''' link for practice.
 
The same file is available in the '''Code files''' link for practice.
 
|-
 
|-
−
|| Right-click >> select '''Open With'''
+
|| Right-click >> select '''Open With''' >> '''Select''' button
 
|| Right-click on the '''HTML''' file and select '''Open With Other Application '''option.
 
|| Right-click on the '''HTML''' file and select '''Open With Other Application '''option.
 
|-
 
|-
Line 201: Line 208:
  
 
I will choose '''Firefox'''.
 
I will choose '''Firefox'''.
 +
 +
Then click on '''Select''' button.
  
 
This will open our '''HTML''' file in the '''Firefox web browser'''.
 
This will open our '''HTML''' file in the '''Firefox web browser'''.
Line 216: Line 225:
 
Right-click on the '''HTML''' file and select '''Open With Other Application '''option.
 
Right-click on the '''HTML''' file and select '''Open With Other Application '''option.
 
|-
 
|-
−
|| Select '''Open With gedit'''
+
|| Select '''Open With gedit''' >> '''Select''' button
 
|| Then choose any '''text editor''' that is available.  
 
|| Then choose any '''text editor''' that is available.  
  
 
I will choose '''gedit'''.
 
I will choose '''gedit'''.
 +
 +
Then click on '''Select''' button.
  
 
This will open our '''HTML''' file in the '''gedit text editor'''.
 
This will open our '''HTML''' file in the '''gedit text editor'''.
Line 233: Line 244:
  
 
<link rel="stylesheet" href="mystyle.css">
 
<link rel="stylesheet" href="mystyle.css">
−
|| This will link the '''mystyle.css''' file which we created earlier, to this '''HTML''' file.
+
|| This will '''link''' the '''mystyle.css''' file which we created earlier, to this '''HTML''' file.
 
|-
 
|-
 
|| Press Ctrl + S
 
|| Press Ctrl + S
Line 286: Line 297:
 
|| Slide: Selectors
 
|| Slide: Selectors
 
||  
 
||  
−
* '''Descendant''' - Will set the style if a defined element comes inside a particular element
+
* '''Descendant''' - This will set the '''style''' if a defined '''element''' comes inside a particular '''element'''
−
* '''Grouping''' - Will set the same styles for multiple elements
+
* '''Grouping''' - This will set the same '''styles''' for multiple '''elements'''
−
* '''Universal''' - Will set the styles of all the '''HTML elements '''at the same time
+
* '''Universal''' - This will set the '''styles''' of all the '''HTML elements '''at the same time
−
* '''Id''' - Will set the style for a single unique element
+
* '''Id''' - This will set the '''style''' for a single unique '''element'''
−
* '''Class''' - Will set the style for more than one element
+
* '''Class''' - This will set the '''style''' for more than one '''element'''
  
 
Let us see some examples for this.
 
Let us see some examples for this.
 
|-
 
|-
 
|| Slide: Descendant Selector
 
|| Slide: Descendant Selector
−
|| '''p b {color: green;}'''
+
'''p b {color: green;}'''
−
 
+
||'''Descendant'''.
 
In this case if the '''bold tag''' comes inside the '''paragraph tag''', text color will be set to green.
 
In this case if the '''bold tag''' comes inside the '''paragraph tag''', text color will be set to green.
  
Line 305: Line 316:
 
|-
 
|-
 
|| Slide: Grouping Selector
 
|| Slide: Grouping Selector
−
|| '''h1, h2, h3 { background-color: red;}'''
+
'''h1, h2, h3 { background-color: red;}'''
−
 
+
|| '''Grouping'''.
 
In this case the background colour for '''h1, h2 '''and''' h3 tags''' will be set to red.
 
In this case the background colour for '''h1, h2 '''and''' h3 tags''' will be set to red.
  
Line 312: Line 323:
 
|-
 
|-
 
|| Show example of Grouping Selector
 
|| Show example of Grouping Selector
−
|| Here is an example for '''Grouping Selector'''
+
|| Here is an example for '''Grouping Selector'''.
 
|-
 
|-
 
|| Slide: Universal Selector
 
|| Slide: Universal Selector
−
|| '''* {color: blue} '''
+
'''* {color: blue} '''
−
 
+
||'''Universal'''.
 
This will set the text color for the entire page to blue.
 
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.'''
+
Here instead of '''element''' names, we have to use an '''asterisk symbol''' as a '''selector.'''
 
|-
 
|-
 
|| Show example of Universal Selector
 
|| Show example of Universal Selector
−
|| Here is an example for '''Universal Selector'''
+
|| Here is an example for '''Universal Selector'''.
 
|-
 
|-
 
|| Slide: id Selector
 
|| Slide: id Selector
  
 
'''#list1 {color: blue;}'''
 
'''#list1 {color: blue;}'''
−
|| In this case, in '''CSS''' we have a '''hash symbol''' and a '''name''' next to the '''id''' as a '''selector'''.
+
|| '''id'''.
 +
In this case, in '''CSS''' we have a '''hash symbol''' and a name next to the '''id''' as a '''selector'''.
 
|-
 
|-
 
|| Slide: id Selector
 
|| Slide: id Selector
Line 343: Line 355:
 
|-
 
|-
 
|| Show example of id Selector
 
|| Show example of id Selector
−
|| Here is an example for '''id Selector'''
+
|| Here is an example for '''id Selector'''.
 
|-
 
|-
 
|| Slide: class Selector
 
|| Slide: class Selector
  
 
'''. list1 {color: blue;}'''
 
'''. list1 {color: blue;}'''
−
|| In this case, In '''CSS''' we have a '''dot operator''' and a '''name''' of the '''class''' as a '''selector'''.
+
|| '''Class'''.
 +
In this case, in '''CSS''' we have a '''dot operator''' and a name of the '''class''' as a '''selector'''.
 
|-
 
|-
 
|| Slide: class Selector
 
|| Slide: class Selector
Line 364: Line 377:
 
|-
 
|-
 
|| Show example of class Selector
 
|| Show example of class Selector
−
|| Here is an example for '''class Selector'''
+
|| Here is an example for '''class Selector'''.
 
|-
 
|-
 
||  
 
||  
Line 391: Line 404:
 
* Create a '''webpage.html''' using any '''text editor'''
 
* Create a '''webpage.html''' using any '''text editor'''
 
* Link the '''styles.css''' file to '''webpage.html''' file
 
* Link the '''styles.css''' file to '''webpage.html''' file
−
* Observe the output on the web browser
+
* Observe the output on the '''web browser'''
  
 
|-
 
|-

Revision as of 08:50, 15 October 2020

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


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

<ul id="list1">

<li>HTML</li>
<li>CSS</li>
<li>Java Script</li>

</ul>

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

<ul class="list1">

<li>HTML</li>
<li>CSS</li>
<li>Java Script</li>

</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.

Contributors and Content Editors

Nancyvarkey, Nehasolanki

Retrieved from "https://script.spoken-tutorial.org/index.php?title=CSS/C2/First-CSS-file/English&oldid=54033"