Srijan Presentation on CSS by Kamal and Prateek

8/8/2019 Srijan Presentation on CSS by Kamal and Prateek

1/25

Srijan Technologies Pvt. Ltd.

CSS Session

Presentation By:Kamalpreet Kaur Prateek Sharma


2/25


Cascading Style Sheets


3/25


What Is CSS, Why it is used?

Defining a Rule

Different ways of applying CSS

Internal StyleSheet

External StyleSheet

Inline Styles Import StyleSheet

Box Model

Index

Continued to next slide


4/25


CSS Float CSS Sprite

Browser Compatiblity

Resets Fluid and Fixed Layout

CSS Specificity

CSS Tools


5/25


CSS is used to ensure better visual experience for

users on web pages. It is used by way of defining

colors, fonts, layout and other aspects of

document presentation.


6/25


Some Examples


7/25Srijan Technologies Pvt. Ltd.



Defining a Rule



Types of CSS Styles

Internal StyleSheets

External StyleSheets

Inline StyleSheets

Importing StyleSheets



p {color: white; }

body {background-color:black; }

White text on a blackbackground!

Internal Style Sheet



Advantages of Internal Style Sheets

Internal style sheets affect only the page they are on. Internal style sheets can use classes and IDs. Internal style sheets don't require that you upload

multiple files. Internal styles may have higher precedence than external

style sheets.



Disadvantages of Internal Style Sheet They affect only the page they are on.

Internal style sheets increase page load times.



External Style Sheet

Advantages of External Style Sheets : You can control the look and feel of several documents at once.

Disadvantages of External Style Sheets:

If you only have a small number of styles, they can increase thecomplexity of your site. External style sheets get big very quickly as it's hard to tell when a

style is no longer in use, because it's not deleted when the page isremoved.



INLINE STYLES

Importing a CSS file

@import "newstyles.css";


16/25


BOX MODEL

Margin - Clears an area around the

border. The margin does not have a

background color, it is completely

transparent

Border - A border that goes around

the padding and content. The border

is affected by the background color

of the box

Padding - Clears an area around the content. The padding is affected by the background colorof the box

Content - The content of the box, where text and images appear


17/25


18/25


19/25


Browser Compatibility Your Web browser is a translation

device. It takes a document written

in the HTML language and translatesit into a formatted Web page.

For example, the HTML standards saythat the TABLE tag should support aCELLSPACING attribute to define thespace between parts of the table.

But standards don't define thedefault value for that attribute, sounless you explicitly defineCELLSPACING when building yourpage, two browsers may usedifferent amounts of white space inyour table.


20/25


Resets

Global Reset ensures almost an identicalpresentation of a site across all thebrowsers.In every case different browsers applies itsown set of defaults to the site which gives

an inconsistent UI to the site in differentbrowsers...

A Global Reset Fixes this issue and lets youbuild a site from absolute base.

Using a CSS Frameworks is not always recommended but a CSS Reset is all you

need. There are many different resets from simple to complex ones.


21/25


Fixed vs. Fluid vs. Elastic Layout

A fixed website layout has a wrapper

that is a fixed width, and the

components inside it have either

percentage widths or fixed widths.

In a fluid website layout, also referred

to as a liquid layout, the majority of

the components inside have

percentage widths, and thus adjust to

the users screen resolution


22/25


CSS Specificity

Specificity

decreases as

we go down


23/25


Tools Used for CSS

W3C CSS Validator

CSS Validator Firefox Add-On

CSSCheck

CSS Analyzer
http://jigsaw.w3.org/css-validator/https://addons.mozilla.org/en-US/firefox/addon/2289http://www.htmlhelp.com/tools/csscheck/http://juicystudio.com/services/csstest.phphttp://juicystudio.com/services/csstest.phphttp://www.htmlhelp.com/tools/csscheck/https://addons.mozilla.org/en-US/firefox/addon/2289https://addons.mozilla.org/en-US/firefox/addon/2289https://addons.mozilla.org/en-US/firefox/addon/2289http://jigsaw.w3.org/css-validator/http://jigsaw.w3.org/css-validator/


24/25


Clean up and optimize your CSS code

Clean up options

Dust-Me Selectors

CSS Redundancy CheckerOptimize and Compress your CSS code

CSS Tidy CSS Drive CSS Compressor Robson CSS Compressor
http://www.sitepoint.com/dustmeselectors/http://services.immike.net/css-checker/http://csstidy.sourceforge.net/http://www.cssdrive.com/index.php/main/csscompressor/http://iceyboard.no-ip.org/projects/css_compressorhttp://iceyboard.no-ip.org/projects/css_compressorhttp://www.cssdrive.com/index.php/main/csscompressor/http://csstidy.sourceforge.net/http://services.immike.net/css-checker/http://www.sitepoint.com/dustmeselectors/


25/25

S ij T h l i P L d

Visit http://www.srijan.in for more on website development

Thank you!
http://www.srijan.in/http://www.srijan.in/

Srijan Presentation on CSS by Kamal and Prateek

Documents

Transcript of Srijan Presentation on CSS by Kamal and Prateek