< Previous Next >

HTML Style

The HTML style attribute is used to add styles to an element, such as color, font, size, and more.

The HTML Style Attribute

Setting the style of an HTML element, can be done with the style attribute.

The HTML style attribute has the following syntax:
<p> style="color:red;">Welcome to Soopro Pathshala</p>

Background Color

The CSS background-color property defines the background color for an HTML element.

Example
<body style="background-color:skyblue;">
<h1>This is heading1<h1>
<body>

Text Color

The CSS color property defines the text color for an HTML element:

Example
<h2 style="color:red;"> Welcome to soopro pathshala<h2>

Fonts

The CSS font-family property defines the font to be used for an HTML element:

Example
<p style="font-family:verdana;">This is my paragraph</h1>

Text Alignment

The CSS text-align property defines the horizontal text alignment for an HTML element:

Example
<h1 style="text-align:center;">Centered Heading</h1>

Here are the key points of HTML styling:

1. Inline vs. Internal vs. External CSS

Inline CSS: Style applied directly within HTML elements using the style attribute
Internal CSS: Defined within the <style> tag in the <head> section of an HTML document
External CSS: Linked through an external stylesheet file, often recommended for separating content from design.

2. Selectors

Element selectors: Target all elements of a specific type
Class selectors: Target elements with a specific class
ID selectors: Target a unique element with a specific ID

3. Box Model

Content: The actual content inside the box.
Padding:Space between the content and the border.
Border:A line surrounding the padding (if defined).
Margin:Space outside the border.

4. Responsive Design

Ensures web pages look good on all devices.
Use of media queries to apply styles based on the device’s width, height, orientation, etc

5. CSS Layout Techniques

Flexbox: Aligns and distributes elements within a container, even when their sizes are unknown or dynamic.
Grid:A powerful tool for creating complex layouts by defining rows and columns.

6. Typography

Control over fonts, sizes, and line spacing enhances readability.

7. Color and Backgrounds

Use of HEX, RGB, and named colors to style text and backgrounds.

8. Animations and Transitions

Use transitions for smooth state changes (hover, focus).
Use animations to create complex effects