Made By : Lavish Chauhan & Abhay Verma PHP ASSIGNMENT CSS PPT Made By : Lavish Chauhan & Abhay Verma
Cascading Style Sheets (CSS) Describes the appearance, layout, and presentation of information on a web page HTML describes the content of the page Describes how information is to be displayed, not what is being displayed Can be embedded in HTML document or placed into separate .css file Controls the presentation layers in a web document by which developer gains more degree of control of website appearance . It can be cached after the first request and be re-used for every page on the same website, it does not have to be downloaded with every webpage so faster loading. CS380
Basic CSS rule syntax selector { property: value; ... } p { font-family: sans-serif; color: red; } A CSS file consists of one or more rules Each rule starts with a selector A selector specifies an HTML element(s) and then applies style properties to them a selector of * selects all elements
Advantages of CSS Better layout control. Reduce work. Faster download & Web Page loading. Easy maintenance. Search Engine Friendly. Absolute Positioning.
Disadvantages of CSS Cross browser Issues - Implementing initial CSS changes on a website is easy on the developer’s end. However, after the changes have been made, you will have to confirm the compatibility if the CSS is displaying similar change effects on all the browsers. This is simply due to the fact that CSS works differently on different browsers. Vulnerable - if you have worked with CSS, you probably know that it is easily accessible because of its open text-based system. An accident or a mere act of mischief with the files can end up disrupting the display and formatting of your entire website. It would only require a read/write access to the intended website to override the changes.
CSS properties for fonts Property Description font-family which font will be used font-size how large the letters will be drawn font-style used to enable/disable italic style font-weight used to enable/disable bold style CS380
Ways of inserting Style sheet in Html Including style information within HTML (INLINE) Embedding a style sheet (INTERNAL) Linking to an external style sheet (EXTERNAL) Importing a style sheet (IMPORTING)
Embedding style sheets: <style> <head> <style type="text/css"> p { font-family: sans-serif; color: red; } h2 { background-color: yellow; } </style> </head> HTML CSS code can be embedded within the head of an HTML page Bad style and should be avoided when possible CS380
Advantages Disadvantages Style must be downloaded every time someone visits the page which cause a slightly slower browsing experience It can be useful for sending the page via email or if is used as a template
Attaching a CSS file <link> <head> ... <link href="filename" type="text/css" rel="stylesheet" /> </head> HTML <link href="style.css" type="text/css" rel="stylesheet" /> <link href="http://www.google.com/uds/css/gsearch.css" rel="stylesheet" type="text/css" /> HTML a conflict (two sheets define a style for the same HTML element A page can link to multiple style sheet files In case of a conflict (two sheets define a style for the same HTML element), the latter sheet's properties will be used CS380
Advantages Disadvantages It can be created once and the rules applied to multiple web pages. Should you need to make widespread changes to your site design, you can make a single change in the stylesheet and it will be applied to all linked pages, saving time and effort. - In order to import style information for each document, an extra download is needed. Until the external style sheet is loaded, it may not be possible to render the document. For small number of style definitions, it is not viable.
Inline styles: The style attribute <p style="font-family: sans-serif; color: red;"> This is a paragraph</p> HTML This is a paragraph output Higher precedence than embedded or linked styles Used for one-time overrides and styling a particular element They’re useful for quick, permanent changes, but are less flexible than external and internal stylesheets as each inline style you create must be separately edited should you decide to make a design change. CS380
Importing CSS file within a CSS @ import “new style.css” CSS e.g. : body { background-color : blue } h1 { color: white; text align: center; Import the “new style.css" style sheet ONLY if the media is print
Advantages Disadvantages By importing your style sheets, you would essentially be making them available to more modern, standards compliant browsers while "hiding" them from the older browser versions. Another use for the @import method is to use multiple style sheets on a page, while only including a single link in your document's . There are no performance problems, although we’ll see it could result in JavaScript errors due to race conditions. The two stylesheets are downloaded in parallel. The problems arise when @import is embedded in other stylesheets or is used in combination with LINK.
THE END