Vskills certified css designer Notes

Certified CSS Designer
Sample Material

www.vskills.in Page 7
1. CSS BASICS1. CSS BASICS1. CSS BASICS1. CSS BASICS
1.1 Introduction1.1 Introduction1.1 Introduction1.1 Introduction
Cascading Style Sheets (CSS) is a language specifically made for illustrating the appearance of
various parts of a web page. CSS gives option to control the text color, fonts style, inter- paragraph
spacing, columns sizing and layout, background images or colors and many other visual effects.
CSS is used to style web pages, developed in HTML or XHTML
The major advantage of CSS is to customize the style of an entire website without changing each
page individually.
W3C laid out details for a style sheet language to separate the visual appearance of a web page
from its content and in 1994, Cascading HTML Style Sheets was proposed. CHSS became CSS
and in December 1996 the CSS level 1 Recommendation was published. Three more CSS
speciﬁcations have been published by the W3C of which CSS 2 became a recommendation
followed by CSS 2.1 and CSS 3 is an upcoming recommendation.
1.2 Why to use CSS1.2 Why to use CSS1.2 Why to use CSS1.2 Why to use CSS
HTML and XHTML is the base for all web pages on internet. CSS prevents repurposing of
HTML tags to get certain visual effects.
CSS-driven web design makes writing HTML easier. The HTML-only approach requires a lot
more code to achieve the same visual effects compared with CSS version.
BackgroundBackgroundBackgroundBackground
HTML was developed to structure information for easy comprehension like the <h1> tag indicates
an important headline and the <h2> tag for a subheading of the <h1> tag.
But soon HTML tags were used to control appearance rather than structure information like the
<blockquote> tag. The <table> tag was used to create columns of text and accurately place pictures
and text on a page. But sometimes nesting a table within a table within a table was used making it
very difficult to comprehend and maintain.
Hence, browser came out with new tags and attributes for making a page look better like <font> tag
has specification for font color and typeface. Graphics were also used to achieve desired visual
effects.
With introduction of CSS by W3C, HTML is used to structure and organize the content and CSS
to make that content visually appealing thus, separating presentation of content from the structure
and organization of content.
AdvantagesAdvantagesAdvantagesAdvantages
Effort and Time ReductionEffort and Time ReductionEffort and Time ReductionEffort and Time Reduction: CSS substantially reduces the time and effort to compose not only a
single document but for the whole website.

Bandwidth and Space ReductionBandwidth and Space ReductionBandwidth and Space ReductionBandwidth and Space Reduction: CSS is more versatile than HTML styling tags as its cascading
property reduces the disk space for styling a website and also the bandwidth required.
Centralized UpdateCentralized UpdateCentralized UpdateCentralized Update - Presentation and visual effects of a website can be centralized by using CSS.
IndependentIndependentIndependentIndependent: CSS can be written independently of HTML.
Multiple Device SupportMultiple Device SupportMultiple Device SupportMultiple Device Support: CSS allows content to be optimized for different devices like printer,
mobile devices, screen, etc using the same HTML document.
CachingCachingCachingCaching: CSS downloaded by browsers are cached hence, CSS ﬁle is downloaded only once fast
performance of website.
Advantages are illustrated as
1.31.31.31.3 CSSCSSCSSCSS EditorsEditorsEditorsEditors
CSS can be written with a plain text editor like notepad but advanced text editors do useful things
like code coloring or syntax highlighting, automatically completing the code and some editors are
Notepad++Notepad++Notepad++Notepad++: It is open source editor which is free.
Crimson EditorCrimson EditorCrimson EditorCrimson Editor: It is also a free editor.
HTMLHTMLHTMLHTML----kitkitkitkit: It is also a free editor.
Adobe DreAdobe DreAdobe DreAdobe Dreamweaveamweaveamweaveamweaver: It is commercial paid software.
1.41.41.41.4 AAAA CSS ExamCSS ExamCSS ExamCSS Exampleplepleple
This example introduces CSS and for which the HTML document is needed is given first and
then followed by the CSS file.
Webpage.htmWebpage.htmWebpage.htmWebpage.htm:
In your text editor of choice, enter the following markup

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1-strict.dtd">
<html lang=”en”>
<head>
<title>Vskills Example </title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<h1>Vskills Certification </h1>
<div class="list1">
<h2>CSS Designer</h2>
<p>CSS designer certification is used to impart CSS certification.</p>
</div>
<div class="list1">
<h2>HTML Certification</h2>
<p>HTML certification is used to impart HTML certification.</p>
</div>
</body>
</html>
Style.cssStyle.cssStyle.cssStyle.css:
body {
width: 650px;
margin: 0 auto;
background: #FFF;
font: 12px sans-serif;
}
h1 {
font-size: 20px;
}
h2 {
font-size: 16px;
margin-top: 0;
}
.list1 {
margin: 10px 10px;
padding: 20px 20px;
border: 1px solid #F00;
}

OutputOutputOutputOutput:
As the figure shows that CSS can be used to stylize the various HTML elements on a web page
thus simplifying the process of styling the same.
1.5 Custom CSS1.5 Custom CSS1.5 Custom CSS1.5 Custom CSS
Web browsers in which CSS works, is not same as different browsers are installed in different
computers and each has different versions of same browser as well. Browser and their respective
versions support different levels of CSS styling and for achieving the visual effects of CSS across all
of them, work-around are used to get over the patchy support. Different browsers are
BrowserBrowserBrowserBrowser Rendering EngineRendering EngineRendering EngineRendering Engine CSS 2.CSS 2.CSS 2.CSS 2.1 support1 support1 support1 support
Google Chrome WebKit Full
Mozilla Firefox Gecko Full
Apple Safari WebKit Full
Internet Explorer Trident Full from IE 7
Opera Presto Full
1.61.61.61.6 Cross Browser TestingCross Browser TestingCross Browser TestingCross Browser Testing
There are a lot of web browsers for different operating systems and cross browser testing on some
is discussed
WindowsWindowsWindowsWindows- It can only run one version of IE hence can test only in installed version like IE 6, IE 7
or IE 8 but IETester program can display a web page for different versions like in IE 5.5, IE 6, IE
7 and IE 8. Install other browsers like Firefox, Safari, Opera or Chrome.
MacMacMacMac - Safari web browser is provided but for other web browser use a virtualization software like
VMWare.
Many cross-browser testing services websites are on internet for doing this task.

1.1.1.1.7777 IncludIncludIncludIncludinginginging CSSCSSCSSCSS
CSS can be included in a web page in following four ways
Embedded Style SheetsEmbedded Style SheetsEmbedded Style SheetsEmbedded Style Sheets - Embedded style sheets are included between <style> and </style> tags in
an web page’s head section as
<style type=”text/css”>
body { font: 12px sans-serif; }
</ style >
External Style SheetsExternal Style SheetsExternal Style SheetsExternal Style Sheets – In it CSS is in a separate document which is linked to an web page by the
<link> element with “rel” attribute having “stylesheet” as its value, “type” attribute having ”text/css”
as its value and “href “ attribute having the path to CSS file. It is used as
<link rel=”stylesheet” type=”text/css” href=”style.css”>
rel="stylesheet" tells the link type —in this case, a link to a style sheet.
type="text/css" lets web browser know the type of data to get—a text file, having CSS.
href points to the location of the external CSS file and has the value of a URL similar to the src
attribute in an <image> tag.
Import RuleImport RuleImport RuleImport Rule – It is similar to external style sheet but instead of <link> element, it uses “@import”
with “url” attribute storing the path to the CSS file. It is used as
<style type=”text/css”>
@import url(style.css);
</ style >
It can attach external style sheets to an external style sheet but the <link> tag can’t.
Direct StyleDirect StyleDirect StyleDirect Style - Inline styles with the style attribute are used to apply CSS rules directly to an element
in an web as
<body style=”font: 12px sans-serif;”>
What to chooseWhat to chooseWhat to chooseWhat to choose – External style sheets are preferred because it collects all style information in a
single file that is link to a web page with just a single line of code. You can attach the same external
style sheet to every page in your website, providing a unified design. It also makes a complete site
makeover as easy as editing a single text file.
It also help web pages load faster as no byte-hogging HTML tables or <font> tags or internal CSS
style code is used also, it is stored in cache or temporary space on computer for quick and
repeated access.

Internal CSS usage is explained in the figure
1.81.81.81.8 ValidatingValidatingValidatingValidating CSSCSSCSSCSS
CSS can be validated similar to HTML by CSS validator tool (http://jigsaw.w3.org/css-validator/)
provided by W3C by typing the URL of a web page (or the address to an external CSS file), or
uploading a CSS file or copy and pasting CSS code into a web form and submit it for validation.
Web browsers also have built-in error checking tools for examining CSS like in Mozilla Firefox
click Error Console option in Tools menu to open CSS errors.
It is shown in the figure.

Self Assessment QSelf Assessment QSelf Assessment QSelf Assessment Questionsuestionsuestionsuestions
Q.1 CSS is used for
A. Content Development
B. Content tagging
C. Content Styling
D. None
Q.2 Only external CSS files can be used for styling a web page
A. True
B. False
C. Can not say
D. None
Q.3 CSS should be validated
A. True
B. False
C. Can not say
D. None
AnswersAnswersAnswersAnswers :::: 1-C, 2-B,3-A

Vskills certified css designer Notes

Related slideshows

More Related Content

Vskills certified css designer Notes