HTML Styles
HTML Style Attribute:
The HTML Style Attribute is used to apply inline CSS (Cascading Style Sheets) styles to individual HTML elements, allowing precise control over their visual presentation.
Example:
<p style="font-weight: bold; color: #007bff;">This text is styled inline.</p>
Background Color:
The background-color property in CSS sets the background color of an element, allowing you to change the color of an element's background.
Example:
<div style="background-color: #ff9900;">This div has an orange background.</div>
Text Color:
The color property in CSS is used to define the text color within an element, enabling you to specify the color of the text.
Example:
<p style="color: green;">This text is in green color.</p>
Fonts:
The font-family property in CSS is used to set the font for the text within an element, allowing you to choose a specific font or a fallback font family.
Example:
<span style="font-family: 'Times New Roman', serif;">This text uses Times New Roman font.</span>
Text Size:
The font-size property in CSS controls the size of the text within an element, allowing you to specify the font size in various units like pixels, ems, or percentages.
Example:
<h2 style="font-size: 24px;">This header has a font size of 24 pixels.</h2>
Text Alignment:
The text-align property in CSS is used to determine the horizontal alignment of text within an element, enabling you to align text to the left, right, center, or justify it.
Example:
<p style="text-align: right;">This text is right-aligned.</p>Inline CSS:
Inline CSS is used to apply a unique style to a single HTML element using the `style` attribute. It's handy for making quick style adjustments directly within the HTML element.
Example:
<div style="color: red; font-size: 18px;">This is a red text with increased font size.</div>Internal CSS:
Internal CSS defines styles for an entire HTML page within a `<style>` element in the `<head>` section. It's useful when you want to apply consistent styles to multiple elements on a single page.
Example:
<style>
h1 { color: blue; }
p { font-size: 16px; }
</style>
External CSS:
External CSS involves creating a separate stylesheet file (e.g., `styles.css`) and linking it to multiple HTML pages. This allows you to maintain a consistent look across your website.
Example:
<!-- In HTML -->
<link rel="stylesheet" href="styles.css">
CSS Colors, Fonts, and Sizes:
CSS allows you to control text color, font family, and text size. It's essential for customizing the appearance of your website.
Example:
h2 { color: #FF5733; /* Color in hexadecimal */ }
p { font-family: "Helvetica Neue", sans-serif; }
span { font-size: 20px; /* Font size in pixels */ }
CSS Border:
CSS border property defines borders around HTML elements. You can specify the border width, style, and color.
Example:
button { border: 2px solid #0073e6; }CSS Padding:
CSS padding adds space between the content and the border of an element, enhancing its appearance and readability.
Example:
div { padding: 20px; }
CSS Margin:
CSS margin creates space outside an element, influencing its position concerning other elements on the page.
Example:
img { margin: 10px; }
Link to External CSS:
You can link to an external CSS file to apply consistent styles across multiple HTML pages, making it easy to update styles site-wide.
Example:
<!-- In HTML -->
<link rel="stylesheet" href="styles.css">