- Introduction To HTML
- HTML Editors
- HTML Basic Examples
- HTML Elements
- HTML Attributes
- HTML Headings
- HTML Paragraphs
- HTML Styles
- HTML Formatting Elements
- HTML Quotation
- HTML Comments
- HTML Colors
- HTML Styles - CSS
- HTML Links
- HTML Images
- HTML Tables
- HTML Lists
- HTML Block And Inline
- HTML Class
- HTML Id
- HTML Iframes
- HTML JavaScript
- HTML File Paths
- HTML Head
- HTML Layout
- HTML Responsive
- HTML Computer Code
- HTML Semantic
- HTML Forms
- HTML Form Attributes
- HTML Form Elements
- HTML Input Types
- HTML Input Attributes
- HTML Input Form Attributes
- HTML Canvas
- HTML SVG
- HTML Media
- HTML Video
- HTML Audio
- HTML YouTube
HTML Styles - CSS
CSS Colors, Fonts And Sizes
Here, we'll show you a few frequently used CSS properties. Later on, you will discover more about them.
The text colour to be used is specified by the CSS colour attribute.
The typeface to be used is specified using the CSS font-family attribute.
The text size to be utilised is determined by the CSS font-size property.
<html>
<head>
<style>
h1 {
color: blue;
font-family: verdana;
font-size: 300%;
}
p {
color: red;
font-family: courier;
font-size: 160%;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
CSS Border
An HTML element's border can be defined using the CSS border attribute.
The borders of almost all HTML components can be set.
border: 2px solid powderblue;
}
CSS Padding
The spacing (space) between the text and the border is determined by the CSS padding attribute.
border: 2px solid powderblue;
padding: 30px;
}
CSS Margin
The margin (space) outside the border is defined by the CSS margin attribute.
border: 2px solid powderblue;
margin: 50px;
}
Link To External CSS
Both a full URL and a path that is relative to the currently-viewed web page can be used to refer to external style sheets.
What Is CSS?
A webpage's layout can be formatted using Cascading Style Sheets (CSS).
The colour, font, size, spacing between items, positioning of elements, background images or background colours, different displays for various devices and screen sizes, and much more may all be controlled with CSS.
Using CSS
There are three techniques to include CSS in HTML documents:
- utilising the style attribute inside HTML elements, or inline
- Internally, using the "style" element in the "head" section.(called Internal)
- External - by linking to an external CSS file using the <link> element.
Keeping the styles in separate CSS files is the most typical method of including CSS. However, since using inline and internal styles makes it simpler to illustrate and easier for you to try it yourself, we'll do so in this lesson.
Inline CSS
To apply a particular style to a single HTML element, use an inline CSS.
The style attribute of an HTML element is used by inline CSS.
The example below changes the text colour of the <h1>
element to blue and the <p>
element to red:
<p style="color:red;">A red paragraph.</p>
Internal CSS
A style for a single HTML page is established using an internal CSS.
A <style>
element in the <head>
section of an HTML page contains the definition of an internal CSS.
The example below changes the text colour of EVERY <h1>
element (on that page) to blue and EVERY <p>
element (on that page) to red. In addition, a "blue"
backdrop colour will be used to display the page:
<html>
<head>
<style>
body {background-color: lightblue;}
h1 {color: blue;}
p {color: red;}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
External CSS
Many HTML pages require an external style sheet to specify their look.
For each HTML page that uses an external style sheet, include a link to it in the <head>
section:
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Products
Partner
Copyright © RVR Innovations LLP 2024 | All rights reserved - Mytat.co is the venture of RVR Innovations LLP