Inline Styles and Classes
Duration: 2 min
This video lesson is available to enrolled students.
AI Summary
An AI-generated summary of this video lecture.
The video is a lecture on HTML and CSS styling, presented as a screen recording of a PDF document. The instructor explains two primary methods for applying styles: inline styles using the 'style' attribute and classes using the 'class' attribute. The first method is demonstrated with a <p> tag where the style attribute is used to set the text color to red, shown in the code snippet <p style="color: red;">This text is red.</p>. The second method involves defining a CSS class named '.highlight' within a <style> block, which sets the background color to yellow. This class is then applied to a paragraph using the class attribute, as seen in the code <p class="highlight">This paragraph is highlighted.</p>. The instructor uses a digital pen to draw diagrams on the screen, illustrating the relationship between HTML, CSS, and the resulting display, and writes 'DHTML' at the bottom, indicating the combination of these technologies.
Chapters
0:00 – 2:00 00:00-02:00
The video begins with a screen showing a PDF document titled 'Inline Styles and Classes'. The instructor explains that inline styles are applied using the 'style' attribute, providing the example <p style="color: red;">This text is red.</p>. The text on the screen also states that classes are used for styling with CSS and are assigned via the 'class' attribute. The instructor then shows a code block for classes, which includes a <style> tag defining a .highlight class with background-color: yellow; and a <p> tag using this class: <p class="highlight">This paragraph is highlighted.</p>. The instructor uses a digital pen to draw a diagram on the right side of the screen, labeling 'HTML', 'Style', 'CSS', and 'Display' to illustrate the flow of styling.
2:00 – 2:29 02:00-02:29
The instructor continues to explain the concepts, using the digital pen to write 'DHTML' at the bottom of the screen, signifying the combination of HTML, CSS, and JavaScript. The on-screen text remains the same, showing the code examples for both inline styles and classes. The instructor's hand is visible in the top right corner, and the 'KNOWLEDGE GATE' logo is present in the top right of the document. The focus remains on the code and the handwritten annotations, reinforcing the relationship between the HTML structure, the CSS styling rules, and the final visual output.
The lecture systematically introduces two fundamental techniques for styling HTML elements: inline styles and CSS classes. It begins by demonstrating the direct application of a style attribute to an HTML element, such as <p style="color: red;">, which is a quick but less maintainable method. It then transitions to the more scalable and recommended approach of using CSS classes. This involves defining a style rule in a <style> block (e.g., .highlight { background-color: yellow; }) and applying it to elements via the class attribute (e.g., <p class="highlight">). The visual annotations, including the diagram and the term 'DHTML', emphasize that these technologies work together to create dynamic and styled web content.