🎢Basic Introduction to CSS🎢
Understand the fundamentals of CSS before diving in deep.
CSS stands for Cascading Stylesheet. It defines the color, font, layout, and other aspects of how HTML components must be displayed on web pages. The creation of websites is made easier by the CSS language. CSS is typically linked to markup languages like HTML.
CSS is used to style our web page, without CSS our page will not look interactive and no one will get attracted to our web page. It saves a tonne of time because CSS can be created once and utilized several times on a web page.
🗒️Different Types of CSS✒️
1. Inline Css📃
A unique style for a single element may be applied using an inline style. It only applies to a small portion of the page and will have an impact on one element. Add the style property to the necessary element to use inline styles.
<p style = "color:#009900; font-size:50px; font-style:italic;"> Checking for inline css </p>
2. Internal Css📖
In a single HTML page, the internal stylesheet is included. Style is defined inside the <style> tag in the head section.
<head>
<title>Internal CSS</title>
<style>
.main {
text-align:center;
}
.internalDiv {
color:#009900;
font-size:50px;
font-weight:bold;
}
.text {
font-style:bold;
font-size:20px;
}
</style>
</head>
3. External Css📚
External CSS includes a second CSS file that uses tag attributes (such as class, id, header, etc.) to contain only style properties. CSS properties should be connected to the HTML content using the link element and are written in separate files with the .css suffix. This indicates that just one style may be selected for each element and that style will be used throughout all web pages.
body {
background-color:powderblue;
}
.main {
text-align:center;
}
Know about CSS syntax🧑💻
To style an element first, we need to selector then we need to select what property we want to change after that provide the value.
We can also select multiple selectors and change its property.
CSS Properties✨
1. Padding and Margins📏📐
Padding is the space created inside an element while the margin is the space created around the element.
we can remember this by real-life examples i.e. in a sofa if we want to make it softer we need to add more cushion to it. So adding cushion to the sofa is called padding while if we want to add more gap between the wall and sofa in this case we will be using margin.
2. Fonts📝
To style our text and to make it more attractive we can font properties and make changes according to our needs. To add external font style use google fonts and add it to the stylesheet.
3. Color🟢🖌️
Color property is used when we want to color our text, background-color of any element then we can use this property.
4. Border🎴
The border property is useful when the border is required in any element, we can also provide different border styles, colors and widths.
5. Display🎞️
The display CSS property sets whether an element is treated as a block or inline element and the layout used for its children such as flow layout, grid or flex.
Different types of display:
i. Block elements: A block-level element always starts on a new line, and the browser automatically adds some space(a margin) before and after the element. Example: <p>, <div>, etc.
ii. Inline elements: An inline element does not start on a new line. An inline element only takes up as much space as required. Example: <span> <a>, etc.
iii. inline-block elements: Allows setting a width and height on the element. Also do not add a line break after the element so the element can sit next to another element.
iv. Display- none: It is commonly used with javascript to hide and show elements without deleting and recreating them. The element will be hidden and the page will be displayed as if the element is not there.
v. Visibility- hidden: It also hides the element. However, the element will take up some space as before. The element will be hidden but still affect the layout.
6. Positions🔣
Positions are useful when we want to place a particular elements using position. There are 5 different position values:
i. Static: Html elements are static by default.
ii. relative: It is positioned relative to its normal position.
iii. absolute: It is used in the document body or parent to position an element.
iv. fixed: It always stays in the same place even if the page is scrolled.
v. sticky: It is positioned based on the user's scroll position.
7. Z-index💤
z-index can only be used on position elements except for the static position. The stack order of an element is specified by the z-index attribute. A higher stack order element is always in front of a lower stack order element.
8. Flexbox🧱
Flexbox is a one-dimensional layout method for laying out items in rows or columns. CSS flexbox is a better way to align items into a container. Flexbox is generally made from two words i.e. " Flexible + Box".
Using flexbox we can set the element direction, flow, and order, and can align it horizontally or vertically. This made the developer's work easy so, that we can arrange items very easily.
9. Grid 🏁
CSS grid layout module offers a grid-based layout system with rows and columns, making it easier to design web pages without having to use float and positioning.
One of the most popular examples of the grid we can say is a photo gallery where we can see the photo arranged in rows and columns with the same width and height.
So, till now we discussed all the basic properties a beginner should know before getting deep into CSS.
Here we come to an end😊👨💻.
Happy Learning ✨🟢