Cascading Style Sheet KAVERI KAR (ASSISTANT PROFESSOR) SSIPMT, RAIPUR

Size: px

Start display at page:

Download "Cascading Style Sheet KAVERI KAR (ASSISTANT PROFESSOR) SSIPMT, RAIPUR"

Earl Ward
5 years ago
Views:

1 Cascading Style Sheet

2 Cascading Style Sheets, fondly referred to as 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. CSS is easy to learn and understand but it provides powerful control over the presentation of an HTML document. Most commonly, CSS is combined with the markup languages HTML or XHTML.

3 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.

4 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.

5 Who Creates and Maintains CSS? CSS was invented by Håkon Wium Lie on October 10, 1994 and maintained through a group of people within the W3C called the CSS Working Group. The CSS Working Group creates documents called specifications. When a specification has been discussed and officially ratified by W3C members, it becomes a recommendation. These ratified specifications are called recommendations because the W3C has no control over the actual implementation of the language. Independent companies and organizations create that software. NOTE The World Wide Web Consortium, or W3C is a group that makes recommendations about how the Internet works and how it should evolve.

6 CSS Versions Cascading Style Sheets, level 1 (CSS1) was came out of W3C as a recommendation in December This version describes the CSS language as well as a simple visual formatting model for all the HTML tags. CSS2 was became a W3C recommendation in May 1998 and builds on CSS1. This version adds support for media-specific style sheets e.g. printers and aural devices, downloadable fonts, element positioning and tables. CSS3 was became a W3C recommendation in June 1999 and builds on older versions CSS. it has divided into documentations is called as Modules and here each module having new extension features defined in CSS2. CSS3 Modules

7 CSS? CSS stands for Cascading Style Sheets A CSS code is used to style an HTML document. When you create a website a browser reads the HTML file and any CSS code, javascript, etc., written within the HTML. It then displays it according to what those codes tell it to do. CSS describes how HTML elements are to be displayed on screen, paper, or in other media CSS saves a lot of work. It can control the layout of multiple web pages all at once External style Sheets are stored in CSS files CSS is used to define styles for your web pages, including the design, layout and variations in display for different devices and screen sizes.

8 HTML was NEVER intended to contain tags for formatting a web page! HTML was created to describe the content of a web page, like: <h1>this is a heading</h1> <p>this is a paragraph.</p> When tags like <font>, and color attributes were added to the HTML 3.2 specification, it started a nightmare for web developers. Development of large websites, where fonts and color information were added to every single page, became a long and expensive process. To solve this problem, the World Wide Web Consortium (W3C) created CSS. CSS removed the style formatting from the HTML page!

9 The style definitions are normally saved in external.css files. With an external stylesheet file, you can change the look of an entire website by changing just one file! CSS Syntax A CSS rule-set consists of a selector and a declaration block: The selector points to the HTML element you want to style. The declaration block contains one or more declarations separated by semicolons. Each declaration includes a CSS property name and a value, separated by a colon. A CSS declaration always ends with a semicolon, and declaration blocks are surrounded by curly braces.

10 The selector points to the HTML element you want to style. The declaration block contains one or more declarations separated by semicolons. Each declaration includes a CSS property name and a value, separated by a colon. A CSS declaration always ends with a semicolon, and declaration blocks are surrounded by curly braces.

11 CSS Selectors CSS selectors are used to "find" (or select) HTML elements based on their element name, id, class, attribute, and more. CSS selectors are HTML tags to which a CSS style is applied. This could be any tag like < p > or < h1 > etc. These are patterns used to select the HTML tags that you want to style. These patterns may range from simple element names to rich contextual patterns. In the following sections, looking at how you can use different types of a selectors to specify which elements a style sheet rule can apply to.

12 The element Selector The element selector selects elements based on the element name. For suppose you can select all <p> elements on a page like this (in this case, all <p> elements will be center-aligned, with a red text color): p { } text-align: center; color: red;

13 START TYPING THE BASIC HTML <!DOCTYPE html> <html> <head><title>hello World</title></head> <body> <p>hello World!</p> <p>these paragraphs are styled with CSS.</p> <p>these paragraphs are styled with CSS.</p> <p>these paragraphs are styled with CSS.</p> <p>these paragraphs are styled with CSS.</p> <p>these paragraphs are styled with CSS.</p> <p>these paragraphs are styled with CSS.</p> <p>these paragraphs are styled with CSS.</p> </body> </html> Save it as abc.html

14 TYPE CSS CODE IN ANOTHER FRESH PAGE WITH EXTENSION.CSS Open notepad>>type the below codes>>save it as c1.css p { } text-align: center; color: red;

15 TO LINK CSS WITH HTML < link rel="stylesheet" type="text/css" href= filename.css"> This tells the browser you're using a style sheet and it is in the format of text/css and to retrieve it in filename.css"

16 NOW INVERT THE LOCATION OF CSS FILE IN YOUR HTML PAGE <!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="c1.css"> </head> <body> <p>hello World!</p> <p>these paragraphs are styled with CSS.</p> <p>these paragraphs are styled with CSS.</p> <p>these paragraphs are styled with CSS.</p> <p>these paragraphs are styled with CSS.</p> <p>these paragraphs are styled with CSS.</p> <p>these paragraphs are styled with CSS.</p> <p>these paragraphs are styled with CSS.</p> </body></html>

18 The id Selector The id selector uses the id attribute of an HTML element to select a specific element. The id of an element should be unique within a page, so the id selector is used to select one unique element! To select an element with a specific id, write a hash (#) character, followed by the id of the element. The style rule below will be applied to the HTML element with id="para1": #para1 { text-align: center ; color: red ; }

19 WRITE THE CODES IN TWO DIFFERENT SECTIONS <!DOCTYPE html> <html> <head></head> <body> <p>hello World!</p> <p>these paragraphs are styled with CSS.</p> <p>these paragraphs are styled with CSS.</p> <p>these paragraphs are styled with CSS.</p> <p>these paragraphs are styled with CSS.</p> </body> </html>

20 THEN INSERT CSS FILE IN YOUR HTML PAGE <!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="c1.css"> </head> <body> <p id="para1">hello World!</p> <p>these paragraphs are styled with CSS.</p> <p>these paragraphs are styled with CSS.</p> <p>these paragraphs are styled with CSS.</p> <p>these paragraphs are styled with CSS.</p> <p>these paragraphs are styled with CSS.</p> <p>these paragraphs are styled with CSS.</p> <p>these paragraphs are styled with CSS.</p> </body> </html>

22 2 ND EXAMPLE OF ID SELECTOR Save the below as c1.css #para1 { text-align: center; color: red; } #para2 { text-align: center; color: blue; font-family:ariel; background-color:yellow; }

23 <!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="c1.css"> </head> <body> <p id="para1"> This is1st paragraph to be styled.</p> <p id="para2"> This is 2nd paragraph to be styled.</p> <h1 id="para2"> This is 3rd paragraph to be styled.</h1> <p id="para1"> This is 4th paragraph to be styled.</p> <p id="para1"> This is 5th paragraph to be styled.</p> </body> </html>

25 The class Selector The class selector selects elements with a specific class attribute. To select elements with a specific class, write a period (.) character, followed by the name of the class. In the example below, all HTML elements with class="center" will be red and centeraligned:. center { } text-align: center ; color: red ;

26 <!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="c1.css"> </head> <body> <h1 class="center">this heading will not be affected</h1> <h6 class="center">this paragraph will be red and center-aligned.</h6> <p class="center">this paragraph will be red and center-aligned.</p> </body> </html>

27 OUTPUT OF CLASS SELECTOR

28 You can also specify that only specific HTML elements should be affected by a class. In the example below, only <p> elements with class="center" will be center-aligned: p.center { text-align: center; color: red; } Note: A class name cannot start with a number!

29 Grouping Selectors If you have elements with the same style definitions, like this: h1 { text-align: center; color: red; } h2 { text-align: left; color: orange; } p { text-align: center; color: red; }

30 It will be better to group the selectors, to minimize the code. To group selectors, separate each selector with a comma. In the example below we have grouped the selectors from the code above: h1, p { text-align: center; color: red; } NOTE: type the above tags in fresh new page and save as.css

31 <!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="c1.css"> </head> <body> <h1>this heading will be red and center-aligned.</h1> <h2>this paragraph will be black and left-aligned.</h2> <p>this paragraph will be red and center-aligned.</p> </body> </html> Save it as.html

32 OUTPUT OF GROUPING SELECTOR

33 CLASS Selector Use a class when you want to consistently style multiple elements throughout the page/site. Classes are useful when you have, or possibly will have in the future, more than one element that shares the same style. An example may be a div of "comments" or a certain list style to use for related links. Additionally, a given element can have more than one class associated with it, while an element can only have one id. For example, you can give a div two classes whose styles will both take effect. Furthermore, note that classes are often used to define behavioral styles in addition to visual ones. For example, the jquery form validator plugin heavily uses classes to define the validation behavior of elements (e.g. required or not, or defining the type of input format) Examples of class names are: tag, comment, toolbar-button, warning-message, or . Use the ID when you have a single element on the page that will take the style. Remember that IDs must be unique. In your case this may be the correct option, as there presumably will only be one "main" div on the page. Examples of ids are: main-content, header, footer, or left-sidebar. A good way to remember this is a class is a type of item and the id is the unique name of an item on the page.

34 When a browser reads a style sheet, it will format the HTML document according to the information in the style sheet. Three Ways to Insert CSS External style sheet Internal style sheet Inline style How we can use CSS

35 External Style Sheet With an external style sheet, you can change the look of an entire website by changing just one file! Each page must include a reference to the external style sheet file inside the <link> element. The <link> element goes inside the <head> section: <head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head>

36 An external style sheet can be written in any text editor. The file should not contain any html tags. The style sheet file must be saved with a.css extension. Here is how the "mystyle.css" looks: body { } background-color: lightblue; h1 { } color: navy; margin-left: 20px;

37 Internal Style Sheet An internal style sheet may be used if one single page has a unique style. Internal styles are defined within the <style> element, inside the <head> section of an HTML page : <head> <style> h1 { color: maroon; margin-left: 40px; } </style> </head> <body> <h1>this is a heading</h1> <p>this is a paragraph.</p> </body>

38 Inline Styles An inline style may be used to apply a unique style for a single element. To use inline styles, add the style attribute to the relevant element. The style attribute can contain any CSS property. The example below shows how to change the color and the left margin of a <h1> element: <h1 style="color:blue;margin-left:30px;">this is a heading</h1>

39 <DIV> AND <SPAN> TAG

40 Block-level Elements A block-level element always starts on a new line and takes up the full width available (stretches out to the left and right as far as it can). The <div> element is a block-level element. Examples of block-level elements: <div> <h1> - <h6> <p> <form> Inline Elements An inline element does not start on a new line and only takes up as much width as necessary. This is an inline <span> element inside a paragraph. Examples of inline elements: <span> <a> <img>

41 Block Level Elements By default, block level elements take up the entire width of it's parent container. After it's reached the edge of the container it'll drop below the other elements. So if you've just got a paragraph in the <body> then it will take up the entire with of the browser, unless you've set a width for the body. So, that means that even if you've got short sentences in separate paragraph tags, each paragraph will start on a new line. The image below showcases the behaviour of block level elements. All the paragraphs have a green border applied so you can see how wide the elements are. A few of the most common block level elements are:<h1>, <p>, <div>, <ul>, <ol>, <li>, <nav>, and <header>. Inline Elements Inline elements don't start on new lines, meaning that they'll line up right next to each other on the same line if there's enough room for them. If you don't understand the different rules that apply to inline elements, your CSS can be incredibly frustrating. For example, inline elements can't take a top or bottom margins, or width or height properties. But, they can still by styled with left and right margins as well as with padding. If you didn't know the specific rules that inline elements follow, you'd surely have a headache. Often, you might just need to use a different kind of element or place your inline element within a block level element to achieve the result you seek. The image below showcases the behavior of inline elements. All the spans have a yellow border applied so you can see how wide the elements are. Some common inline elements are:<span>, <a>, <em>, <code> and <button>.

42 <body> DIV FOR STYLE ATTRIBUTE <div style="background-color:black; <h2>london</h2> color:white; padding:20px;"> <p>london is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p> <p>standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans.</p> </div> </body>

44 FOR CLASS ATTRIBUTE <head> <style> div.container { width: 70%; border: 5px solid gray;} </style> </head> <body> <div class="container"> <h1>london</h1> <p>london is the capital city of England.</p> <p>standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans.</p> </div> </body> </html>

46 SPAN TAG The <span> Element The <span> element is often used as a container for some text. The <span> element has no required attributes, but both style and class are common. When used together with CSS, the <span> element can be used to style parts of the text:

47 <!DOCTYPE html> <html> <body> <h1> </h1> My <span style="color:red">important</span> Heading </body> </html> OUTPUT :-

48 CSS LAYOUT - WIDTH AND MAX-WIDTH A block-level element always takes up the full width available. Setting the width of a block-level element will prevent it from stretching out to the edges of its container. Then, you can set the margins to auto, to horizontally center the element within its container. The element will take up the specified width, and the remaining space will be split equally between the two margins:

49 <!DOCTYPE html> <html> <head> <style> div.ex1{ width:500px; margin: auto; border: 3px solid BLUE; } div.ex2{ max-width:500px; margin: auto; border: 3px solid GREEN; } </style> </head> <body> <div class="ex1">hey EVERYONE HERE WE ARE TALKING ABOUT WIDTH..</div> <br> <div class="ex2"> HEY EVERYONE HERE WE ARE TALKING ABOUT MAX-WIDTH..</ div> </body> </html>

51 CSS LAYOUT - FLOAT AND CLEAR

52 <head> </head> <body> <style> </style> img { float : right } //LEFT, RIGHT, NONE <p> In this example, the image will float to the right in the paragraph, and the text in the paragraph will wrap around the image.</p> <p><img src="pineapple.jpg"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. </p> </body> </html>

53 CSS LAYOUT - CLEAR <head> <style>.div1 { } float: left; width: 100px; height: 50px; margin: 10px; border: 3px solid #73AD21;.div2 { } border: 1px solid red; </style> </head>.div3 { } border: 1px solid red; clear: left;

54 <body> <h2>without clear</h2> <div class="div1">div1</div> <div class="div2">div2</div> <br> <br> <br> <h2>with clear</h2> <div class="div1">div1</div> <div class="div3">div3 </div> </body> </html>

CSS how to display to solve a problem External Style Sheets CSS files

CSS how to display to solve a problem External Style Sheets CSS files WEB DESIGN What is CSS? CSS stands for Cascading Style Sheets 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