Difference between revisions of "CSS/C2/Overview-of-CSS/English"

From Script | Spoken-Tutorial
Jump to: navigation, search
Line 206: Line 206:
  
 
Video - Advanced Table Design: 03:35 - 03:43 ]  
 
Video - Advanced Table Design: 03:35 - 03:43 ]  
|  | '''Table '''and''' Advanced Table Design''' in '''CSS''' are next tutorial in this series.
+
|  | '''Table '''and''' Advanced Table Design''' in '''CSS''' are the next tutorials in this series.
  
They will teach us to '''style''' and '''format tables''' using '''CSS''' '''table''' properties.
+
They will teach us to '''style''' and '''format tables''' using '''CSS table''' properties.
 
|-
 
|-
 
|  | Glimpse of Forms
 
|  | Glimpse of Forms

Revision as of 17:17, 4 February 2021

Title of the script: Overview of CSS

Author: Neha Solanki

Domain Reviewer: Ankita Maske, Om Prakash Soni

Novice Reviewer: Madhuri Ganapathi

Keywords: CSS, HTML, Web Page, Web Design, Video Tutorial, Spoken Tutorial, Cascading Style Sheet, Overview of CSS, Markup Language, Web Layout


Visual Cue Narration
Slide: Title Hello and welcome to the spoken tutorial on “Overview of CSS”.
Slide: Learning Objectives In this tutorial, we will learn:
  • About CSS and
  • The content available in various tutorials in this series
Slide: CSS What is CSS?

CSS stands for Cascading Style Sheet.

Slide: CSS
  • It is a style sheet language.
  • It is used to style documents written in markup language like HTML, XML etc.
  • It is an independent file and saved with [dot] css (.css) extension.
Slide: CSS
  • It allows developers to control how the webpage should be displayed.
  • For e.g color, font, space, etc.
  • It is platform independent and hence works on all operating systems
Slide: Prerequisites for using CSS To work with CSS, we need-
  • A text editor or a WYSIWYG editor to
    • write our CSS code and
    • understand various CSS properties
  • A web browser to display the formatted content.
Slide: For recording of CSS series Throughout this series I will be using:
  • CSS3
  • HTML5
  • gedit Text Editor
  • Firefox web browser and
  • Ubuntu Linux OS v 18.04
Now, we will briefly go through some of the individual tutorials in this series.
Glimpse of First CSS File

[Video:

00:00 - 00:04

03:35 - 03:43

05:44 - 05:50 ]

First CSS File is the introductory tutorial of the series.

In this tutorial we will learn how to create a CSS file and the syntax of CSS.

We’ll also see how to link a CSS file with an HTML file and see the output on a web browser.

Glimpse of Dimensions and Measuring Units

[Video:

00:00 - 00:04

04:05 - 04:12

07:51 - 07:57 ]

Dimensions and Measuring Units is the next tutorial.

In this, we’ll learn about measuring units and width & height properties in CSS.

Glimpse of Box Model

[Video:

00:00 - 00:03

01:27 - 01:36

09:57 - 10:02 ]

The next tutorial is Box Model, in which we’ll learn about CSS Box Model and its layers.

We will also learn about the Box sizing.

Glimpse of Background

[Video:

00:00 - 00:03

04:26 - 04:36

05:53 - 05:57 ]

Next tutorial is Background.

In this tutorial we'll learn how to set the background properties of an element in CSS.

Like background-color, background-image, background-repeat, etc.

Glimpse of Text Properties

[Video:

00:00 - 00:04

02:28 - 02:42]

After this, comes Text Properties.

In this tutorial we’ll learn how to set the Text properties to format and style the text elements.

Like color, alignment, etc.

Glimpse of Font properties

[Video:

00:00 - 00:04

10:55 - 11:09 ]

Next tutorial is Font properties.

In this we’ll learn about Font properties of an element to style the font of the text.

Like font-style, font-size, font-family, etc.

Glimpse of Display property

[Video:

00:00 - 00:06

03:57 - 04:03]

The tutorial named Display property is next in the series.

In this we’ll see how to display an element in CSS.

Glimpse of Float and Overflow

[Video:

00:00 - 00:04

04:18 - 04:27

11:06 - 11:10 ]

Next tutorial is Float and Overflow.

Here, we’ll learn about Float & Clear properties of an element in CSS.

We’ll also learn Overflow property.

Glimpse of Link

[Video:

00:00 - 00:04

06:11 - 06:25]

After this is Link.

In this, we can style links by applying different properties to all the four states of link.

Glimpse of List

[Video:

00:00 - 00:04

02:20 - 02:34]

Next tutorial is List.

In this we’ll learn about list properties to style and format lists.

Like type, background-color, etc

Glimpse of Table

[Video - Table: 00:00 - 00:02

Video - Advanced Table Design: 00:00 - 00:04

Video - Advanced Table Design: 03:35 - 03:43 ]

Table and Advanced Table Design in CSS are the next tutorials in this series.

They will teach us to style and format tables using CSS table properties.

Glimpse of Forms

[Video:

00:00 - 00:04

11:49 - 12:03 ]

Next tutorial is Forms.

In this we’ll learn to style and format forms using various CSS properties.

Like border, background-color, padding, etc.

Glimpse of Counters

[Video:

00:00 - 00:06

06:45 - 06:58

The tutorial named Counters is next in the series.

With the help of this tutorial, we will learn to number elements automatically in a webpage.

Glimpse of Multi-column Layout

[Video:

00:00 - 00:06

4:04 - 4:17

Next tutorial is Multi-column Layout.

In this tutorial, learners can create Multi-column Layouts of their webpages.

Glimpse of Web layout

[Video:

00:00-00:05

7:35 - 07:49

The last tutorial is Web layout.

In this, learners will be able to design and structure web pages with proper web layout.

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

Let us summarize.

Slide: Summary In this tutorial, we have learnt:
  • About CSS and
  • The tutorials covered in this series
Slide: About Spoken Tutorial project The video at the following link summarises the Spoken Tutorial project.

Please download and watch it.

Slide: Spoken Tutorial Workshops The Spoken Tutorial Project team conducts workshops and gives certificates.

For more details, please write to us.

Slide:

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:

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: Acknowledgement Spoken Tutorial project is funded by Ministry of Education (MoE), Govt. of India.
Slide: Thanks This is Neha Solanki from IIT Bombay.

Thank you for watching.

Contributors and Content Editors

Nancyvarkey, Nehasolanki, Pravin1389