If you are facing any issue in playing video please use Firefox browser.
CSS Selectors : Selectors are used to ‘find’ (or select) HTML elements based on their element name, id, class, attribute, and more. There are three ways to define style in CSS: Inline style, internal style, external style. All styles in CSS define in same way but the display/import method of them are different.
Inline style is used to apply a unique style to a single HTML element.
Internal CSS can be defined by placing the <style> element in the <head> section of a page. Internal styles apply to whole pages but not to multiple HTML documents.
External stylesheet is a standalone (.css)file that is linked from a web page. The advantage of external stylesheets is that it can be created once and the rules applied to multiple web pages.
Now let’s see the examples of all three styles.
Example of Inline Style : As you can see in video, in header section; paragraph, footer, section are already defined. Now, let’s define inline style in header first. Suppose you want to add color to header, for that type :
<header class= “header” style= “color:red;”><h2>header heading</h2></header>
Refresh the web page and see your header turned into red color.
Example for Internal Style : As we saw, internal style define in header tag. So go to header and define the style :
This will add background to section as blue color.
Example for External Style : In this, as we discussed before, first we have to create a separate CSS file. In that you have to keep extension as (.css). After that, we will import that file in html by :
<link href= “style.css” rel= “stylesheet”>
Save it and define the styles in css file as below :
In this, we learned how to define styles and elements using CSS in this video.
Have a friend to whom you would want to share this course?