CSS Basic (cascading style sheets) Here we study about … Introduction Syntax ID and Class Some basic Programming CSS Examples CSS Quiz
Introduction Q. What is CSS Stands for? or What is full form of CSS? Ans. CSS stands for ”Cascading Style Sheets”. Q. How CSS more beneficial in human life? or How it is useful in creating a Site? Ans. We can display HTML elements more attractive and mannered with the help of CSS. Styles were added to HTML 4.0 to solve a problem. we can manage all the pages from one the file. All browser support CSS in today’s life. Specially HTML 4.0 keeps all formatting in one single file with extension CSS and all formatting could be removed from HTML 4.0 documents and stores in one single file with extension CSS.
feature Q. Is CSS reliable? or Is CSS saved time in creating and editing a web site? Ans. Yes, it reliable and saved a time in creating and editing a web site. Just we will make changes in single .css file and all the pages will changed. Q. How many ways we can insert Style sheet? Ans. There are three ways of inserting a style sheet: 1. External style sheet 2. Internal style sheet 3. Inline style
External style sheet Q. What is External style sheet? Ans. An external style sheet is ideal when the style is applied to many pages. With an external style sheet, you can change the look of an entire Web site by changing one file. Each page must link to the style sheet using the <link> tag. The <link> tag goes inside the HTML head section. Q. Write down the commands to link external style sheet? Ans.<head> <link rel="stylesheet" type="text/css“ href="mystyle.css" /> </head>
External style sheet Q. Can we use any text editor for creating .css file? Ans. Yes, we can use any text editor for creating .css file and Your style sheet should be saved with a .css extension. Q. Can we use HTML tags in style sheet file? Ans. No, The file should not contain any html tags. Q. Give the simple example of Style sheet? Ans. hr {color:sienna;} p {margin-left:20px;} body {background-image:url("images/back40.gif");}
Internal Style Sheet Q. What is Internal style sheet? Ans. An internal style sheet should be used when a single document has a unique style. You define internal styles in the head section of an HTML page, by using the <style> tag. Q. Write down the commands for Internal style sheet? Ans. <head> <style type="text/css"> hr {color:sienna;} p {margin-left:20px;} body {background-image:url("images/back40.gif");} </style> </head>
Inline Styles Q. What is Inline style sheet? Ans. An inline style loses many of the advantages of style sheets by mixing content with presentation. Use this method sparingly. To use inline styles you use the style attribute in the relevant tag. The style attribute can contain any CSS property. Q. Write down the commands for Inline style sheet? Ans. <p style="color:sienna;margin-left:20px">This is a paragraph.</p>
CSS syntax Q. What is the CSS basic rules? Ans. The basic rules of CSS having two main parts. Selector and one and more Declaration A selector normally a HTML element that you want to Style. Each declaration consists of a property and a value. The property is the style attribute you want to change. Each property has a value. Example … Selector Declaration 1, Declaration 2 h1 { color:blue; font-size:12px; } Property Value Property Value
CSS syntax (tips) Tips (1):- A CSS declaration always ends with a semicolon, and declaration groups are surrounded by curly brackets. p {color:red;text-align:center;} Tips (2):- To make the CSS more readable, you can put one declaration on each line, like this. p { color:red; text-align:center; } Where p is the HTML tag. (<p>)
CSS syntax (tips) Tips (3) :- 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; }
CSS Id and Class Q. What is Id and Class in CSS? Ans. In addition to setting a style for a HTML element, CSS allows you to specify your own selectors called "id" and "class". Q. Why we Id Selector in CSS? Ans. The id selector is used to specify a style for a single, unique element. Q. How to define Id selector in a Program? Ans. The id selector uses the id attribute of the HTML element, and is defined with a "#".
Id Selector Example <html> <head> <style type="text/css"> #para1 { text-align:center; color:red; } </style> </head> <body> <p id="para1">Hello World!</p> <p>This paragraph is not affected by the style.</p> </body> </html> Notes: do not start the name of Id with number, it’s will not work with Mozzila/Firefox.
The class Selector Q. Why to use Class Selector in CSS? Ans. The class selector is used to specify a style for a group of elements. Unlike the id selector, the class selector is most often used on several elements. This allows you to set a particular style for many HTML elements with the same class. The class selector uses the HTML class attribute, and is defined with a ".“ Notes:- do not start a class name with a number! This is only supported in Internet Explorer.
The Class Selector (Example) <html> <head> <style type="text/css"> .center { text-align:center; } </style> </head> <body> <h1 class="center">Center-aligned heading</h1> <p class="center">Center-aligned paragraph.</p> </body> </html> Notes:- In the example above, all HTML elements with class="center" will be center-aligned:
The Class Selector (Example) Example:- <html> <head> <style type="text/css"> p.center { text-align:center; } </style> </head> <body> <h1 class="center">This heading will not be affected</h1> <p class="center">This paragraph will be center-aligned.</p> </body> </html> Notes:- You can also specify that only specific HTML elements should be affected by a class. In the example above, all p elements with class="center" will be center-aligned:
Try to do in CSS Try to do so … CSS Backgrounds CSS Text CSS Fonts CSS Links CSS Lists CSS tables CSS Box Model CSS Border CSS Outline CSS Margin CSS Padding CSS Grouping and Nesting CSS Dimension CSS Display CSS Positioning CSS Floating CSS Image gallery CSS Attribute Selector