- Identify block-level and inline elements in HTML and use and tags appropriately.
- Design a basic HTML form structure incorporating input types like number, range, date, color, and search.
- Embed SVG shapes (rectangle, circle, polygon) within HTML documents and list advantages of SVG.
- Write CSS rules for inline, internal, and external stylesheets and explain CSS precedence.
- Select HTML elements using element, class, and ID selectors, and employ pseudo-classes and pseudo-elements.
- Set CSS background-color, text-color, background-image, and various border styles and widths.
- Control element spacing using margin and padding properties, and manage layout with display and position properties.
- Apply CSS to style hyperlinks and implement :hover effects for interactive elements.
- Explain the purpose of HTML5 tags and new attributes like required, autofocus, and placeholder.
- Describe the interaction between HTML and CSS and predict the visual output of CSS rules.
Introduction to CSS & Web Styling Techniques
Style web content using CSS for layouts, colors, fonts, and responsive design basics.
Introduction
What you'll learn ?
- Differentiate between HTML block and inline elements and apply div and span tags for structural organization.
- Construct interactive HTML forms using various input types and attributes, including HTML5 additions.
- Integrate SVG graphics into web pages and distinguish them from HTML Canvas.
- Implement different methods of embedding CSS (inline, internal, external) and understand cascading order.
- Apply various CSS selectors, including element, class, ID, pseudo-class, and pseudo-element, to target specific HTML elements.
- Style web page elements effectively using CSS properties for colors, backgrounds, and borders.
- Manipulate element spacing and positioning using CSS Box Model properties (margin, padding) and layout properties (display, position).
- Create visually enhanced links and basic interactive effects using CSS.
- Utilize HTML5 features and advanced HTML attributes to improve web page functionality.
- Analyze and troubleshoot basic CSS styling issues in web development.
Certification
- KLiC courses are recognised by Yashwantrao Chavan Maharashtra Open University (YCMOU).
- MKCL provides certificate to the KLiC learner after his/her successful course completion.
- Yashwantrao Chavan Maharashtra Open University (YCMOU) provides mark sheet to successfully passed KLiC learners (Jurisdiction: Maharashtra).
Academic Approach
The academic approach of the courses focuses on the “work-centric” education i.e. begin with work (and not from a book!), derive knowledge from work and apply that knowledge to make the work more wholesome, useful and delightful. The ultimate objective is to empower the Learner to engage in socially useful and productive work. It aims at leading the learner to his/her rewarding career as an employee or entrepreneur as well as development of the community to which s/he belongs. Learning methodology:
- Step -1: Learners are given an overview of the course and its connection to life and work.
- Step -2: Learners are exposed to the specific tool(s) used in the course through the various real-life applications of the tool(s).
- Step -3: Learners are acquainted with the careers and the hierarchy of roles they can perform at workplaces after attaining increasing levels of mastery over the tool(s).
- Step -4: Learners are acquainted with the architecture of the tool or tool map so as to appreciate various parts of the tool, their functions, utility and inter-relations.
- Step -5: Learners are exposed to simple application development methodology by using the tool at the beginner’s level.
- Step -6: Learners perform the differential skills related to the use of the tool to improve the given ready-made industry-standard outputs.
- Step -7: Learners are engaged in appreciation of real-life case studies developed by the experts.
- Step -8: Learners are encouraged to proceed from appreciation to imitation of the experts.
- Step -9: After the imitation experience, they are required to improve the expert’s outputs so that they proceed from mere imitation to emulation.
- Step-10: Emulation is taken a level further from working with differential skills towards the visualization and creation of a complete output according to the requirements provided. (Long Assignments)
- Step-11: Understanding the requirements, communicating one’s own thoughts and presenting are important skills required in facing an interview for securing a work order/job. For instilling these skills, learners are presented with various subject-specific technical as well as HR-oriented questions and encouraged to answer them.
- Step-12: Finally, they develop the integral skills involving optimal methods and best practices to produce useful outputs right from scratch, publish them in their ePortfolio and thereby proceed from emulation to self-expression, from self-expression to self-confidence and from self-confidence to self-reliance and self-esteem!
Syllabus
- Defining block element, inline element
- Block level elements- Part 1
- Block level elements- Part 2
- Inline elements- Part 1
- Inline elements- Part 2
- Assisted demo on: block element
- Assisted demo on: inline element
- DIV and span tag in HTML, Use and attributes of div tag and span tag
- Working with span tag, working with div tag
- What are forms, when forms are used
- Defining form syntax
- Form controls on HTML5: input type=number, range, date/time controls
- Assisted demo of basic form structure
- Input elements of form, Attributes of form
- Form controls on HTML5: input type=color, search, datelist
- Assisted demo on: form controls in HTML5
- new attributes in HTML5: required, disable, autofocus, max-min and steps
- Assisted demo to show new attribute use
- Frame, use of frames in web page
- Disadvantages of frames
- Understanding svg and its advantages
- HTML canvas
- Difference between svg and canvas
- Comparison between SVG and canvas, why svg prefered over other formats
- How to embed svg in HTML page
- svg: rectangle, circle, ellipse, polygon, polyline, path
- svg: stroking, blur effect, shadow effect
- svg: text, linear, radial
- Assisted demo SVG
- Why linking of web pages is required
- What are benefits of linking web pages/websites
- What are hyperlinks
- How to link website to other websites
- How to link different pages of same website within a website
- Use of anchor and href
- How to open a link in a new browser window/tab
- What is absolute and relative link
- Assisted demo in absolute and relative URL
- Understanding HTML style sheet
- Limitations of HTML
- Why to use CSS, HTML webpage with CSS in it demo
- How to use HTML with CSS
- HTML vs CSS
- HTML vs Javascript
- CSS and javascript
- Comparison between HTML and HTML with CSS
- Introduction to HTML5, tags of HTML5
- Advantages of HTML5
- HTML vs HTML5
- Defining attributes and data types
- Attributes of HTML5
- Data Types of HTML5
- Placeholder and attributes of placeholder
- Text: time, mark and presentational
- conditional comments
Evaluation Pattern
Evaluation Pattern of KLiC Courses consists of 4 Sections as per below table:
Section No. | Section Name | Total Marks | Minimum Passing Marks |
---|---|---|---|
1 | Learning Progression | 25 | 10 |
2 | Internal Assessment | 25 | 10 |
3 | Final Online Examination | 50 | 20 |
Total | 100 | 40 | |
4 | SUPWs (Socially Useful and Productive Work in form of Assignments) | 5 Assignments | 2 Assignments to be Completed & Uploaded |
YCMOU Mark Sheet
Printed Mark Sheet will be issued by YCMOU on successful completion of Section 1, Section 2 and Section 3 and will be delivered to the learner by MKCL.
YCMOU Mark Sheet will be available only for Maharashtra jurisdiction learners
MKCL's KLiC Certificate
The certificate will be provided to the learner who will satisfy the below criteria:
- Learners who have successfully completed above mentioned 3 Sections i.e. Section 1, Section 2 and Section 3
- Additionally, learner should have completed Section 4 (i.e. Section 4 will comprise of SUPWs i.e. Socially Useful and Productive Work in form of Assignments)
- Learner has to complete and upload minimum 2 out of 5 Assignments
Courses Fee Structure from 01 July, 2025 Onwards
KLiC 30 hour course fee applicable from 01 July, 2025 all over Maharashtra
KLiC Course Duration | MFO (Inclusive of GST) |
ALC Share (Service Charges to be collected by ALC) |
---|---|---|
30 hours | Rs. 300/- | Rs. 1,500/- |
* Above mentioned fee is applicable for all Modes of KLiC Courses offered at Authorised Learning Center (ALC) and at Satellite Center
* Total fee is including of Course fees, Examination fees and Certification fees
* MKCL reserves the right to modify the Fee anytime without any prior notice