CSS Basic (cascading style sheets) Here we study about … 1. Introduction 2. Syntax 3. ID and Class...
16
CSS Basic (cascading style sheets) Here we study about … 1. Introduction 2. Syntax 3. ID and Class 4. Some basic Programming 5. CSS Examples 6. CSS Quiz
-
Upload
austen-richardson -
Category
Documents
-
view
214 -
download
0
Transcript of CSS Basic (cascading style sheets) Here we study about … 1. Introduction 2. Syntax 3. ID and Class...
CSS Basic(cascading style sheets)
Here we study about …
1. Introduction2. Syntax
3. ID and Class4. Some basic Programming
5. CSS Examples6. CSS Quiz
IntroductionQ. 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.
featureQ. 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 sheet2. Internal style sheet3. Inline style
External style sheetQ. 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 sheetQ. 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 SheetQ. 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 StylesQ. 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 syntaxQ. 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 …h1 { color:blue; font-size:12px; }
Selector Declaration 1, Declaration 2
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 ClassQ. 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 SelectorQ. 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)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 CSSTry 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
