HTML CSS
- CSS stands for Cascading Style Sheet is used to format the layout of a webpage.
- With CSS, we can control the color, font, size of text, spacing between elements for the page.
Methods Of CSS
The most common ways in CSS can have three methods of HTML
documents.
Inline - can using the "style" attribute inside the HTML elements.
Internal - can using the
<style> element in the <head> section.
External - can using the
<link> element for link to an external CSS file to our
HTML page.
Inline CSS:
- An inline CSS is used to apply a unique style to a single HTML element.
- An inline CSS can uses the style attribute of an HTML element.
Example:
<!DOCTYPE
html>
<html>
<title>HTML</title>
<body>
<h1
style ="color: purple;">This is a Blue Heading</h1>
<p style ="color: blue;">This is a red paragraph.</p>
</body>
</html>
Output:
Internal CSS:
- A internal CSS is defined in the <head> section of an HTML page, within a <style> element.
- The text color of the <h1> elements on that page we can use the text color of all the <p> elements, that page will be displayed with a background color.
Example:
<!DOCTYPE
html>
<html>
<head>
<style>
body {
background-color: orange;
}
h1 {
color: yellow;
text-align: center;
}
h2 {
color: green;
}
</style>
</head>
<body>
<h1>This is HTML
heading</h1>
<h2>Type any content
in this paragraph.</h2>
</body>
</html>
Output:
External CSS:
- The external style sheet is used to define the styles for many HTML pages.
- An external style sheet, add a link in the <head> tag section of the HTML page.
- External stylesheets are stored in CSS files.
- The external style sheet can be written in any text editor.
- The file must not contain in HTML code, and the file must be saved in .css extension.
Example:
<!DOCTYPE
html>
<html>
<head>
<title>HTML</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>External
CSS</h1>
<p>External
stylesheets are stored in CSS files.</p>
</body>
</html>
The "styles.css" file like:
Example:
body {
background-color: pink;
}
h1 {
color: blue;
}
p {
color: red;
}
Output:
CSS Color:
The web page's can adding styles, which is made up of HTML elements, to
applied using CSS. It describes how the webpage appears.
CSS Color: It defines the color to text for an element
using with in color property.
Syntax:
<h1 style="color: blue">Type...</h1>
CSS Font-size: In CSS can used font-size property
defines the text size for the page.
Syntax:
<h1 style="font-size">Type...</h1>
CSS Font-family: In CSS defines the
font-family property for text style for the page.
Syntax:
<h1 style="font-family">Type...</h1>
Example:
<!DOCTYPE
html>
<html>
<head>
<style>
h1 {
color: red;
font-family:
verdana;
font-size:
200%;
}
p {
color: blue;
font-family:
cursive;
font-size:
250%;
}
</style>
</head>
<body>
<h1>Font color for a heading</h1>
<p>This is a
font-family paragraph.</p>
</body>
</html>
Output:
CSS Border:
- CSS property defines a border around the text in Html document.
- Using different sizes and selective colors for a page.
Syntax:
{
border: values;
}
Example:
<!DOCTYPE html>
<html>
<head>
<style>
p {
border:
2px solid limegreen;
}
</style>
</head>
<body>
<h1>This is
Padding</h1>
<p>GOCOURSE</p>
<p>GOCOURSE</p>
<p>GOCOURSE</p>
</body>
</html>
Output:
CSS Padding:
- Html documents using the internal CSS. In CSS padding defines a space between border for the text in a document.
- The value of CSS padding should be a length, percentage, or word inherit.
- It can specifies border sizes and colors for a text.
Syntax:
{
padding: value;
}
Example:
<!DOCTYPE html>
<html>
<head>
<style>
p {
border:
2px solid pink;
padding:
20px;
}
</style>
</head>
<body>
<h1>This is
Padding</h1>
<p>GOCOURSE</p>
<p>GOCOURSE</p>
<p>GOCOURSE</p>
</body>
</html>
Output:
More topic in HTML
