What Is CSS ?
- CSS stands for Cascading Style Sheets.
- 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 stylesheets are stored in CSS files.
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.
- In the following example all <p> elements will be center-aligned, with a red text color:
Example
<!DOCTYPE html>
<!DOCTYPE html>
</head>
Result
This is a heading.
This paragraphs are stylerd with CSS.
The ID Selector
- The ID Selector use the ID attribute of an HTML element to select a specific element.
- The id of an select should be unique within a page, so the id selector is used to select one unique element.
- To select an elememt 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 = "line1"
Example
<!DOCTYPE html>
<html>
<head>
<title>CSS Color </title>
<head>
<title>CSS Color </title>
<body>
<p id="line1">This paragraph is effected by CSS.</p>
<p>This paragraph is not affected by the CSS.</p>
</body>
</html>
<p id="line1">This paragraph is effected by CSS.</p>
<p>This paragraph is not affected by the CSS.</p>
</body>
</html>
Result
This paragraph is effected by CSS.
This paragraphs is not affected by the CSS.
Note: An id name cannot start with a number!
- 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 center-aligned:ame cannot start with a number!
Example
<!DOCTYPE html>
<html>
<head>
<title>CSS Color </title>
<style>
.center {
color: red;
text-align: center;
}
</style>
</head>
Result
This paragraph is effected by CSS by classes.
This paragraph is effected by CSS by classes.
- You can also specify that only specific HTML elements should be affected by a class.
Example
<!DOCTYPE html>
<html>
<head>
<title>CSS Color </title>
<head>
<title>CSS Color </title>
<style>
h1.center {
color: red;
text-align: center;
}
</style>
</head>
<body>
<h1 class="center">This paragraph is effected by CSS by classes </h1>
<p class="center">This paragraph is affected by the CSS. by classes.</p>
</body>
</html>
<h1 class="center">This paragraph is effected by CSS by classes </h1>
<p class="center">This paragraph is affected by the CSS. by classes.</p>
</body>
</html>
Result
This paragraph is effected by CSS by classes.
This paragraph is effected by CSS by classes.
- HTML elements can also refer to more than one class.
HTML TUTORIAL
WATCH AND SUBSCRIBE
Example
<!DOCTYPE html>
<html>
<head>
<title>CSS Color </title>
<head>
<title>CSS Color </title>
</head>
<body>
<h1 class="center">This paragraph is not effected by CSS by classes </h1>
<p class="center">This paragraph will be red and center-aligned.</p>
<p class="center large">This paragraph will be red, center-aligned, and in a large font-size.</p>
</body>
</html>
<h1 class="center">This paragraph is not effected by CSS by classes </h1>
<p class="center">This paragraph will be red and center-aligned.</p>
<p class="center large">This paragraph will be red, center-aligned, and in a large font-size.</p>
</body>
</html>
Result
This paragraph is effected by CSS by classes.
This paragraph will be red and center-aligned.
This paragraph will be red, center-aligned, and in a large font-size.
Note: A class name cannot start with a number!
Grouping Selector
<style>
h1, h2, p {
color: red;
text-align: center;
}
</style>
Hello world!
Smaller Heading.
This is a paragraph.
Grouping Selector
- If you have elements with the same style definitions, like this:
- It will be better to group the selectors, to minimize the code.
- To group selectors, separate each selector with a comma.
Example
<!DOCTYPE html>
<html>
<head>
<title>CSS Color </title>
<head>
<title>CSS Color </title>
<style>
h1, h2, p {
color: red;
text-align: center;
}
</style>
</head>
<body>
<h1 >Hello world! </h1>
<h2>Smaller Heading.</h2>
<p>This is a paragraph.</p>
</body>
</html>
<h1 >Hello world! </h1>
<h2>Smaller Heading.</h2>
<p>This is a paragraph.</p>
</body>
</html>
Result
Hello world!
Smaller Heading.
This is a paragraph.
0 comments:
Post a Comment
For Any Tech Updates, Hacking News, Internet, Computer, Technology and related to IT Field Articles Follow Our Blog.