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:
{
boder: value;
}
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:
