Difference between revisions of "CSS/C2/Overview-of-CSS/English"
Nehasolanki (Talk | contribs) (Created page with "'''Title of the script: '''Overview of CSS '''Author:''' Neha Solanki '''Domain Reviewer: '''Ankita Maske, Om Prakash Soni '''Novice Reviewer: '''Madhuri Ganapathi '''Keyw...") |
Nehasolanki (Talk | contribs) |
||
| (3 intermediate revisions by 3 users not shown) | |||
| Line 7: | Line 7: | ||
'''Novice Reviewer: '''Madhuri Ganapathi | '''Novice Reviewer: '''Madhuri Ganapathi | ||
| − | '''Keywords: '''CSS, HTML, Web Page, Web Design, Video Tutorial, Spoken Tutorial | + | '''Keywords: '''CSS, HTML, Web Page, Web Design, Video Tutorial, Spoken Tutorial, Cascading Style Sheet, Overview of CSS, Markup Language, Web Layout |
| Line 35: | Line 35: | ||
* It''' '''is a '''style sheet''' language. | * It''' '''is a '''style sheet''' language. | ||
* It is used to '''style''' documents written in '''markup''' language like''' HTML''', '''XML '''etc. | * It is used to '''style''' documents written in '''markup''' language like''' HTML''', '''XML '''etc. | ||
| − | * It is an independent file and saved with ''' | + | * It is an independent file and saved with '''.css''' extension. |
|- | |- | ||
| 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 | + | | | '''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 | | | Glimpse of Forms | ||
Latest revision as of 16:40, 9 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:
|
| Slide: CSS | What is CSS?
CSS stands for Cascading Style Sheet. |
| Slide: CSS |
|
| Slide: CSS |
|
| Slide: Prerequisites for using CSS | To work with CSS, we need-
|
| Slide: For recording of CSS series | Throughout this series I will be using:
|
| 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:
|
| 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. |
