Introduction to CSS
* CSS is Cascading Style Sheet
* HTML defines what all elements to be displayed on the web page
* CSS defines how to display HTML elements
* The World Wide Web Consortium (W3C) created CSS
* Currently we are using CSS 3
* We can write CSS in a separate file and link it to our HTML file or embed CSS in HTML file itself
CSS Syntax
* A CSS syntax consist of only three parts
selector { property: value }
* The selector is normally the HTML element you want to style.
* A property is a type of attribute of HTML tag.
* Values are assigned to properties.
Example
p
{
color:red;
text-align:center;
}
CSS Comments
* You can put CSS comments in C style using /* and */ to depict the start and end of the comment respectively
Example
p
{
color:red; /* this sets color red */
text-align:center; /* this sets text at the center */
}
Selection of HTML elements
In CSS we can select an HTML element via following three ways
* Through tag Name
* Through id
* Through Class
Through Tag Name
You can choose HTML element by using its tag name.
Example: To select all paragraphs.
p
{
color:red;
text-align:center;
}
Through Id
* id is a standard attribute for HTML elements.
* we need to style a particular HTML element, we can use id of that element in selector to distinguish it from other similar elements.
* The id selector uses the id attribute of the HTML element, and is defined with a "#".
Example: para1 is value of id attribute of some HTML element
#para1
{
text-align:center;
color:red;
}
Through Class
* 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.
* The class selector uses the HTML class attribute, and is defined with a "."
Example: centre is value of class attribute of a group of HTML elements
.centre
{
text-align:centre;
}
Ways to insert CSS
* There are three ways of inserting a style sheet:
External CSS
Internal CSS
Inline CSS
External CSS
* In this we place CSS code within a separate file and save it with .css extension.
* 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.
* The <link> tag goes inside the head section
* <head>
<link rel="stylesheet" type="text/css" href="style.css" /></head>
* Your style sheet should be saved with a .css extension.
<head>
<title><title>
<link rel="stylesheet" type="text/css" href="Path To css file" />
</head>
<body>
Internal CSS
* 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
Example:
<head>
<style type="text/css">
h1 {color:sienna;}
p {margin-left:20px;}
body {
background-image: url("images/back40.gif");
}
</style>
</head>
Inline CSS
* To use inline styles you use the style attribute in the relevant tag.
* The style attribute can contain any CSS property
* With this method each HTML file contains the CSS code needed to style the page.
* Meaning that any changes we want to make to one page, will have to be made to all.
Example:
<p style="color:red;margin-left:10px;">
This is a paragraph.
</p>
<<Prev Home Next>>
Saturday, July 1, 2017
Introduction to CSS
Subscribe to:
Post Comments (Atom)
No comments:
Post a Comment