To specify how an HTML document will look, CSS style sheets are used. Moreover, there are three ways to write CSS styling properties that are Inline CSS, Embedded CSS, and External CSS stylesheets. An embedded style sheet is one that integrates style sheet data into an HTML document using the <style> element.
This write-up will discuss:
HTML Page Structure
An HTML page has mainly two sections, “head” and “body”. The head section contains the meta information about the page, while the body section comprises the elements visible on the web page, such as images, lists, tables, headings, and more.
The CSS style sheet is embedded inside the head section, within the <style> element, as highlighted with the red arrow:
How to Create CSS Embedded Style Sheet?
In HTML, first, create a div element with the class name “content”. Within this element, add <h1> element and <img> element associated with the attributes:
- src: This attribute is utilized to specify the path of the image.
- alt: This attribute specifies the alternative text that will appear when an image fails to be loaded.
- width: This attribute is utilized for specifying the image’s width.
Then, add the <br> tags to add line breaks and <p> element with the id “para” to add content to the web page:
Style All Elements
font-family: Verdana, Geneva, Tahoma, sans-serif;
}
The “*” is utilized to represent all elements applied to the “font-family” property. Here, the value “Verdana, Geneva, Tahoma, sans-serif” is provided to ensure that if the first font style is not supported by the browser, the next will be applied.
Style “content” div Element
width: 500px;
height: 300px;
padding: 5px;
margin: auto;
padding-left: 50px;
background-color: #7db9e4;
}
The “.content” is specified to access the div element having the class content and apply the given properties:
- “width” property sets the element’s width.
- “height” property sets/adjusts the element’s height.
- “padding” attribute includes space around the element’s content or inside the element’s border.
- “margin” property adds space around the element.
- “padding-left” property adds the space at the left of the element’s content.
- “background-color” property sets the element’s background color.
Style “img” Element
transition: all 0.3s ease;
}
The <img> element is applied transition with the CSS “transition” property, where “all” is a transition effect, “0.3s” refers to the transition duration, and “ease” refers to the transition effect with a slow start, then fast, and ends slowly.
Style “img” Element on hover
cursor: pointer;
transform: perspective(100px) translate3d(50px, 20px, 20px);
}
The properties applied to the <img> element on hover are explained below:
- “cursor” property specifies the mouse cursor style on the element, where the value “pointer” shows a cursor hand with a pointing finger.
- As the value of the “transform” property, the “perspective(100px)” function is utilized to specify the distance between the user and the object, and the “translate3d(50px, 20px, 20px)” relocates an element in the 3D plane. These parameters display the x-axis, y-axis, and z-axis, respectively.
Style “para” id of “p” Element
font-size: 25px;
font-weight: bold;
color: #3802ce;
padding: 5px;
}
The “#para” is utilized to access the element with the id para and apply the following properties:
- “font-size” property sets the element’s font size.
- “font-weight” property sets the font size to be thin or thick.
- “color” property is used to set/apply the element’s font color.
Here is the output of the above-stated code:
It can be observed from the given output that the embedded style sheet has been successfully applied.
Conclusion
CSS-embedded style sheets are suitable for documents that have specific design needs. To create an embedded style sheet, it is required to declare CSS properties within the <style> element. This style element is specified in the HTML head tag. In this post, we demonstrated the method to create embedded CSS style sheets with an example.
