What is CSS?
- CSS stands for Cascading Style Sheets.
- It's a language to control the presentation of a web page.
- CSS can control the styling of individual HTML elements.
- CSS can also style many web pages.
CSS is a core technology in web development, together with HTML and JavaScript.
Advantages of CSS are:
- CSS specifies the presentations of HTML documents.
- This includes colors,background,fonts,spacing,animations , etc.
- It works on all devices : desktop,tablet,mobile, printer ,etc.
- CSS is lightweight and relatively easy to learn.
- HTML and CSS are essential skills for web developers.
CSS can be added to HTML documents in 3 ways:
- Inline - by using the style attribute inside HTML elements
- Internal - by using a <style> element in the <head> section
- External - by using a <link> element to link to an external CSS file
Inline CSS
An inline CSS is used to apply a unique style to a single HTML element.
An inline CSS uses the style attribute of an HTML element.
The following example sets the text color of the <h1> element to blue, and the text color of the <p> element to red:
An inline CSS uses the style attribute of an HTML element.
The following example sets the text color of the <h1> element to blue, and the text color of the <p> element to red:
Example
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1 style="color:blue;">My First Heading</h1>
<p style="color:red;">My First Paragraph.</p>
</body>
</html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1 style="color:blue;">My First Heading</h1>
<p style="color:red;">My First Paragraph.</p>
</body>
</html>
Output
Internal CSS
An internal CSS is used to define a style for a single HTML page.
An internal CSS is defined in the <head> section of an HTML page, within a <style> element.
The following example sets the text color of ALL the <h1> elements (on that page) to blue, and the text color of ALL the <p> elements to red. In addition, the page will be displayed with a "lightblue" background color:
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML Tutorials</title>
<html>
<head>
<title>HTML Tutorials</title>
<style>
body {background-color: lightblue;}
h1 {color: blue;}
p {color: red;}
</style>
</head>
<body>
<h1>My First Heading</h1>
<p>My First Paragraph.</p>
<h2>What is HTML?</h2>
<p>HTML stands for Hyper Text Markup Language.</p>
</body>
</html>
Output
External CSS contains separate CSS file which contains only style property with the help of tag attributes (For example class, id, heading, … etc). CSS property written in a separate file with .css extension and should be linked to the HTML document using link tag. This means that for each element, style can be set only once and that will be applied across web pages.
- link tag is used to link the external style sheet with the html webpage.
- href attribute is used to specify the location of the external style sheet file.
Example
style.css
body {
background-color:lightblue;
}
.main {
text-align:center;
}
.MyBlog {
color:#d2c54b;
font-size:50px;
font-weight:bold;
}
#content {
font-style:bold;
font-size:20px;
}
Html code
<!DOCTYPE html>
<html>
<head>
<title>HTML Tutorials</title>
<link rel="stylesheet" href="style.css"/>
</head>
<body>
<div class = "main">
<div class ="MyBlog">Mybcaclassnotes</div>
<div id ="content">
The correct place for easy learning....
</div>
</div>
</body>
</html>
Output
No comments:
Post a Comment