basics of css

An

Introduction

to CSS

(Cascading

stylesheet)

Priya Goyal

CSS stands for Cascading Style Sheet.

Typical CSS file is a text file with an

extention.css and contains a series of commands or rules. These rules tell the HTML how to display.

*To create a style sheet, create a file using Notepad or Text Editor and

save it as a .css document and start writing the CSS code.

CSS Benefits

• Separates structure from presentation

• Provides advanced control of presentation

• Easy maintenance of multiple pages

• Faster page loading

• Better accessibility for disabled users

• Easy to learn

“HTML without CSS is like a piece of candy without a pretty wrapper.”

Without CSS, HTML elements typically flow from top to bottom of the page and position themselves to the left by default.

With CSS help, we can create containers or DIVs to better organize content and make a Web page visually appealing.

Attaching a Style Sheet

Attach a style sheet to a page by adding the code to the <head> section of the HTML page.

There are 3 ways to attach CSS to a page:

1. External Style Sheet: Best used to control styling on multiple pages.

<link rel="stylesheet" type="text/css" href="css/styles.css" />

.css file

body {background-color: lightblue;

}h1 {

color: navy;margin-left: 20px;

}

2. Internal Style Sheet: Best used to control styling on one page.

<style type=“text/css”>

h1 {color: red)

</style>

3. Inline Style Sheet*: CSS is not attached in the <header> but is used directly within HTML

tags.

<p style=“color: red”>Some Text</p>

CSS Rule Structure

A CSS RULE is made up of a selector

and a declaration. A declaration consists

of property and value.

selector {property: value;}

declaration

body { property: value; }

h1 { property: value; }

em { property: value; }

p { property: value; }

Universal SelectorThe universal selector is an asterisk.matches all element types in the document.*{ }

The Type Selectorthe same rules to several elements.h1, h2, h3 {}

The Class Selector< p class=”student” >…… < /p ><div class=“student”>…….</div>

‘ . ‘ is used to denote a classWe can use a class selector in one of two ways here.

1)One way is to directly assign the class name ‘student’. By using this, same rules will be applied to all elements whose class name is ‘student’..student {}

2)We can apply the attributes to specific elements.p.student {

text-align: center;color: red;

}

The ID SelectorThe id selector works just like a class selector, but works on the value of id attributes

#para1 {text-align: center;color: red;

}

The Border Properties

There are three properties of a border you can change:border - color border - style border - width

The border - color Propertyp {border-color:#ff0000;}

It may beborder - bottom - colorborder - right - colorborder - top - colorborder - left – color

The border - width Propertyp {border-width:4px;}

The value of the border - width property cannot be given as a percentage.. It may be

thinmediumThick

Can also giveborder - bottom - widthborder - right - widthborder - top - widthborder - left - width

The border - style Propertyp {border-style : solid;}

border - bottom - styleborder - right - styleborder - top - styleborder - left - style

The padding PropertyThe padding property allows you to specify how much space should appear between the content of an element and its border:

td {padding:5px;}

padding - bottompadding - toppadding - leftpadding - right

Background Color

With CSS, a color is most often specified by:a HEX value - like "#ff0000"an RGB value - like "rgb(255,0,0)"a color name - like "red"

body {background-color: #b0c4de;

}

Background Image

body {background-image: url("paper.gif");

}

Background-repeat-sets the background image position

background-repeat: repeat|repeat-x|repeat-y|no-repeat|initial|inherit;

body {background-image: url("img_tree.png");background-repeat: no-repeat;

}

Two background images

body {background-image: url("img_tree.gif"), url("img_flwr.gif");background-color: #cccccc;

}

Background Position

background-position: left top|left center|left bottom|right top|right center|rightbottom|center top|center center|center bottom|x% y% (The right bottom corner is 100% 100%)|xpos ypos(0px 0px)|Initial|inherit;

Body{Background-position : left top;}

If you only specify one keyword, the other value will be "center“.

Background Attachment

background-attachment: scroll|fixed|local|initial|inherit;

TEXT FORMATTING

Text Color

The color property is used to set the color of the text. With CSS, a color is most often specified by:

color: color|initial|inherit;

body {color: blue;

}h1 {

color: #00ff00;}

Value Description

color Specifies the text color.

initial Sets this property to its default value.

inherit Inherits this property from its parent element.

Text Alignment

The text-align property is used to set the horizontal alignment of a text.

Text-align:center|right|left|justify

h1 {text-align: center;

}

p.date {text-align: right;

}

p.main {text-align: justify;

}

Vertical-align Property

vertical-align: baseline|length|sub|super|top|text-top|middle|bottom|text-bottom|initial|inherit;

baseline Align the baseline of the element with the baseline of the parent element. This is default

length Raises or lower an element by the specified length. Negative values are allowed

% Raises or lower an element in a percent of the "line-height" property. Negative values are allowed

sub Aligns the element as if it was subscript

super Aligns the element as if it was superscript

top The top of the element is aligned with the top of the tallest element on the line

text-top The top of the element is aligned with the top of the parent element's font

middle The element is placed in the middle of the parent element

bottom The bottom of the element is aligned with the lowest element on the line

text-bottom The bottom of the element is aligned with the bottom of the parent element's font



img {vertical-align: text-top;

}

Text Decoration

The text-decoration property is used to set or remove decorations from text.

Text-decoration:none|overline|underline|line-through;

a {text-decoration: none;

}h1 {

text-decoration: overline;}

Text Transformation

The text-transform property is used to specify uppercase and lowercase letters in a text.

text-transform: none|capitalize|uppercase|lowercase|initial|inherit;

p.class1 {text-transform: uppercase;

}

h1{text-transform:lowercase;}

Text IndentationThe text-indent property is used to specify the indentation of the first line of a text.

text-indent: length|initial|inherit;

p {text-indent: 50px;

}

It may be both in percentage or in pixels

length Defines a fixed indentation in px, pt, cm, em, etc. Default value is 0

% Defines the indentation in % of the width of the parent element



word-spacing Property

word-spacing: normal|length|initial|inherit;

p {word-spacing: 30px;

}

Value Description

normal Defines normal space between words . This is default

length Defines an extra space between words in px, pt, cm, em, etc. Negative values are allowed



letter-spacing Property

letter-spacing: normal|length|initial|inherit;

h1 {letter-spacing: 2px;

}

h2 {letter-spacing: -3px;

}

Value Description

normal No extra space between characters. This is default

length Defines an extra space between characters (negative values are allowed)



Direction Property

direction: ltr|rtl|initial|inherit ;

div {direction: rtl;

}

Value Description

ltr The writing direction is left-to-right. This is default

rtl The writing direction is right-to-left



Text-shadow Property

text-shadow: h-shadow v-shadow blur-radius color|none|initial|inherit;

h1 {text-shadow: 2px 2px #ff0000;

}

h-shadow Required. The position of the horizontal shadow. Negative values are allowed

v-shadow Required. The position of the vertical shadow. Negative values are allowed

blur-radius Optional. The blur radius. Default value is 0

color Optional. The color of the shadow.

none Default value. No shadow



Unicode-bidi Property

unicode-bidi: normal|embed|bidi-override|intitial|inherit;

div {direction: rtl;unicode-bidi: bidi-override;

}

Value Description

normal Does not use an additional level of embedding. This is default

embed Creates an additional level of embedding

bidi-override Creates an additional level of embedding. Reordering depends on the direction property



White-space Property

white-space: normal|nowrap|pre|pre-line|pre-wrap|initial|inherit;

p {white-space: nowrap;

}

Value Description

normal Sequences of whitespace will collapse into a single whitespace. Text will wrap when necessary. This is default

Nowrap Sequences of whitespace will collapse into a single whitespace. Text will never wrap to the next line. The text continues on the same line until a <br> tag is encountered

Pre Whitespace is preserved by the browser. Text will only wrap on line breaks. Acts like the <pre> tag in HTML

pre-line Sequences of whitespace will collapse into a single whitespace. Text will wrap when necessary, and on line breaks

pre-wrap Whitespace is preserved by the browser. Text will wrap when necessary, and on line breaks



CSS Font

"Sans" means without

font: font-style font-variant font-weight font-size/line-height font-family|caption|icon|menu|message-box|small-caption|status-bar|initial|inherit;

p.ex1 {font: 15px arial, sans-serif;

}

font-style: normal|italic|oblique|initial|inherit;

Font-style

p.oblique {font-style: italic

}

Font-variant

font-variant: normal|small-caps|initial|inherit;

p.small {font-variant: small-caps;

}I/P-FONT-VARIANT: SMALL-CAPS;O/P-MY NAME IS HEGE REFSNES.

font-weightfont-weight: normal|bold|bolder|lighter|number|initial|inherit;

p.normal {font-weight: normal;

}

font-sizefont-size:medium|xx-small|x-small|small|large|x-large|xxlarge|smaller|larger|length|initial|inherit;

h1 {font-size: 250%;

}h1 {

font-size: 2.5em; /* 40px/16=2.5em */}Note-Smaller-Sets the font-size to a smaller size than the parent element

%-Sets the font-size to a percent of the parent element's font size

font-family

font-family: font|initial|inherit;p {

font-family: Times New Roman;}

Styling Links

The four links states are:a:link - a normal, unvisited linka:visited - a link the user has visiteda:hover - a link when the user’s mouse over ita:active - a link the moment it is clicked

/* unvisited link */a:link {

color: #FF0000;text-decoration: none;}

/* visited link */a:visited {

color: #00FF00;text-decoration: underline;}

/* mouse over link */a:hover {

color: #FF00FF;background-color: #FF704D;

}

/* selected link */a:active {

color: #0000FF;}

a:hover MUST come after a:link and a:visiteda:active MUST come after a:hover

List

In HTML, there are two types of lists:unordered lists (<ul>) - the list items are marked with bulletsordered lists (<ol>) - the list items are marked with numbers or letters

list-style: list-style-type list-style-position list-style-image|initial|inherit;

list-style-type: disc|circle|decimal|decimal-leading-zero|lower-alpha|lower-latin|lower-roman|none|square|upper-alpha;

list-style-position: inside|outside|initial|inherit;

list-style-image: none|url|initial|inherit;ul {

list-style-image: url('sqpurple.gif');}

Table

Table Borderstable, th, td {

border: 1px solid black;}

Collapse bordertable {

border-collapse: collapse;}table, th, td {

border: 1px solid black;}

Table Width and Heighttable {

width: 100%;}th {

height: 50px;}

Horizontal Text Alignmentth {

text-align: left;}

Vertical Text Alignmenttd {

height: 50px;vertical-align: bottom;

}

Table Paddingtd {

padding: 15px;}

Table Colorth {

background-color: green;color: white;

}

div {width: 300px;padding: 25px;border: 25px solid navy;margin: 25px;

}

CSS Box Model

Padding

padding: 25px 50px 75px 100px;top padding is 25pxright padding is 50pxbottom padding is 75pxleft padding is 100px

padding: 25px 50px 75px;top padding is 25pxright and left paddings are 50pxbottom padding is 75px

padding: 25px 50px;top and bottom paddings are 25pxright and left paddings are 50px

padding: 25px;all four paddings are 25px

padding-top: 25px;padding-right: 50px;padding-bottom: 25px;padding-left: 50px;

Length may be in percentage, pixels, pt, em.

Margin

The margin property can have from one to four values. (same as padding).

margin-top: 100px;margin-bottom: 100px;margin-right: 150px;margin-left: 50px;

Float and Clear

Clear

used to control the behavior of floating elementsClear property specifies on which sides of an element floating elements are not allowed to float.

div {clear: left;

}

Float

used to wrap text around images.img {float: right;margin: 0 0 10px 10px;

}

p {max-height: 10px;background-color: yellow;

}

p {min-height: 2px;background-color: yellow;

}

Max height of p must be <=10;

Min height of p must be >=2;

CSS Dimension

Display and Visibility

Hiding an Element - display:none or visibility:hidden

h1.hidden {visibility: hidden;

}

h1.hidden {display: none;

}

Visibility : hidden hides an element, but it will still take up the same space as before. The element will be hidden, but still affect the layout.

Display : none hides an element, and it will not take up any space. The element will be hidden, and the page will be displayed as if the element is not there.

Block and Inline Elements

Examples of block elements (has a line break before and after it):<h1><p><li><div>

Examples of inline elements (does not force line breaks):<span><a>

Changing How an Element is Displayed

li {display: inline;

}span {

display: block;}

Positioning

Static Positioning(by default)

Fixed Positioningwill not move even if the window is scrolled

Relative Positioning• positioned relative to its normal position• Relatively positioned elements are often used as container blocks for absolutely

positioned elements. (do not overlap)h2.pos_left {

position: relative;left: -20px;

}

h2.pos_right {position: relative;left: 20px;

}

position: fixed;

position: relative;

Absolute Positioning• positioned relative to the first parent element that has a position other

than static. If no such element is found, the containing block is <html>• Absolutely positioned elements can overlap other elements.

h2 {position: absolute;left: 100px;top: 150px;

}

Overlapping ElementsThe z-index property specifies the stack order of an element (which element should be placed in front of, or behind, the others).

img {position: absolute;left: 0px;top: 0px;z-index: -1;

}

Outline

Property Description Values

outline Sets all the outline properties in one declaration outline-coloroutline-styleoutline-widthinherit

outline-color Sets the color of an outline color_namehex_numberrgb_numberinvertinherit

outline-style Sets the style of an outline nonedotteddashedsoliddoublegrooveridgeinsetoutsetinherit

outline-width Sets the width of an outline thinmediumthicklengthinherit

http://www.w3schools.com/cssref/pr_outline.asp

http://www.w3schools.com/cssref/pr_outline-color.asp

http://www.w3schools.com/cssref/pr_outline-style.asp

http://www.w3schools.com/cssref/pr_outline-width.asp

References

1. http://www.w3schools.com/css/

Thank you

basics of css

Software