CSS stands for Cascading Style Sheets.
CSS describes how HTML elements are to be displayed on the screen’s of desktops, laptops, tablets, mobiles, etc.
CSS is used to define styles for your web pages, including the design, layout and variations in display for different devices and screen sizes.
CSS stands for Cascading Style Sheets
CSS describes how HTML elements are to be displayed on screen, paper, or in other media
CSS saves a lot of work. It can control the layout of multiple web pages all at once
External stylesheets are stored in CSS files
2.Internal CSS
3.External CSS
To link a CSS file to an HTML file, use <link> element with in the HTML file <head> section with the (rel) element to set to “stylesheet” and the (href) attribute specifying the CSS file path.
The grouping selector selects all the HTML elements with the same style definitions.
Look at the following CSS code (the h1, h2, and p elements have the same style definitions):
Colors are specified using predefined:
Syntax:
Syntax:
Syntax:
Syntax:
Syntax:
Syntax:
Syntax:
Syntax:
Syntax:
Syntax:
Syntax:
Syntax:
Simple way to add the size of the border add type of border and color of the border in one line.
Syntax:
Syntax:
Syntax:
Syntax:
Syntax:
Syntax:
Syntax:
Syntax:
Syntax:
Text-indent
Letter-spacing
Line-height
Word-spacing
Word-spacing
CSS font properties let you style and control the appearance of text in an HTML document. They are essential for creating a visually appealing and readable website.
Here’s a breakdown of the most common CSS font properties:
1. Font family
2. Font size s
3. Font weight
4. Font style
5. Font variant
Syntax:
Syntax:
Syntax:
Syntax:
Syntax:
The block value of the display property forces an element to behave like block-level element, like a <div> or <p> element. The style rules in the following example displays the <span> and <a> elements as block-level elements:
The inline value of the display property causes an element to behave as though it were an inline-level element, like a <span> or an <a> element. The style rules in the following example displays the <p> and <li> elements as inline-level elements:
display: none; is commonly used with JavaScript to hide and show elements without deleting and recreating them.
Positioning elements appropriately on the web pages is a necessity for a good layout design. There are several methods in CSS that you can use for positioning elements. The following section will describe you these positioning methods one by one.
A relative positioned element is positioned relative to its normal position.
In the relative positioning scheme the element's box position is calculated according to the normal flow. Then the box is shifted from this normal position according to the properties — top or bottom and/or left or right.
An absolutely positioned element is positioned relative to the first parent element that has a position other than static. If no such element is found, it will be positioned on a page relative to the 'top-left' corner of the browser window. The box's offsets further can be specified using one or more of the properties top, right, bottom, and left.
Fixed positioning is a subcategory of absolute positioning.
The only difference is, a fixed positioned element is fixed with respect to the browser's viewport and does not move when scrolled.
<html>
<head>
<title>logo</title>
<style>
#A1{
background-color: green;
height:160px;
width:180px;
position: absolute;
top: 150px;
left: 350px;
border-radius: 0px 0px 30px 30px;
}
#A2{
background-color: green;
height:80px;
width:40px;
position: absolute;
top: 310px;
left: 380px;
border-radius: 0px 0px 30px 30px;
}
#A3{
background-color: green;
height:80px;
width:40px;
position: absolute;
top: 310px;
left: 460px;
border-radius: 0px 0px 30px 30px;
}
#A4{
background-color: green;
height:160px;
width:50px;
position: absolute;
top: 150px;
left: 290px;
border-radius: 30px 30px 30px 30px;
}
#A5{
background-color: green;
height:160px;
width:50px;
position: absolute;
top: 150px;
left: 540px;
border-radius: 30px 30px 30px 30px;
}
#A6{
background-color: green;
height:90px;
width:180px;
position: absolute;
top: 50px;
left: 350px;
border-radius: 100px 100px 0px 0px;
}
#A7{
background-color: white;
height:30px;
width:30px;
position: absolute;
top: 80px;
left: 460px;
border-radius: 100px 100px 100px 100px;
}
#A8{
background-color: white;
height:30px;
width:30px;
position: absolute;
top: 80px;
left: 385px;
border-radius: 100px 100px 100px 100px;
}
#A9{
background-color: green;
height:60px;
width:5px;
position: absolute;
top: 20px;
left: 385px;
border-radius: 100px 100px 100px 100px;
transform: rotate(-30deg);
}
#A10{
background-color: green;
height:60px;
width:5px;
position: absolute;
top: 20px;
left: 485px;
border-radius: 100px 100px 100px 100px;
transform: rotate(30deg);
}
</style>
</head>
<body>
<div id="A1"></div>
<div id="A2"></div>
<div id="A3"></div>
<div id="A4"></div>
<div id="A5"></div>
<div id="A6"></div>
<div id="A7"></div>
<div id="A8"></div>
<div id="A9"></div>
<div id="A10"></div>
</body>
</html>
There are two types of CSS list:
OL: Ordered list which follows a sequency order like Numbers, Alphabets and etc.
UL: Unordered list items are market with round bullets.
There are three important style properties for ordered and unordered list.
list-style-type: types of bullets.
list-style-position: to set position of the bullets points
list-style-image: to set a background image for the bullet list type.
Ordered list:
decimal
decimal-leading-zero
lower-roman
upper-roman
lower-alphabets
upper-alphabets
Unordered list:
disc
square
circle
Code
Preview
The line is position outside of the list items boxes, by defult. however you can use the list-style-position property to specify whether the bullet points appear inside or outside of the list item block boxes.
Code
Preview
You can set a background image (icons) in place of the item marker using the list-style-image property.
Code
Preview
When you build an HTML table without any style or attributes, browser display them without any border. Styling a table with CSS can greatly improve its appearance.
Every table cell has separate borders as well as there is some space between the borders of adjacent table cells. It happens because table cell borders are separate by default. But, we can collapse the separate borders into one by using the borer-collapse property.
Example
table,td,th{
border:1px solid black;
border-collapse: collapse;
}
tr:nth-child(3)
{
background-color: black;
color:white;
}
To highlight alternative rows of the table, it can be even rows or odd rows
For odd rows
tr:nth-child(odd)
{
background-color: black;
color:white;
}
For even rows
tr:nth-child(even)
{
background-color: black;
color:white;
}
By default, a table expands and indentures to accommodate the data contained inside it. As data fills inside the table, it continues to expand as long as there is space. However, it is necessary to set a fixed width for the table in order to manage the layout.
The CSS table-layout defines the algorithm to be used to layout the table cells, rows and columns.
This property can take two values:
Auto
Fixed
Example:
table{
width:500px;
table-layout: fixed;
}