Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
14 views

Basics of CSS For Web

Uploaded by

fouzianawaz1997
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
14 views

Basics of CSS For Web

Uploaded by

fouzianawaz1997
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 16

1) DOCTYPE Declaration

The <!DOCTYPE> declaration must be the very first thing in your HTML document,
before the <html> tag.

The <!DOCTYPE> declaration is not an HTML tag; it is an instruction to the web


browser about what version of HTML the page is written in.

In HTML 4.01, the <!DOCTYPE> declaration refers to a DTD, because HTML 4.01
was based on SGML. The DTD specifies the rules for the markup language, so that
the browsers render the content correctly.

HTML5 is not based on SGML, and therefore does not require a reference to a DTD.

Tip: Always add the <!DOCTYPE> declaration to your HTML documents, so that the
browser knows what type of document to expect.

• http://www.w3schools.com/tags/tag_doctype.asp

2) http://www.go4expert.com/articles/html4-vs-html5-comparison-
t30141/

3) Design an email registration Form witch in submit shows


Congratulation!!!! Message
Cascading Style Sheet-CSS

CSS is used to control the style of a web document in a simple and easy
way.

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, variations in display for different
devices and screen sizes as well as a variety of other effects.

Advantages of CSS:
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.
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.
Offline Browsing − CSS can store web applications locally with the help of an offline
catche.Using of this, we can view offline websites.The cache also ensures faster loading
and better overall performance of the website.
Platform Independence − The Script offer consistent platform independence and can
support latest browsers as well.
CSS-Syntax

A CSS comprises of style rules that are interpreted by the browser and then
applied to the corresponding elements in your document. A style rule is
made of three parts −

 Selector − A selector is an HTML tag at which a style will be applied. This could
be any tag like <h1> or <table> etc.

 Property - A property is a type of attribute of HTML tag. Put simply, all the
HTML attributes are converted into CSS properties. They could be
color, border etc.

 Value - Values are assigned to properties. For example, color property can have
value either red or #F1F1F1 etc.

You can put CSS Style Rule Syntax as follows −

selector { property: value }

Example: You can define a table border as follows −

table{ border :1px solid #C00; }

Here table is a selector and border is a property and given value 1px solid
#C00 is the value of that property.
Ways of defining selectors

1) The Type Selectors


This is the same selector we have seen above. Again, one more example to
give a color to all level 1 headings:

h1{

color: #36CFFF;

2) The Universal Selectors


Rather than selecting elements of a specific type, the universal selector
quite simply matches the name of any element type −

* { color: #000000; }

This rule renders the content of every element in our document in black.

3) The Descendant Selectors


Suppose you want to apply a style rule to a particular element only when it
lies inside a particular element. As given in the following example, style rule
will apply to <em> element only when it lies inside <ul> tag.

ul em { color: #000000; }

4) The Class Selectors


You can define style rules based on the class attribute of the elements. All
the elements having that class will be formatted according to the defined
rule.

.black { color: #000000; }

This rule renders the content in black for every element with class attribute
set to black in our document.

You can make it a bit more particular. For example:

h1.black { color: #000000; }


This rule renders the content in black for only <h1> elements with class
attribute set to black.

You can apply more than one class selectors to given element.

<p class="center bold">

This para will be styled by the classes center and bold.

</p>

5) The ID Selectors
You can define style rules based on the id attribute of the elements. All the
elements having that id will be formatted according to the defined rule.

#black { color: #000000; }

This rule renders the content in black for every element with id attribute set
to black in our document.

You can make it a bit more particular. For example −

h1#black { color: #000000; }

This rule renders the content in black for only <h1> elements
with id attribute set to black.

The true power of id selectors is when they are used as the foundation for
descendant selectors, For example:

#black h2 { color: #000000; }

In this example all level 2 headings will be displayed in black color when
those headings will lie within tags having id attribute set to black.

6) The Child Selectors


You have seen the descendant selectors. There is one more type of selector,
which is very similar to descendants but have different functionality.
Consider the following example −

body > p { color: #000000; }


This rule will render all the paragraphs in black if they are direct child of
<body> element. Other paragraphs put inside other elements like <div> or
<td> would not have any effect of this rule.

7) The Attribute Selectors


You can also apply styles to HTML elements with particular attributes. The
style rule below will match all the input elements having a type attribute
with a value of text −

input[type = "text"]{ color: #000000; }

The advantage to this method is that the <input type = "submit" />
element is unaffected, and the color applied only to the desired text fields.

There are following rules applied to attribute selector.

 p[lang] - Selects all paragraph elements with a lang attribute.

 p[lang="fr"] - Selects all paragraph elements whose lang attribute has a value
of exactly "fr".

 p[lang~="fr"] - Selects all paragraph elements whose lang attribute contains


the word "fr".

 p[lang|="en"] - Selects all paragraph elements whose lang attribute contains


values that are exactly "en", or begin with "en-".

Multiple Style Rules


You may need to define multiple style rules for a single element. You can
define these rules to combine multiple properties and corresponding values
into a single block as defined in the following example −

h1 {

color: #36C;

font-weight: normal;

letter-spacing: .4em;

margin-bottom: 1em;
text-transform: lowercase;

Here all the property and value pairs are separated by a semi colon (;).
You can keep them in a single line or multiple lines. For better readability
we keep them into separate lines.

For a while, don't bother about the properties mentioned in the above
block. These properties will be explained in the coming chapters and you
can find complete detail about properties in CSS References.

Grouping Selectors
You can apply a style to many selectors if you like. Just separate the
selectors with a comma, as given in the following example −

h1, h2, h3 {

color: #36C;

font-weight: normal;

letter-spacing: .4em;

margin-bottom: 1em;

text-transform: lowercase;

This define style rule will be applicable to h1, h2 and h3 element as well.
The order of the list is irrelevant. All the elements in the selector will have
the corresponding declarations applied to them.

You can combine the various class selectors together as shown below −

#content, #footer, #supplement {

position: absolute;

left: 510px;

width: 200px;}

CSS-Inclusion
There are four ways to associate styles with your HTML document.
 Embedded CSS
 Inline CSS
 External CSS
 Imported CSS
Most commonly used methods are inline CSS and External CSS.

1) Embedded CSS - The <style> Element


You can put your CSS rules into an HTML document using the <style>
element. This tag is placed inside <head>...</head> tags. Rules defined
using this syntax will be applied to all the elements available in the
document. Here is the generic syntax −

Following is the example of embed CSS based on the above syntax −

<!DOCTYPE html>

<html>

<head>

<style type = "text/css" media = "all">

body {

background-color: linen;

h1 {

color: maroon;
margin-left: 40px;

</style>

</head>

<body>

<h1>This is a heading</h1>

<p>This is a paragraph.</p>

</body>

</html>

Attributes
Attributes associated with <style> elements are −
Attribute Value Description

Type text/css Specifies the style sheet language as a content-type


(MIME type). This is required attribute.

Media Screen
tty
tv
projection
Specifies the device the document will be displayed on.
handheld
Default value is all. This is an optional attribute.
print
braille
aural
all

2) Inline CSS - The style Attribute


You can use style attribute of any HTML element to define style rules. These
rules will be applied to that element only. Here is the generic syntax −

<element style = "...style rules....">

Attributes
Attribute Value Description

Style style rules The value of style attribute is a combination of style


declarations separated by semicolon (;).

Example
Following is the example of inline CSS based on the above syntax −

<html> <head> </head>

<body> <h1 style = "color:#36C;"> This is inline CSS </h1>

</body>

</html>

3) External CSS - The <link> Element


The <link> element can be used to include an external stylesheet file in
your HTML document.
An external style sheet is a separate text file with .css extension. You
define all the Style rules within this text file and then you can include this
file in any HTML document using <link> element.

Here is the generic syntax of including external CSS file −

<head>
<link type = "text/css" href = "..." media = "..." />
</head>

Attributes
Attributes associated with <style> elements are −

Attribute Value Description

Type text/css Specifies the style sheet language as a content-type


(MIME type). This attribute is required.

Href URL Specifies the style sheet file having Style rules. This
attribute is a required.

Media screen
tty
tv
projection
Specifies the device the document will be displayed on.
handheld
Default value is all. This is optional attribute.
print
braille
aural
all

Consider a simple style sheet file with a name mystyle.css having the following
rules −
h1, h2, h3 {
color: #36C;
font-weight: normal;
letter-spacing: .4em;
margin-bottom: 1em;
text-transform: lowercase;
}

Now you can include this file mystyle.css in any HTML document as follows
−
<head>
<link type = "text/css" href = "mystyle.css" media = " all" />
</head>
4) Imported CSS - @import Rule
@import is used to import an external stylesheet in a manner similar to the
<link> element. Here is the generic syntax of @import rule.

<head>
<@import "URL";
</head>

Here URL is the URL of the style sheet file having style rules.

You can use another syntax as well −


<head>
<@import url("URL");
</head>

Example
Following is the example showing you how to import a style sheet file into
HTML document −

<head>
@import "mystyle.css";
</head>

CSS Rules Overriding


We have discussed four ways to include style sheet rules in a an HTML
document. Here is the rule to override any Style Sheet Rule.
 Any inline style sheet takes highest priority. So, it will override any rule defined
in <style>...</style> tags or rules defined in any external style sheet file.

 Any rule defined in <style>...</style> tags will override rules defined in any
external style sheet file.

 Any rule defined in external style sheet file takes lowest priority, and rules
defined in this file will be applied only when above two rules are not applicable.

Handling old Browsers


There are still many old browsers who do not support CSS. So, we should
take care while writing our Embedded CSS in an HTML document. The
following snippet shows how you can use comment tags to hide CSS from
older browsers −

<style type="text/css">
<!--
body, td {
color: blue;
}
-->
</style>

CSS Comments
Many times, you may need to put additional comments in your style sheet
blocks. So, it is very easy to comment any part in style sheet. You can
simple put your comments inside /*.....this is a comment in style
sheet.....*/.

You can use /* ....*/ to comment multi-line blocks in similar way you do in
C and C++ programming languages.

Example
p { color: red; /* This is a comment */

text-align: center;}

CSS - Measurement Units


CSS - Colors

CSS - Background
You can set the following background properties of an element −
The background-color property is used to set the background color of an element.
<p style = "background-color: yellow;">

The background-image property is used to set the background image of an element.

The background-repeat property is used to control the repetition of an image in the


background.

The background-position property is used to control the position of an image in the


background.

The background-attachment property is used to control the scrolling of an image in


the background.

The background property is used as a shorthand to specify a number of other


background properties.

<style>

body {

background-image: url("/css/images/css.jpg");

background-color: #cccccc;

background-repeat: repeat;

background-position:100px; // background-position:100px 200px;

background-attachment:scroll;

</style>

CSS-Font
You can set following font properties of an element −
 The font-family property is used to change the face of a font.

<p style="font-family:georgia,garamond,serif;">

This text is rendered in either georgia, garamond, or the default serif font depending
on which font you have at your system.</p>

 The font-style property is used to make a font italic or oblique.

<p style="font-style:italic;">

 The font-variant property is used to create a small-caps effect.

<p style="font-variant:small-caps;">This text will be rendered as small caps </p>

 The font-weight property is used to increase or decrease how bold or light a


font appears.

<body>

<p style="font-weight:bold;">This font is bold.</p>

<p style="font-weight:bolder;">This font is bolder.</p>

<p style="font-weight:500;">This font is 500 weight.</p>

</body>

 The font-size property is used to increase or decrease the size of a font.

<body>

<p style="font-size:20px;">This font size is 20 pixels</p>

<p style="font-size:small;">This font size is small</p>

<p style="font-size:large;">This font size is large</p>

</body>

 The font property is used as shorthand to specify a number of other font


properties.

<body>

<p style="font:italic small-caps bold 15px georgia;">

Applying all the properties on the text at once.

</p>

</body>

CSS-TEXT: You can set following text properties of an element


 The color property is used to set the color of a text.
<p style="color:red;"> This text will be written in red. </p>

 The direction property is used to set the text direction.

<p style="direction:rtl;"> This text will be renedered from right to left </p>

 The letter-spacing property is used to add or subtract space between the


letters that make up a word.

<p style="letter-spacing:5px;"> This text is having space between letters. </p>

 The word-spacing property is used to add or subtract space between the words
of a sentence.

<p style="word-spacing:5px;"> This text is having space between words. </p>

 The text-indent property is used to indent the text of a paragraph.

<p style="text-indent:1cm;"> This text will have first line indented by 1cm and this
line will remain at its actual position this is done by CSS text-indent property.</p>

 The text-align property is used to align the text of a document.

<p style="text-align:center;"> This will be center aligned. </p>

 The text-decoration property is used to underline, overline, and strikethrough


text. Possible values are none, underline, overline, line-through, blink.

<p style="text-decoration:underline;"> This will be underlined </p>

 The text-transform property is used to capitalize text or convert text to


uppercase or lowercase letters. Possible values are none, capitalize,
uppercase, lowercase.

<p style="text-transform:capitalize;">

 The white-space property is used to control the flow and formatting of text.
Possible values are normal, pre, nowrap.

<p style="white-space:pre;">

 The text-shadow property is used to set the text shadow around a text.

<p style="text-shadow:4px 4px 8px blue;"> If your browser supports the CSS text-shadow
property, this text will have a blue shadow. </p>

You might also like