CSS Training in Bangalore
- 2. CSS stands for Cascading Style Sheets CSS, or Cascading Styles Sheets, is a way to style HTML. Whereas the HTML is the content, the style sheet is the presentation of that document. Styles don't smell or taste anything like HTML, they have a format of 'property: value' and most properties can be applied to most HTML tags. Cascading: Multiple styles can overlap in order to specify a range of style from a whole web site down to a unique element. Which style gets applied pertains to the rules of CSS cascading logic. Style: CSS deals specifically with the presentation domain of designing a web page (color, font, layout, etc). Sheet: Normally, CSS is a file separate from the HTML file –linked to the HTML file through its <head> (exceptions apply).
- 3. WHAT IS CSS? CSS stands for Cascading Style Sheets Styles define how to display (X)HTML elements Styles are normally stored in Style Sheets Multiple style definitions will cascade into one CSS stands for Cascading Style Sheets. It is also called as Style Sheets or Styles. CSS is used to add more effects for our html page to make it more attractive. Cascading means inheriting the features (styles). We can embed CSS in HTML, JavaScript, Asp, etc., The extension for css file is .css (contains only styles)
- 4. WHY CSS? Allows for much richer document appearances than HTML. Reduce workload by centralizing commands for visual appearance instead of scattered throughout the HTML doc. Use same style on multiple pages. Reduce page download size. Styles define how to display HTML elements Styles were added to HTML 4.0 to solve a problem External Style Sheets can save a lot of work External Style Sheets are stored in CSS files
- 5. CSS VERSIONS HISTORY The first CSS specification, CSS1, became a World Wide Web Consortium (W3C) recommendation in December 1996. It included properties for controlling typography, such as fonts, text alignment, spacing, margins, and list formatting. CSS2 came out in 1998, and contained a lot of the features that designers had been longing for. Boxes could be made to behave like HTML table cells, or they could be positioned in different ways; more powerful selectors were available. CSS3-2008 is currently in the works. CSS3 is split up into "modules". The old specification has been split into smaller pieces, and new ones are also added. any of the new CSS3 properties have been implemented in modern browsers. CSS 4 is W3C started drafting CSS 4 on Sep 29, 2009
- 6. WHY TO USE STYLES? Documents written with CSS are more flexible short clear Basic formating tool Easy multiple document managment Save time by using selector classes New opportunities in formating
- 7. CSS ADVANTAGES Flexibility: CSS layouts separates presentation from coding. By using an external style sheet for a website, designers can now amend the layout through this style sheet and all the pages will be updated accordingly. Codes Rendering: CSS layouts reduce the amount of codes in a file as compared to the traditional table-based designs. This reduction in codes will improve the website performance in the user-end. Accessibility: Accessibility is very important as it make sure a web page can be properly interpreted by all users.
- 8. Code: CSS is the standard for coding in HTML. CSS is compatible with most browsers. CSS reduces the length of the codes of web page, which decreases the page size, making it easy and fast to load in browsers Design: Use of CSS makes the design simple. CSS makes the management of the entire website easy to maintain by just changing the CSS file which contains the style details. Bandwidth: CSS reduces the HTML coding and page size. This reduces the bandwidth usage. Consistency: It is easy to maintain, handle and control the whole website made on CSS based HTML.
- 10. CSS COMMENTS Comments are used to explain your code, and may help you when you edit the source code at a later date. Comments are ignored by browsers. A CSS comment begins with "/*", and ends with "*/", like this: /*This is a comment*/ p { text-align:center; /*This is another comment*/ color:black; font-family:arial; }
- 11. { BASIC SYNTAX Made up of three parts: selector {property: value} The selector is normally the HTML element/tag you wish to define The property is the attribute you wish to change Every property has the value
- 12. TYPES OF STYLESHEETS/APPLYING CSS There are three ways to apply CSS to HTML. INLINE STYLES INTERNAL/Embedded STYLE SHEETS EXTERNAL STYLE SHEETS INLINE STYLE SHEETS we specify styles inside the tag in the body part. These styles will be applied only for that particular line. They look something like this: <p style="color: red">text</p> This will make that specific paragraph red. <span style="color:blue">BLUE</span> This will make that text style in blue color.
- 13. INTERNAL/EMBEDDED STYLE SHEETS If we specify the styles in our html file itself, then they are called as internal styles. These styles cannot be used in other files (i.e., if we want the same styles in other files, we should write them again in that other file) Embedded, or internal styles are used for the whole page. Inside the head tags, the style tags surround all of the styles for the page. SYNTAX : <html> <head> <style type=“text/css”> </style> </head> <body> </body></html>
- 14. EXTERNAL STYLE SHEETS If we declare the styles outside our html file (as another file), then they are called External Styles. These styles can be reusable i.e., they can be used for more than one file. We save the external file consisting of styles with .css file extension. The changes made in external files will effect all the html files which are using those styles. SYNTAX: <head> <link rel=“stylesheet” href=“#” type=“text/css”> </head>
- 15. SELECTORS Introduction: In the CSS, a class selector is a name preceded by a full stop (.) and an ID selector is a name preceded by a hash character (#). So the CSS might look something like: #top { background-color: #ccc; padding: 1em } .intro { color: red; font-weight: bold; }
- 16. Selectors are divided in to the following types: CLASS Selector ID Selector DESCENDANT Selector GROUPING Selector Class Selector : Allow you to associate a class with a particular subset, or class, of elements. so if we had following rule: Example: p.bold { font-weight: bold; } <p class="bold">Naresh i Technologies in Bold.</p> ID selectors works like class selectors except that they can only be used on one element per page Example: p#bold { font-weight: bold; } <p id="bold">Naresh i Technologies in Bold</p>
- 17. DESCENDENT SELECTORS specify that styles should only be applied, when the element in question is a descendent(for example a child or grand child) of another element).so this Example: h3 em { color: white; background-color:black; } plus this html <h3>welcome to <em>html</em></h3> GROUPING SELECTORS can also specify the same set of rules for more than one selector, like this : p,h1,h2{text-align:left;} Just place a comma between each one. You can even get more complex and group multiple class and id selectors : p.navigation, h1#content{font-weight:bold;}
- 18. LENGTHS AND PERCENTAGES There are many property-specific units for values used in CSS, but there are some general units that are used in a number of properties and it is worth familiarizing yourself with these before continuing. em (such as font-size: 2em) is the unit for the calculated size of a font. So "2em", for example, is two times the current font size. px (such as font-size: 12px) is the unit for pixels. pt (such as font-size: 12pt) is the unit for points. % (such as font-size: 80%) is the unit for... wait for it... percentages. Other units include pc (picas), cm (centimetres), mm (millimetres) and in (inches).
- 19. THE <DIV> TAG The <div> tag is a block-level tag because it encloses other tags and, importantly, it forces a line break on the page. Because it creates a line break before and after its enclosed content. Use of the <div> tag. <div style="text-indent:25px; margin-left:30px; margin-right:30px; text-align:justify"> <p>This paragraph has first-line indention of 25 pixels. It has both left and right margins of 30 pixel and its alignment is justified between the two margins.</p> <p>This paragraph also has first-line indention of 25 pixels. It has both left and right margins of 30 pixel and its alignment is justified between the margins. Both paragraphs are styled with an enclosing division tag to apply these styles to both paragraphs.</p> </div>
- 20. THE <SPAN> TAG A <span> tag is an in-line tag placed around text for the purpose of identifying a string of characters to which this tag’s style sheet is applied. The tag can enclose a single letter, a word, a phrase, a sentence, or any other sub-string of text for the purpose of identifying it for application of styling. As an in-line tag, the <span> tag surrounds a string of text enclosed inside a block-level container. Example: <p>this is <span style=”color:green”>span </span>tag</p>
- 21. POSITIONS IN CSS: Static: This is normal position scheme. The left and top properties do not apply. Relative: Offsets are relative to the box's normal position. Absolute: Offsets are relative to the box's containing block. Fixed: Offsets are the same as in the absolute model,but are fixed with respect to a particular point of reference. For example when viewed in a browser,fixed elements won't move when scrolled.
- 22. COLORS CSS brings 16,777,216 colors to your disposal. They can take the form of a name, an rgb (red/green/blue) value or a hex code. rgb(255,0,0) Which is the same as rgb(100%,0%,0%) Which is the same as #ff0000 Which is the same as #f00 There are 17 valid predefined colour names. They are aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, orange, purple, red, silver, teal, white, and yellow. transparent is also a valid value.
- 23. BACKGROUND PROPERTIES background-image background-repeat background-attachment background-position background:<color><image><repeat><attachme nt><position> Text You can alter the size and shape of the text on a web page with a range of properties, outlined below: font-family. This is the font itself, such as Times New Roman, Arial, or Verdana. font-size, font-weight, font-style, text-decoration, text-transform Text spacing
- 24. TEXT COLOR <html><head> <style type="text/css"> h1 {color: green} h2 {color: #dda0dd} p {color: rgb(0,0,255)} </style> </head> <body> <h1>This is header 1</h1> <h2>This is header 2</h2> <p>This is a paragraph</p> </body> </html> This is header 1 This is header 2 This is a paragraph
- 25. Margins and Padding margin and padding are the two most commonly used properties for spacing-out elements. A margin is the space outside of the element, whereas padding is the space inside the element. The Box Model Margins, padding and borders (see next page) are all part of what's known as the Box Model. The Box Model works like this: in the middle you have the content area (let's say an image), surrounding that you have the padding, surrounding that you have the border and surrounding that you have the margin CSS Borders Borders can be applied to most HTML elements within the body. To make a border around an element, all you need is border-style. The values can be solid, dotted, dashed, double, groove, ridge, inset and outset
- 27. LAYOUT PROPERTIES BORDER MARGIN PADDING POSITIONING FLOAT CLEAR Z-INDEX OVERFLOW VISIBLE
- 28. TYPOGRAPHY font-family font-style font-weight font-size font-variant line-height text-indent text-decoration text-align
- 29. CSS LIMITATIONS Some noted disadvantages of using "pure" CSS include Inconsistent browser support Absence of expressions Lack of Variables Lack of multiple backgrounds per element Control of Element Shapes
- 30. THANK YOU No. 5/3, Second Floor and Third Floor, BEML Layout, Varathur Road, Thubarahalli, Kundalahalli Gate, Bengaluru, Karnataka 560066