CSS/C2/First-CSS-file/English

From Script | Spoken-Tutorial
Revision as of 08:50, 15 October 2020 by Nancyvarkey (Talk | contribs)

Jump to: navigation, search

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"