Implementing CSS
There are three ways to define CSS for our HTML Elements:
1.Inline CSS
2.Internal CSS
3.External CSS
Inline CSS:
- An Inline CSS is used to define style for a single HTML element.
- For using Inline CSS we need to define ‘style’ attribute in the opening tag.
Example:
Internal CSS:
- Internal CSS is applicable only for current ‘.html’ file.
- Inside the head tag, we can define <style> element for defining the style.
Example:
External CSS:
- We can use the external css style, for more than one ‘.html’ file.
- For implementing external css we need to create a seprate CSS file with ‘.css’ extension.
- We need to import ‘.css’ file in to our ‘.html’ file, by using <link> tag inside <head> element.
Example:
index.html
css/style.css
Selectors in CSS
CSS Selectors are used to select HTML element to define the style.
Five type of CSS selectors:
1. Class selector
2. Id Selector
3. Element Selector
4. Multiple Selector
5. Nested Selector
Note: HTML code used for below examples
class Selector:The class selector selects HTML elements with a specific class attribute.
To select elements with a specific class, write a period (.) character, followed by the class name.
Example:
Id Selector: The id selector uses the id attribute of an HTML element to select a specific element.
The id of an element is unique within a page, so the id selector is used to select one unique element.
To select an element with a specific id, write a hash (#) character, followed by the id of the element.
Example:
Element Selector: The element selector selects the HTML element name directly to specify the style.
Example:
Multiple Selector: The multiple selector is used to select multiple or a group of elements to specify the same style for all element in that group.
Note: We can use id selector, class selector or element selector to create a group.
Example:
Nested Selector: Nested selector uses the HTML element hierarchy to select an element.
Example: