|
|
|
CSS Tutorials
What is CSS?
CSS - Cascading Style Sheets.
What are CSS files?
Style definitions are stored in CSS files externally and linked to the HTML files.
Why styles are used?
Styles explain how to display HTML elements on web page.
How are styles defined?
Styles are defined in Style Sheets.
What are the types of Style sheets?
- External Style Sheet (stored in an external file)
- Internal Style Sheet (use of <style> tag inside the <head> tag)
- Inline Style (use of style attribute inside HTML tags)</style>
How to refer external style sheet?
External Style Sheet can be referred using <link> tag.
Example -
<head>
<link rel="stylesheet" type="text/css" href="mystylesheet.css" />
</head>
Is it possible to refer more than one external style sheet to a HTML file?
Yes.
Example -
<head>
<link rel="stylesheet" type="text/css" href="mystylesheet1.css" />
<link rel="stylesheet" type="text/css" href="mystylesheet2.css" />
</head>
What is CSS syntax?
syntax - selector {property: value}
Example - body {color: black}
What is grouping selector?
Separating each selector with a comma is grouping
Example - h1,h2,h3,h4,h5,h6 { color: green }
What are the type of selectors?
- Class selector
- ID selector
Explain about class selector:
Class selector is used to apply a set of style definitions to HTML elements with class attribute. Class selector can be applied to many elements on a page.
Example -
.textstyle {
color:red;
font-family:Arial, Helvetica, sans-serif;
}
Usage -
<h1 class="textstyle">Sample One</h1>
<h2 class="textstyle">Sample Two</h2>
Explain about ID selector:
ID selector is used to apply a set of style definitions to HTML elements with ID attribute. ID selector always applies to only ONE element.
Example -
#boldtext {
color:red;
font-family:Arial, Helvetica, sans-serif;
font-weight:bold;
}
Usage - <h1 id="boldtext">Sample One</h1>
How to write comment in CSS?
Write the comment in between /* and */ symbols
Example - /* comments here */
How to write internal styles?
Internal styles are written in the <head> section by using the <style> tag
Example:
<head>
<style type="text/css">
hr {color: black}
p {margin-left: 10px}
body {background-image: url("images/bgimage.png")}
</style>
</head>
Explain about Inline styles:
Inline styles are included in the style attribute of HTML tags. The style attribute can contain any number of valid CSS properties.
Example:
<h3 style="color: red; margin-left: 50px"> This is a sample text</h3>
What style will be used when there are multiple style specifications for an HTML element?
Multiple styles will be cascaded into one and an inline style (inside an HTML element) has the highest priority.
What is @media rule?
@media rule allows different style rules for different media in the same style sheet.
Example:
@media screen { h4.test {font-family:verdana,sans-serif; font-size:14px} }
@media print { h4.test {font-family:times,serif; font-size:10px} }
|
|
|