Course Content
AI Powered Coding
AI Powered Coding
CSS (Cascading Style Sheets)
CSS (Cascading Style Sheets) is a language used to add style and enhance the visual appeal of HTML elements on a web page. It plays a crucial role in improving the aesthetics of a website, just like decor, color of the walls, furniture, material of the couch, and shape of windows and doors add to the overall look of a house.
Adding CSS to Style HTML
CSS allows us to control the presentation and layout of the HTML elements, including colors, fonts, spacing, and more. Here's how we can apply CSS styles to our HTML elements:
Inline Styles
Using the style
attribute, we can apply CSS styles directly to individual HTML elements. This method is useful for adding quick, one-off styles.
index
index
index
Internal Styles
We can also include CSS styles within the <style>
tags in the <head>
section of the HTML document. This method is useful for applying styles to multiple elements within the same document.
index
index
index
External Stylesheets
For larger projects or when we want to reuse styles across multiple pages, it's common to use external stylesheets. Create a separate CSS file (e.g., index.css
) and link it to the HTML document using the <link>
tag.
Please check the index.html
and index.css
files in the example.
index
index
index
CSS Selectors
CSS selectors target HTML elements based on criteria such as element type, class, or ID. A selector specifies the exact element to which specific styles should be applied.
Element Selector
Targets all elements of a specific type.
Class Selector
Targets elements with a specific class attribute.
ID Selector
Targets a specific element with a unique ID attribute.
CSS Properties
CSS properties define how the selected elements should be styled. Here are some common CSS properties:
color
sets the text color;background-color
sets the background color of an element;font-size
sets the text size;margin
adds the spacing around an element.
We can customize the web page's appearance by applying CSS styles to the HTML elements to create visually appealing and user-friendly experiences.
Example:
index
index
index
Video Tutorial
Everything was clear?