KEMBAR78
Cascade Style Sheets | PDF | Html | World Wide Web
Scribd
Upload
22 views12 pages

Cascade Style Sheets

Uploaded by

ejigu
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
22 views12 pages

Cascade Style Sheets

Uploaded by

ejigu
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 12

Rift Valley University College Department Web Development & Database Administration Level III

Rift Valley University College

TVET-PROGRAMME TITLE: Web Development and


Database Administration
Level III
MODULE TITLE: Developing cascading style sheets
MODULE CODE: EIS WDDBA3 M05 0322

LEARNING OUTCOMES
LO1. Determine requirements and develop CSS
LO2. Use CSS techniques to create web pages
LO3. Ensure web page and CSS are validated and tested

Lo1. Determine requirements and develop CSS


March 23, 2023

Prepared by Instructor;s Terefe F.(BSC)


1
Rift Valley University College Department Web Development & Database Administration Level III

Cascading Style Sheets (CSS): CSS is defined as a method sheet language that provides web
designers control over how an internet site communicates with web browsers including the formatting and
display of their HTML documents.
CSS or cascading sheet may be a text-based coding language that specifies the website formats and the way
a site communicates with web browsers. The language allows web developers to regulate various style
elements and functionalities, like layout, color, fonts, and therefore the formatting and display of HTML
documents.
The main goal (as a method sheet language) was to separate document content from document
presentation, which incorporates style elements, like color, layout, and fonts. CSS handles the design and
feel a part of an internet page. Using CSS, you will control the color of the text, the design of fonts, the
spacing between paragraphs, how columns are sized and laid out, etc.
Cascading Style Sheets, fondly referred to as CSS, is a simple design language intended to simplify the
process of making web pages presentable.
CSS is a MUST for students and working professionals to become a great Software Engineer especially
when they are working in Web Development Domain. I will list down some of the key advantages of
learning CSS:
Create Stunning Web site - CSS handles the look and feel part of a web page. Using CSS, you can control
the color of the text, the style of fonts, the spacing between paragraphs, how columns are sized and laid out,
what background images or colors are used, layout designs, and variations in display for different devices
and screen sizes as well as a variety of other effects.
Become a web designer - If you want to start a carrer as a professional web designer, HTML and CSS
designing is a must skill.
Control web - CSS is easy to learn and understand but it provides powerful control over the presentation
of an HTML document. Most commonly, CSS is combined with the markup languages HTML or XHTML.
Learn other languages - Once you understands the basic of HTML and CSS then other related
technologies like JavaScript, php, or angular are become easier to understand.
Hello World using CSS.
Just to give you a little excitement about CSS, I'm going to give you a small conventional CSS Hello World
program, You can try it using Demo link.
<! DOCTYPE html>
<html>
<head>
<title>This is document title</title>
<style>
h1 {
color: #36CFFF;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>
Applications of CSS
As mentioned before, CSS is one of the most widely used style language over the web. I'm going to list few
of them here:
CSS saves time - You can write CSS once and then reuse same sheet in multiple HTML pages. You can
define a style for each HTML element and apply it to as many Web pages as you want.

March 23, 2023

Prepared by Instructor;s Terefe F.(BSC)


2
Rift Valley University College Department Web Development & Database Administration Level III
Pages load faster - If you are using CSS, you do not need to write HTML tag attributes every time. Just
write one CSS rule of a tag and apply it to all the occurrences of that tag. So less code means faster
download times.
Easy maintenance - To make a global change, simply change the style, and all elements in all the web
pages will be updated automatically.
Superior styles to HTML - CSS has a much wider array of attributes than HTML, so you can give a far
better look to your HTML page in comparison to HTML attributes.
Multiple Device Compatibility - Style sheets allow content to be optimized for more than one type of
device. By using the same HTML document, different versions of a website can be presented for handheld
devices such as PDAs and cell phones or for printing.
Global web standards - Now HTML attributes are being deprecated and it is being recommended to use
CSS. So its a good idea to start using CSS in all the HTML pages to make them compatible to future
browsers.
Audience
This CSS tutorial will help both students as well as professionals who want to make their websites or
personal blogs more attractive.
Prerequisites
You should be familiar with:
Basic word processing using any text editor.
How to create directories and files.
How to navigate through different directories.
Internet browsing using popular browsers like Internet Explorer or Firefox.
Developing simple Web Pages using HTML or XHTML.
Cascading Style Sheets, fondly referred to as CSS, is a simple design language intended to simplify the
process of making web pages presentable.
CSS handles the look and feel part of a web page. Using CSS, you can control the color of the text, the
style of fonts, the spacing between paragraphs, how columns are sized and laid out, what background
images or colors are used, layout designs, and variations in display for different devices and screen sizes as
well as a variety of other effects.
CSS is easy to learn and understand but it provides powerful control over the presentation of an HTML
document. Most commonly, CSS is combined with the markup languages HTML or XHTML.
Advantages of CSS
 CSS plays an important role, by using CSS you simply got to specify a repeated style for element
once & use it multiple times as because CSS will automatically apply the required styles.
 The main advantage of CSS is that style is applied consistently across variety of sites. One
instruction can control several areas which is advantageous.
 Web designers needs to use few lines of programming for every page improving site speed.
 Cascading sheet not only simplifies website development, but also simplifies the maintenance as a
change of one line of code affects the whole web site and maintenance time.
 It is less complex therefore the effort are significantly reduced.
 It helps to form spontaneous and consistent changes.
 CSS changes are device friendly. With people employing a batch of various range of smart devices
to access websites over the web, there’s a requirement for responsive web design.
 It has the power for re-positioning. It helps us to determine the changes within the position of web
elements who are there on the page.
 These bandwidth savings are substantial figures of insignificant tags that are indistinct from a mess
of pages.
 Easy for the user to customize the online page

March 23, 2023

Prepared by Instructor;s Terefe F.(BSC)


3
Rift Valley University College Department Web Development & Database Administration Level III
 It reduces the file transfer size.
Disadvantages of CSS:
 CSS, CSS 1 up to CSS3, result in creating of confusion among web browsers.
 With CSS, what works with one browser might not always work with another. The web developers
need to test for compatibility, running the program across multiple browsers.
 There exists a scarcity of security.
 After making the changes we need to confirm the compatibility if they appear. The similar change
effects on all the browsers.
 The programing language world is complicated for non-developers and beginners. Different levels
of CSS i.e. CSS, CSS 2, CSS 3 are often quite confusing.
 Browser compatibility (some styles sheet are supported and some are not).
 CSS works differently on different browsers. IE and Opera supports CSS as different logic.
 There might be cross-browser issues while using CSS.
 There are multiple levels which creates confusion for non-developers and beginners.
Who Creates and Maintains CSS?
CSS is created and maintained through a group of people within the W3C called the CSS Working Group.
The CSS Working Group creates documents called specifications. When a specification has been discussed
and officially ratified by the W3C members, it becomes a recommendation.
These ratified specifications are called recommendations because the W3C has no control over the actual
implementation of the language. Independent companies and organizations create that software.
NOTE − The World Wide Web Consortium, or W3C is a group that makes recommendations about how
the Internet works and how it should evolve.
CSS Versions
Cascading Style Sheets level 1 (CSS1) came out of W3C as a recommendation in December 1996. This version
describes the CSS language as well as a simple visual formatting model for all the HTML tags. CSS2 became a W3C
recommendation in May 1998 and builds on CSS1. This version adds support for media-specific style sheets e.g.
printers and aural devices, downloadable fonts, element positioning and tables.
Lo2. Use CSS techniques to create web pages
CSS is used to control the style of a web document in a simple and easy way.
CSS is the acronym for "Cascading Style Sheet". This tutorial covers both the versions CSS1, CSS2 and
CSS3, and gives a complete understanding of CSS, starting from its basics to advanced concepts.
Creating an attractive page will be difficult for those who are not experts in CSS. Without using CSS,
you will not be able to make the web page, more attractive. So in order to make a web page, we need to
have a knowledge of HTML and CSS. In this article, the main focus will be implementing CSS. In order
to design a web page we need to first create an HTML web structure.
Creating structure: In this section, we will create a simple structure of web page by using <li> and
<section> tags. So this will create a simple interface which you can check by running the following code.
Example create buttons
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<body>
<div class="w3-container">
<h2>Buttons (w3-button)</h2>
<input type="button" class="w3-button w3-black" value="Input Button">
<button class="w3-button w3-black">Button Button</button>
<a href="#" class="w3-button w3-black">Link Button</a>
March 23, 2023 </div>

Prepared by Instructor;s Terefe F.(BSC)


4
Rift Valley University College Department Web Development & Database Administration Level III
<div class="w3-container">
<h2>Buttons (w3-btn)</h2>
<input type="button" class="w3-btn w3-black" value="Input Button">
<button class="w3-btn w3-black">Button Button</button>
<a href="#" class="w3-btn w3-black">Link Button</a>
</div>
</body>
</html>
Example 2
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<style>
.w3-button {width:150px;}
</style>
<body>
<div class="w3-container">
<h2>Button Colors</h2>
<p><button class="w3-button w3-red">Red</button></p>
<p><button class="w3-button w3-pink">Pink</button></p>
<p><button class="w3-button w3-purple">Purple</button></p>
<p><button class="w3-button w3-deep-purple">Deep Purple</button></p>
<p><button class="w3-button w3-indigo">Indigo</button></p>
<p><button class="w3-button w3-blue">Blue</button></p>
<p><button class="w3-button w3-light-blue">Light Blue</button></p>
<p><button class="w3-button w3-cyan">Cyan</button></p>
<p><button class="w3-button w3-aqua">Aqua</button></p>
<p><button class="w3-button w3-teal">Teal</button></p>
<p><button class="w3-button w3-green">Green</button></p>
<p><button class="w3-button w3-light-green">Light Green</button></p>
<p><button class="w3-button w3-lime">Lime</button></p>
<p><button class="w3-button w3-sand">Sand</button></p>
<p><button class="w3-button w3-khaki">Khaki</button></p>
<p><button class="w3-button w3-yellow">Yellow</button></p>
<p><button class="w3-button w3-amber">Amber</button></p>
<p><button class="w3-button w3-orange">Orange</button></p>
<p><button class="w3-button w3-deep-orange">Deep Orange</button></p>
<p><button class="w3-button w3-brown">Brown</button></p>
<p><button class="w3-button w3-blue-grey">Blue Grey</button></p>
<p><button class="w3-button w3-light-grey">Light Grey</button></p>
<p><button class="w3-button w3-grey">Grey</button></p>
<p><button class="w3-button w3-dark-grey">Dark Grey</button></p>
<p><button class="w3-button w3-black">Black</button></p>
<p><button class="w3-button w3-pale-red">Pale-red</button></p>
<p><button class="w3-button w3-pale-yellow">Pale-yellow</button></p>
<p><button class="w3-button w3-pale-green">Pale-green</button></p>
<p><button class="w3-button w3-pale-blue">Pale-blue</button></p>
</div>
</body>
March 23, 2023

Prepared by Instructor;s Terefe F.(BSC)


5
Rift Valley University College Department Web Development & Database Administration Level III
</html>
Example 3
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<style>
.w3-btn {width:150px;}
</style>
<body>
<div class="w3-container">
<h2>Button Shapes</h2>
<p><button class="w3-button w3-black w3-round-small">Round Small</button></p>
<p><button class="w3-button w3-black w3-round">Round Normal</button></p>
<p><button class="w3-button w3-black w3-round-large">Round Large</button></p>
<p><button class="w3-button w3-black w3-round-xlarge">Round XLarge</button></p>
<p><button class="w3-button w3-black w3-round-xxlarge">Round XXLarge</button></p>
</div>
</body>
</html>
LO3. Ensure web page and CSS are validated and tested
Before publishing your web site, you may need to validate the markup of its pages, validate CSS and check
the site for broken links. Furthermore, you may need to do it every time the site contents are updated. To
perform these tasks, you can use various third-party tools, for example, the tools mentioned in the “Website
Checklist” article:
The W3C Markup Validation Service and WDG HTML Validator are used to validate HTML code.
The W3C CSS Validation Service is used to validate the CSS and Xenulink is used to check for broken
links.
All of these tools are similar:
You open a web page corresponding to the desired tool.
On the page, specify the web site to be checked and initiate the process.
After the check is over, you can save the results to a file and explore them to determine whether the check
was successful.
You can easily check your web site for errors using the above-mentioned tools once or twice, but if you
need to check your site regularly, it is better to automate this process. With TestComplete, you can create a
script routine or a keyword test for checking and validating a web site and run it upon every change made
to the site.
The general idea is:
Launch one of the supported browsers and open the validator page.
Specify the address of the page to be tested into the edit box displayed on the validator page.
Specify validator settings by simulating user actions over the corresponding page controls.
Start checking by clicking the corresponding button.
Wait until the web browser displays the check results.
Save the result page.
After performing these actions, you can open the result file and analyze it.
To improve re-usability and minimize repeated actions, we can divide the entire test onto several routines.
ValidateHTML_W3CMarkUpValidator - validates the web page markup using the W3C Markup
Validation Service.
ValidateHTML_WDGValidator - validates the markup using the WDG HTML Validator.

March 23, 2023

Prepared by Instructor;s Terefe F.(BSC)


6
Rift Valley University College Department Web Development & Database Administration Level III
ValidateCSS_W3C_CSS - validates CSS using the W3C CSS Validation Service.
SaveResultPage - saves the page containing the checked results to a file.
Main - performs initialization actions and calls other routines.
What is CSS VALIDATION?
Validation refers to a program that checks and ensures that the web pages you developed are free of errors.
Particularly an HTML validator checks to ensure the HTML code the web pages act in accordance with the
norms set by the W3 Consortium, the firm that sets the HTML standards. There are many validators with
different functions. Some use for checking errors while others give suggestions about HTML codes. You
can use the W3 Consortium online validator for free. This is what a CSS validator exactly does with your
Cascading Style Sheets. Generally, it will check CSS to ensure that they act in accordance with the CSS
norms issued by the W3 Consortium.
There are many other validators available over the internet either at free or paid. They focus on different
elements to ensure that the HTML or CSS code is running problem-free over browsers and platforms. But,
this does not mean that your web pages will appear as you want in different browsers. It just ensures that
your code is free from syntax errors.
What is CSS Validation, let’s say you are creating your web page for a big company, and you want to
impress them. You created a stunning page for them. There is nothing holding you back because in your
head this is one of the best websites you created. Now, you have to present them with the website and when
you go to upload it.
Nothing…. you get nothing but a blank website. You panic and you don’t what do, not to mention your
protentional future employer is not satisfied. You go to your website source and see if you could spot the
problem. The only problem is your code. In fact, it’s so long that it will take you hours to take a look and fix
it. First, second, and third don’t panic and think this is it. Don’t think that it is over and your shot at landing
a huge job is done.
Example of Validation
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3pro.css">
<style>
.w3-amber{color:#000!important;background-color:#ffc107!important}
</style>
<body>
<div class="w3-container w3-amber">
<h1>W3.CSS Pro</h1>
<p>With W3.CSS you can define your own colors.</p>
</div>
</body>
</html>
Example 2
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3pro.css">
<link rel="stylesheet" href="https://www.w3schools.com/lib/w3-theme-amber.css">
<body>
<div class="w3-container w3-theme-l3">
<h1>W3.CSS Pro</h1>

March 23, 2023

Prepared by Instructor;s Terefe F.(BSC)


7
Rift Valley University College Department Web Development & Database Administration Level III
<p>With W3.CSS you can define your own colors.</p>
</div>
<div class="w3-container w3-theme-l2">
<h1>W3.CSS Pro</h1>
<p>With W3.CSS you can define your own colors.</p>
</div>
<div class="w3-container w3-theme-l1">
<h1>W3.CSS Pro</h1>
<p>With W3.CSS you can define your own colors.</p>
</div>
<div class="w3-container w3-theme">
<h1>W3.CSS Pro</h1>
<p>With W3.CSS you can define your own colors.</p>
</div>
<div class="w3-container w3-theme-d1">
<h1>W3.CSS Pro</h1>
<p>With W3.CSS you can define your own colors.</p>
</div>
<div class="w3-container w3-theme-d2">
<h1>W3.CSS Pro</h1>
<p>With W3.CSS you can define your own colors.</p>
</div>
<div class="w3-container w3-theme-d3">
<h1>W3.CSS Pro</h1>
<p>With W3.CSS you can define your own colors.</p>
</div>
<div class="w3-container w3-theme-d4">
<h1>W3.CSS Pro</h1>
<p>With W3.CSS you can define your own colors.</p>
</div>
<div class="w3-container w3-theme-d5">
<h1>W3.CSS Pro</h1>
<p>With W3.CSS you can define your own colors.</p>
</div>
</body>
</html>
What is CSS Testing?
CSS testing, as the name suggests, is the process of testing your style sheets. More specifically, we refer to
automatic CSS testing. After all, this is 2021, and test automation is essential. This is true in all levels,
layers, and forms of testing. CSS testing isn’t an exception.
Why Should You Care About CSS Testing?
CSS is a member of the web trifecta (HTML, CSS, and JavaScript). As such, it’s vital for the quality of a
web application. Problems in CSS will cause the web app/website not to be rendered correctly.
The UI is a particularly sensitive area of an application when it comes to the user experience. After all, the
interface is what the user sees and touches—quite literally, in the case of mobile.
So, CSS testing should be a crucial component of UI testing if your organization is serious about providing
its users with a delightful user experience.
How Do You Test CSS?
You can test CSS in a variety of ways. That’s because CSS testing isn’t a single thing; instead, it comes in
different types. The four main types are:
Regression
March 23, 2023

Prepared by Instructor;s Terefe F.(BSC)


8
Rift Valley University College Department Web Development & Database Administration Level III
Syntax
Project
Reference
Let’s now cover each of these types.
Regression
Regression CSS testing is the same old regression testing applied to CSS. Regression testing is less a type
of testing—like, unit testing or end-to-end testing—and more of a strategy. It consists of setting up a test
suite to catch regressions or bugs after changes to the code base.
So, CSS regression testing verifies that you don’t break your page style after changing the page.
Syntax
This category refers to testing techniques and tools that verify your CSS syntax is okay. In a nutshell, it’s
like a linter for CSS.
Project
The “project” category means checking whether the CSS respects the standards of the project and
organization.
Reference
Finally, reference CSS testing verifies whether the implemented and rendered page looks the way it was
supposed to look. Much progress has been made in this area, and things are way better than they used to be
in the dark ages of Internet Explorer dominance.
Validating Web Pages Using Keyword Tests
Creating the SaveResultPage Sub procedure
This sub procedure should save the currently open web page to the location specified in the input
parameter.
To create the sub procedure, perform the following steps:
Open your web browser and navigate to any web page.
In Test Complete, right-click the Keyword Tests node in the Project Explorer and choose Add | New
Item from the context menu.
In the ensuing Create Project Item dialog, specify SaveResultPage as the test name and press OK.
A new empty test will be opened in the Keyword Test editor.
Switch to the Parameters page and add a string parameter with the name Result File.
This parameter specifies the local path of the saved web page.
Switch back to the Test Steps page.
Add the On-Screen Action operation. In the ensuing Operation Parameters wizard, specify operation
parameters as follows:
Object name: Sys.Browser("*").BrowserWindow(0)
Method name: Keys.
Method’s Parameter: ^S.
This operation simulates the CTRL + S keystroke, which invokes the Save dialog in any browser.
Switch to the web browser and press CTRL + S to invoke the Save dialog.
Add another On-Screen Action operation. It should relate to the Save dialog window. Select it with the
target glyph. We're interested in the SaveFile method of this dialog. Specify the
method’s FileName parameter to retrieve the destination file path from the test’s ResultFile parameter:
In the Operation Parameters dialog, select the FileName parameter and click the ellipsis button in
the Value column.
In the ensuing Edit Parameter dialog, select Test Parameter in the Mode column, choose ResultFile from
the Value drop-down list.
Press OK to close the Edit Parameter dialog. Press Finish to close the Operation Parameters dialog.
Add a Delay operation. Specify 3000 as the operation’s Delay Time parameter.
This operation will delay the test execution for 3 seconds in order for the web browser to have enough time
to save the web page.

March 23, 2023

Prepared by Instructor;s Terefe F.(BSC)


9
Rift Valley University College Department Web Development & Database Administration Level III
Creating ValidateHTML_W3CMarkUpValidator subprocedure
This procedure will launch the web browser, navigate to the validator’s site, input the URL to be checked,
wait for the validation results, call the SaveResultPage subprocedure to save them and close the browser
afterwards. To address the elements of the web page this test uses the Tree model, if you use other web tree
models, change the operations that interact with page’s controls.
To create the subprocedure, we will use the following technique: first, record most of the required actions
and then modify the recorded test.
In TestComplete, select Test | Record | Record Keyword Test from the main menu.
Test recording will start.
Launch the web browser and navigate to: http://validator.w3.org/.
Click within the Address field of the Markup Validation Service page and enter any URL in this field
(say, www.microsoft.com).
Click the Check button of the web page.
Wait for the page to reload and display the verification results.
Close the browser.
Press Stop on the Recording toolbar.
Rename the recorded test to ValidateHTML_W3CMarkUpValidator.
As you may notice, we have entered the validated URL manually and have not saved the validation results.
Now we need to parameterize the recorded test in order to call it from other tests.
Switch to the Parameters page and add two string parameters: CheckedURL and ResultFile.
The first parameter specifies the URL of the page to be validated. The second parameter - the path where
the validation results are saved. The value of the second parameter will be passed to the SaveResultPage
subprocedure.
Switch back to the Test Steps page.
Substitute the arbitrary URL name we have entered (www.microsoft.com) with the CheckedURL parameter:
Locate the operation that corresponds to the URL input. This is the operation that calls the SetText action.
The Value column for this operation contains the entered URL. Click the ellipsis button next to this value.
This will invoke the Operation Parameters dialog.
In the dialog, select the Text parameter and click the ellipsis button in the Value column. In the
ensuing Edit Parameter dialog, select Test Parameter in the Mode column and choose CheckedURL from
the Value drop-down list.
Press OK to close the Edit Parameter dialog. Press OK to close the Operation Parameters dialog.
Insert the Run Keyword Test operation between the operations that wait for the results and close the
browser. Specify the operation parameters to call the SaveResultPage subprocedure with the ResultFile test
parameter.
The rest of the subprocedures that deal with validation services are created in a similar way.
Creating Main test
This test should set the required web tree model and call the sub-tests that works with validation services.
To create the Main test perform the following actions:
Create a new keyword test and name it Main.
Add the If ... Then operation to your test to check for the current web tree model. Specify the following
condition: Options.Web.TreeModel not equal to "Tree".
Add the Run Code Snippet operation as the child of the If ... Then operation. Specify the following code
fragment to be executed: Options.Web.TreeModel = "Tree".
The operation will set the Tree model if some other web tree model is enabled.
Add the Run Keyword Test operation and call the ValidateHTML_W3CMarkUpValidator subprocedure.
Pass the URL you want to check (say, www.google.com) as the first parameter, and the full path where to
store the verification result as the second parameter.

March 23, 2023

Prepared by Instructor;s Terefe F.(BSC)


10
Rift Valley University College Department Web Development & Database Administration Level III
Add two more Run Keyword Test operations and call other validation
subprocedures: ValidateHTML_WDGValidator and ValidateCSS_W3C_CSS. Pass the same set of
parameters, but remember to specify different files for saving the results.
Checking for Broken Links with the Web Accessibility Checkpoint
To check a web page for broken links, you can use a web accessibility checkpoint. You can insert it both
into keyword tests and script code and you can do this during test recording or at design time:
To create a checkpoint during the test recording, click Add Check on the Recording toolbar. Click Web
page in the resulting Checkpoint wizard.
To insert a new checkpoint in the script code at design time, on the Code Editor toolbar, click and then
click Web page.
To insert a new checkpoint into a keyword test at design time, drag the Web Accessibility
Checkpoint operation from the Operations list to the test area in the Keyword Test editor.
In the wizard, specify the checkpoint’s parameters:
Select the tested web page.
Click Accessibility if you create the checkpoint by using the wizard.
Select the Check link accessibility check box.
Press OK.
If you inserted the checkpoint into a keyword test, TestComplete will add the Web Accessibility
Checkpoint operation to the test. If you inserted the checkpoint into a script, TestComplete will generate
the checkpoint’ script statements and display them in special dialog box. Using this dialog you can then
command the test engine to insert the generated code into your script code, or cancel this operation.
Note:Instead of creating a new checkpoint, you can also modify the Check link accessibility property of an
existing Web Accessibility project element and then use this element to perform the check.
Example of CSS
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<body>
<div class="w3-container">
<h2>Borders</h2>
<div class="w3-panel w3-border">
<p>I have borders.</p>
</div>
<div class="w3-panel w3-border-left">
<p>I have only a left border.</p>
</div>
<div class="w3-panel w3-border-right">
<p>I have only a right border.</p>
</div>
<div class="w3-panel w3-border-top w3-border-bottom">
<p>I have top and bottom borders.</p>
</div>
</div>
</body>
</html>
Example 2
<!DOCTYPE html>
<html>
March 23, 2023

Prepared by Instructor;s Terefe F.(BSC)


11
Rift Valley University College Department Web Development & Database Administration Level III
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<style>
.w3-btn {margin-bottom:10px;}
</style>
<body>
<div class="w3-container">
<h2>Button Borders</h2>
<p>
<button class="w3-button w3-white w3-border">Button</button>
<button class="w3-button w3-yellow w3-border">Button</button>
<button class="w3-button w3-white w3-border w3-round-large">Button</button>
<button class="w3-button w3-white w3-border w3-border-red w3-round-large">Button</button>
</p>
<p>
<button class="w3-btn w3-white w3-border">Button</button>
<button class="w3-btn w3-yellow w3-border">Button</button>
<button class="w3-btn w3-white w3-border w3-round-large">Button</button>
<button class="w3-btn w3-white w3-border w3-border-red w3-round-large">Button</button>
</p>
</div>
</body>
</html>

March 23, 2023

Prepared by Instructor;s Terefe F.(BSC)


12

You might also like