CSS (Cascading Style Sheets) is a language used to style and lay out web pages. It allows separation of document content from document presentation and formatting. The document discusses various CSS properties like color, font, text, margins, links, and lists that control the look and formatting of HTML elements. It also describes how to style tables and their borders, alignment, padding and other properties. External, internal, and inline styling methods are covered along with the cascade order of multiple style sheets.
Esoft Metro Campus - Diploma in Web Engineering - (Module III) Coding HTML for Basic Web Designing
(Template - Virtusa Corporate)
Contents:
Introduction to HTML
HTML Versions
HTML Standards
Creating a Simple HTML Document
Document Type Declaration
Comments in HTML
HTML Attributes
Paragraphs
Line Break
Headings
Text Formatting
Font Formatting
Images
Hyperlinks
Page Body
Lists
Tables
Cell Merging in a Table
Table Attributes
Horizontal Rule
Iframes
HTML Blocks
Division
Span
Audio
Video
Youtube Videos
Forms and Input
Introduction to CSS
Advantages of Using CSS
CSS Syntax
CSS Comments
How to Insert CSS?
CSS Tag, ID and Class Selectors
Grouping and Nesting Selectors
CSS Backgrounds
CSS Text
CSS Fonts
CSS Links
CSS Lists
CSS Tables
CSS Box Model
CSS Dimension
CSS Display - Block and Inline
CSS Positioning
CSS Float
CSS Alignment
Navigation Menu in CSS
Esoft Metro Campus - Diploma in Web Engineering - (Module III) Coding HTML for Basic Web Designing
(Template - Virtusa Corporate)
Contents:
Introduction to HTML
HTML Versions
HTML Standards
Creating a Simple HTML Document
Document Type Declaration
Comments in HTML
HTML Attributes
Paragraphs
Line Break
Headings
Text Formatting
Font Formatting
Images
Hyperlinks
Page Body
Lists
Tables
Cell Merging in a Table
Table Attributes
Horizontal Rule
Iframes
HTML Blocks
Division
Span
Audio
Video
Youtube Videos
Forms and Input
Introduction to CSS
Advantages of Using CSS
CSS Syntax
CSS Comments
How to Insert CSS?
CSS Tag, ID and Class Selectors
Grouping and Nesting Selectors
CSS Backgrounds
CSS Text
CSS Fonts
CSS Links
CSS Lists
CSS Tables
CSS Box Model
CSS Dimension
CSS Display - Block and Inline
CSS Positioning
CSS Float
CSS Alignment
Navigation Menu in CSS
Here's my FIT Board Practical File. I hope you find it as useful as it was to me. I constantly got complimented for my file from internal as well as external teachers so I thought of sharing my work with all of you.
Here's my FIT Board Practical File. I hope you find it as useful as it was to me. I constantly got complimented for my file from internal as well as external teachers so I thought of sharing my work with all of you.
This Slide provided an introduction to CSS or Cascading Style Sheets. What is CSS? How to write styles. What are External, internal and inline CSS styles? and lot more
This hands-on session will introduce you to Bootstrap, a powerful HTML/CSS framework for developing responsive web sites. Learn how to leverage the various capabilities of this framework to quickly generate HTML prototypes.
Attendees will work through creating a basic consumer web site. We will look at the new features introduced in Bootstrap 4, a variety of web components, and some basic CSS styling.
Don’t worry if writing HTML is outside your comfort zone, this session will take you from the basics to creating impressive web prototypes in no time.
Online aptitude test management system project report.pdfKamal Acharya
The purpose of on-line aptitude test system is to take online test in an efficient manner and no time wasting for checking the paper. The main objective of on-line aptitude test system is to efficiently evaluate the candidate thoroughly through a fully automated system that not only saves lot of time but also gives fast results. For students they give papers according to their convenience and time and there is no need of using extra thing like paper, pen etc. This can be used in educational institutions as well as in corporate world. Can be used anywhere any time as it is a web based application (user Location doesn’t matter). No restriction that examiner has to be present when the candidate takes the test.
Every time when lecturers/professors need to conduct examinations they have to sit down think about the questions and then create a whole new set of questions for each and every exam. In some cases the professor may want to give an open book online exam that is the student can take the exam any time anywhere, but the student might have to answer the questions in a limited time period. The professor may want to change the sequence of questions for every student. The problem that a student has is whenever a date for the exam is declared the student has to take it and there is no way he can take it at some other time. This project will create an interface for the examiner to create and store questions in a repository. It will also create an interface for the student to take examinations at his convenience and the questions and/or exams may be timed. Thereby creating an application which can be used by examiners and examinee’s simultaneously.
Examination System is very useful for Teachers/Professors. As in the teaching profession, you are responsible for writing question papers. In the conventional method, you write the question paper on paper, keep question papers separate from answers and all this information you have to keep in a locker to avoid unauthorized access. Using the Examination System you can create a question paper and everything will be written to a single exam file in encrypted format. You can set the General and Administrator password to avoid unauthorized access to your question paper. Every time you start the examination, the program shuffles all the questions and selects them randomly from the database, which reduces the chances of memorizing the questions.
HEAP SORT ILLUSTRATED WITH HEAPIFY, BUILD HEAP FOR DYNAMIC ARRAYS.
Heap sort is a comparison-based sorting technique based on Binary Heap data structure. It is similar to the selection sort where we first find the minimum element and place the minimum element at the beginning. Repeat the same process for the remaining elements.
Hierarchical Digital Twin of a Naval Power SystemKerry Sado
A hierarchical digital twin of a Naval DC power system has been developed and experimentally verified. Similar to other state-of-the-art digital twins, this technology creates a digital replica of the physical system executed in real-time or faster, which can modify hardware controls. However, its advantage stems from distributing computational efforts by utilizing a hierarchical structure composed of lower-level digital twin blocks and a higher-level system digital twin. Each digital twin block is associated with a physical subsystem of the hardware and communicates with a singular system digital twin, which creates a system-level response. By extracting information from each level of the hierarchy, power system controls of the hardware were reconfigured autonomously. This hierarchical digital twin development offers several advantages over other digital twins, particularly in the field of naval power systems. The hierarchical structure allows for greater computational efficiency and scalability while the ability to autonomously reconfigure hardware controls offers increased flexibility and responsiveness. The hierarchical decomposition and models utilized were well aligned with the physical twin, as indicated by the maximum deviations between the developed digital twin hierarchy and the hardware.
Water billing management system project report.pdfKamal Acharya
Our project entitled “Water Billing Management System” aims is to generate Water bill with all the charges and penalty. Manual system that is employed is extremely laborious and quite inadequate. It only makes the process more difficult and hard.
The aim of our project is to develop a system that is meant to partially computerize the work performed in the Water Board like generating monthly Water bill, record of consuming unit of water, store record of the customer and previous unpaid record.
We used HTML/PHP as front end and MYSQL as back end for developing our project. HTML is primarily a visual design environment. We can create a android application by designing the form and that make up the user interface. Adding android application code to the form and the objects such as buttons and text boxes on them and adding any required support code in additional modular.
MySQL is free open source database that facilitates the effective management of the databases by connecting them to the software. It is a stable ,reliable and the powerful solution with the advanced features and advantages which are as follows: Data Security.MySQL is free open source database that facilitates the effective management of the databases by connecting them to the software.
Harnessing WebAssembly for Real-time Stateless Streaming PipelinesChristina Lin
Traditionally, dealing with real-time data pipelines has involved significant overhead, even for straightforward tasks like data transformation or masking. However, in this talk, we’ll venture into the dynamic realm of WebAssembly (WASM) and discover how it can revolutionize the creation of stateless streaming pipelines within a Kafka (Redpanda) broker. These pipelines are adept at managing low-latency, high-data-volume scenarios.
Using recycled concrete aggregates (RCA) for pavements is crucial to achieving sustainability. Implementing RCA for new pavement can minimize carbon footprint, conserve natural resources, reduce harmful emissions, and lower life cycle costs. Compared to natural aggregate (NA), RCA pavement has fewer comprehensive studies and sustainability assessments.
2. What is CSS?
CSS stands for Cascading Style Sheets
CSS describes how HTML elements are to be
displayed on screen, paper, or in other media
CSS saves a lot of work. It can control the layout
of multiple web pages all at once
External stylesheets are stored in CSS files
Priyanka Pradhan
3. Why Use CSS?
CSS is used to define styles for your web
pages, including the design, layout and
variations in display for different devices and
screen sizes.
Priyanka Pradhan
4. CSS Syntax
A CSS rule-set consists of a selector and a declaration block:
The selector points to the HTML element you want to style.
The declaration block contains one or more declarations
separated by semicolons.
Each declaration includes a CSS property name and a value,
separated by a colon.
A CSS declaration always ends with a semicolon, and
declaration blocks are surrounded by curly braces.
In the following example all <p> elements will be center-aligned,
with a red text color:
Priyanka Pradhan
5. Example
p {
color: red;
text-align: center;
}
When a browser reads a style sheet, it will format
the HTML document according to the information
in the style sheet.
Priyanka Pradhan
7. <!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: lightblue;
}
h1 {
color: white;
text-align: center;
}
p {
font-family: verdana;
font-size: 20px;
}
</style>
</head>
<body>
<h1>My First CSS Example</h1>
<p>This is a paragraph.</p>
</body>
</html>
Priyanka Pradhan
8. My First CSS Example
This is a paragraph.
Priyanka Pradhan
9. Three Ways to Insert CSS
There are three ways of inserting a style sheet:
External style sheet
Internal style sheet
Inline style
Priyanka Pradhan
10. External Style Sheet
Each page must include a reference to the
external style sheet file inside the <link>
element.
The <link> element goes inside the <head>
section.
Priyanka Pradhan
13. Here is how the "mystyle.css" looks:
body {
background-color: lightblue;
}
h1 {
color: navy;
margin-left: 20px;
}
Priyanka Pradhan
14. Internal Style Sheet
An internal style sheet may be used if one
single page has a unique style.
Internal styles are defined within the <style>
element, inside the <head> section of an
HTML page.
Priyanka Pradhan
16. This is a heading
This is a paragraph
Priyanka Pradhan
17. Inline Styles
An inline style may be used to apply a unique
style for a single element.
To use inline styles, add the style attribute to
the relevant element. The style attribute can
contain any CSS property.
Priyanka Pradhan
20. Multiple Style Sheets
If some properties have been defined for the
same selector (element) in different style
sheets, the value from the last read style
sheet will be used.
Priyanka Pradhan
21. Assume that an external style sheet has the
following style for the <h1> element:
h1 {
color: navy;
}
Priyanka Pradhan
22. then, assume that an internal style sheet also
has the following style for the <h1> element:
h1 {
color: orange;
}
Priyanka Pradhan
23. If the internal style is defined after the link to
the external style sheet, the <h1> elements
will be "orange"
Priyanka Pradhan
27. CSS Colors
Colors are specified using predefined color
names, or RGB, HEX, HSL, RGBA, HSLA
values.
Priyanka Pradhan
28. Background Color
You can set the background color for HTML
elements:
<h1 style="background-
color:DodgerBlue;">Hello World</h1>
<p style="background-
color:Tomato;">Para1</p>
Priyanka Pradhan
29. Text Color
You can set the color of text:
<h1 style="color:Tomato;">Hello</h1>
<p style="color:DodgerBlue;"> World </p>
<p style="color:MediumSeaGreen;">Para1</p>
Priyanka Pradhan
30. Border Color
You can set the color of borders:
<h1 style="border:2px solid Tomato;">Hello
World</h1>
<h1 style="border:2px solid Violet;">Hello
World</h1>
Priyanka Pradhan
31. CSS Margins
The CSS margin properties are used to create
space around elements, outside of any
defined borders.
Priyanka Pradhan
32. CSS has properties for specifying the margin for
each side of an element:
margin-top
margin-right
margin-bottom
margin-left
Priyanka Pradhan
33. Example
p {
margin-top: 100px;
margin-bottom: 100px;
margin-right: 150px;
margin-left: 80px;
}
Priyanka Pradhan
34. If the margin property has four values:
margin: 25px 50px 75px 100px;
top margin is 25px
right margin is 50px
bottom margin is 75px
left margin is 100px
Priyanka Pradhan
35. Margin - Shorthand Property
p {
margin: 25px 50px 75px 100px;
}
Priyanka Pradhan
36. Styling Links
Links can be styled with any CSS property
(e.g. color, font-family, background, etc.).
Example
a {
color: hotpink;
}
Priyanka Pradhan
37. In addition, links can be styled differently depending
on what state they are in.
The four links states are:
a:link - a normal, unvisited link
a:visited - a link the user has visited
a:hover - a link when the user mouses over it
a:active - a link the moment it is clicked
Priyanka Pradhan
38. /* unvisited link */
a:link {
color: red;
}
/* visited link */
a:visited {
color: green;
}
/* mouse over link */
a:hover {
color: hotpink;
}
/* selected link */
a:active {
color: blue;
}
Priyanka Pradhan
39. When setting the style for several link states,
there are some order rules:
a:hover MUST come after a:link and a:visited
a:active MUST come after a:hover
Priyanka Pradhan
40. Text Decoration The text-decoration property is mostly used to remove underlines from
links:
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
a:active {
text-decoration: underline;
}
Priyanka Pradhan
41. CSS Text
The color property is used to set the color of the
text. The color is specified by:
a color name - like "red"
a HEX value - like "#ff0000"
an RGB value - like "rgb(255,0,0)"
Priyanka Pradhan
42. The default text color for a page is defined in the
body selector.
Example
body {
color: blue;
}
h1 {
color: green;
}
Priyanka Pradhan
64. An Image as The List Item
Marker
The list-style-image property specifies an
image as the list item marker:
Example
ul {
list-style-image: url('sqpurple.gif');
}
Priyanka Pradhan
65. Remove Default Settings
The list-style-type:none property can also be
used to remove the markers/bullets. Note that
the list also has default margin and padding.
To remove this, add margin:0 and
padding:0 to <ul> or <ol>:
Priyanka Pradhan
67. Table Borders
To specify table borders in CSS, use
the border property.
The example below specifies a black border
for <table>, <th>, and <td> elements:
Priyanka Pradhan
70. Horizontal Alignment
The text-align property sets the horizontal
alignment (like left, right, or center) of the
content in <th> or <td>.
By default, the content of <th> elements are
center-aligned and the content of <td>
elements are left-aligned.
Priyanka Pradhan
72. Vertical Alignment
The vertical-align property sets the vertical
alignment (like top, bottom, or middle) of the
content in <th> or <td>.
By default, the vertical alignment of the
content in a table is middle (for both <th> and
<td> elements).
Priyanka Pradhan
74. Table Padding
To control the space between the border and
the content in a table, use
the padding property on <td> and <th>
elements.
Priyanka Pradhan