What is Cascading Style Sheets (CSS)?
What is Cascading Style Sheets (CSS)?
Embedded Files
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.
Or
Or
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
CSS Syntax
CSS Syntax
A CSS rule-set consists of a selector and a declaration block:
The selector points to the HTML element you want to style. The declaration block contains one or more declarations separated by semicolons. Each declaration includes a CSS property name and a value, separated by a colon. Multiple CSS declarations are separated with semicolons, and declaration blocks are surrounded by curly braces.
Three Ways to Insert CSS
Three Ways to Insert CSS
There are three ways of inserting a style sheet:
There are three ways of inserting a style sheet:
1.Inline CSS
1.Inline CSS
2.Internal CSS
3.External CSS
Inline CSS
Inline CSS
It is use apply a unique style to a single HTML element.
It is use apply a unique style to a single HTML element.
Internal CSS
Internal CSS
It is use applying a style to a single HTML page.
It is use applying a style to a single HTML page.
External CSS
External CSS
External CSS is used to style multiple HTML pages with a single style sheet. External CSS contains a separate CSS file with a (.CSS) extension. The CSS file contains style properties added in selectors.
External CSS is used to style multiple HTML pages with a single style sheet. External CSS contains a separate CSS file with a (.CSS) extension. The CSS file contains style properties added in selectors.
How to link a CSS file with HTML file
How to link a CSS file with HTML file
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.
CSS Selectors
CSS Selectors
CSS selectors are used to "find" (or select) the HTML elements you want to style. Some of them are:-
CSS selectors are used to "find" (or select) the HTML elements you want to style. Some of them are:-
•The CSS element Selector
•The CSS element Selector
•The CSS id Selector
•The CSS id Selector
•The CSS class Selector
•The CSS class Selector
•The CSS Universal Selector
•The CSS Universal Selector
•The CSS Grouping Selector
•The CSS Grouping Selector
The CSS element Selector
The CSS element Selector
The element selector selects HTML elements based on the element name.
The element selector selects HTML elements based on the element name.
Here, all <p> elements on the page will be center-aligned, with a yellow text color.
Here, all <p> elements on the page will be center-aligned, with a yellow text color.
The CSS id Selector
The CSS id Selector
The id selector uses the id attribute of an HTML element to select a specific element.
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!
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.
To select an element with a specific id, write a hash (#) character, followed by the id of the element.
The CSS class Selector
The CSS class Selector
The class selector selects HTML elements with a specific class attribute.
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.
To select elements with a specific class, write a period (.) character, followed by the class name.
You can also specify that only specific HTML elements should be affected by a class.
You can also specify that only specific HTML elements should be affected by a class.
In this example only <p> elements with class="center" will be center-aligned.
In this example only <p> elements with class="center" will be center-aligned.
HTML elements can also refer to more than one class.
HTML elements can also refer to more than one class.
In this example the <p> element will be styled according to class="center" and to class="large".
In this example the <p> element will be styled according to class="center" and to class="large".
The CSS Universal Selector
The CSS Universal Selector
The universal selector (*) selects all HTML elements on the page.
The universal selector (*) selects all HTML elements on the page.
The CSS rule above will affect every HTML element on the page.
The CSS rule above will affect every HTML element on the page.
The CSS Grouping Selector
The CSS Grouping Selector
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):
It will be better to group the selectors, to minimize the code.
It will be better to group the selectors, to minimize the code.
To group selectors, separate each selector with a comma.
To group selectors, separate each selector with a comma.
CSS Colors
CSS Colors
Colors are specified using predefined:
•color names
•color names
•RGB
•RGB
•HEX
•HEX
- RGB : An RGB color value represents RED, GREEN, and BLUE light sources. rgb(red, green, blue) Each parameter (red, green, and blue) defines the intensity of the color between 0 and 255.
2. HEX: In CSS, a color can be specified using a hexadecimal value in the form: #rrggbb Where rr (red), gg (green) and bb (blue) are hexadecimal values between 00 and ff (same as decimal 0-255).
2. HEX: In CSS, a color can be specified using a hexadecimal value in the form: #rrggbb Where rr (red), gg (green) and bb (blue) are hexadecimal values between 00 and ff (same as decimal 0-255).
3. Color Names: In CSS, a color can be specified by using a predefined color name:
CSS Backgrounds
CSS Backgrounds
The CSS background properties are used to define the background effects for elements.
The CSS background properties are used to define the background effects for elements.
Following are the CSS background properties:
Following are the CSS background properties:
•background-color
•background-color
•background-image
•background-image
•background-repeat
•background-repeat
•background-attachment
•background-attachment
•background-position
•background-position
1.CSS background-color
1.CSS background-color
The background-color property specifies the background color of an element.
The background-color property specifies the background color of an element.
With CSS, a color is most often specified by:
With CSS, a color is most often specified by:
•a valid color name - like "red"
•a valid color name - like "red"
•a HEX value - like "#ff0000"
•a HEX value - like "#ff0000"
•an RGB value - like "rgb(255,0,0)"
•an RGB value - like "rgb(255,0,0)"
Syntax:
2.CSS background-image
2.CSS background-image
The background-image property specifies an image to use as the background of an element.
The background-image property specifies an image to use as the background of an element.
Syntax:
3.CSS background-repeat
3.CSS background-repeat
The background-repeat property repeats an image both horizontally and vertically.
The background-repeat property repeats an image both horizontally and vertically.
Some images should be repeated only horizontally or vertically, or they will look strange.
Some images should be repeated only horizontally or vertically, or they will look strange.
- To repeat only horizontally we use value repeat-x.
- To repeat only vertically we use value repeat-y.
- To stop the image from repeating itself we use value no-repeat.
Syntax:
4.CSS Background-position
4.CSS Background-position
To set a position to the background we use property background-position.
To set a position to the background we use property background-position.
Position keywords are:
Position keywords are:
Left, right, top, bottom, top left, top right, bottom left, bottom right.
Left, right, top, bottom, top left, top right, bottom left, bottom right.
Syntax:
CSS Background-size
CSS Background-size
The background-size property sets the size of the element’s background image. The image can be left to its natural size, stretched or constrained to the fit the available space
The background-size property sets the size of the element’s background image. The image can be left to its natural size, stretched or constrained to the fit the available space
The value for background-size can be:
The value for background-size can be:
- Length and width in percentage or pixels
- Cover
- auto
- length
- initial
- inherit;
- contain
Syntax:
5.CSS background-attachment
5.CSS background-attachment
The background-attachment property specifies whether the background image should scroll or be fixed.
The background-attachment property specifies whether the background image should scroll or be fixed.
Syntax:
Syntax:
CSS background - Shorthand property
CSS background - Shorthand property
To shorten the code, it is also possible to specify all the background properties in one single property. This is called a shorthand property.
To shorten the code, it is also possible to specify all the background properties in one single property. This is called a shorthand property.
When using the shorthand property the order of the property values is:
When using the shorthand property the order of the property values is:
-> background-color
-> background-color
-> background-image
-> background-image
-> background-repeat
-> background-repeat
-> background-attachment
-> background-attachment
-> background-position
-> background-position
CSS Border
CSS Border
The CSS border properties allow you to specify the style, width, and color of an element’s border.
The CSS border properties allow you to specify the style, width, and color of an element’s border.
CSS border-style
CSS border-style
- Dotted
- Dashed
- Solid
- Double
- None
- Hidden
Example:
Example:
Demonstration of the different border styles:
Demonstration of the different border styles:
Syntax:
CSS border-width
CSS border-width
The border-width property specifies the width of four borders.
The border-width property specifies the width of four borders.
Syntax:
CSS border-color
CSS border-color
The border-color property is used to set the color of four borders.
The border-color property is used to set the color of four borders.
Syntax:
CSS Border – Sides
CSS Border – Sides
Syntax:
CSS Border - Shorthand Property
CSS Border - Shorthand Property
Syntax:
Simple way to add the size of the border add type of border and color of the border in one line.
Syntax:
CSS Rounded Borders
CSS Rounded Borders
Border Radius
Border Radius
The border-radius property is used to add rounded borders to an element.
The border-radius property is used to add rounded borders to an element.
Syntax:
CSS Margins
CSS Margins
The CSS margin properties are used to create space around elements, outside of any defined borders.
The CSS margin properties are used to create space around elements, outside of any defined borders.
Syntax:
CSS Padding
CSS Padding
The CSS padding properties are used to generate space around an element’s content, inside of any defined borders.
The CSS padding properties are used to generate space around an element’s content, inside of any defined borders.
Syntax:
CSS Box Model
CSS Box Model
In CSS, the term "box model" is used when talking about design and layout.The CSS box model is essentially a box that wraps around every HTML element. It consists of: content, padding, borders and margins.Explanation of the different parts:
- Content - The content of the box, where text and images appear
- Padding - Clears an area around the content. The padding is transparent
- Border - A border that goes around the padding and content
- Margin - Clears an area outside the border. The margin is transparent
CSS height and Width
CSS height and Width
The height and width properties are used to set the height and width of an element.
The height and width properties are used to set the height and width of an element.
Syntax:
CSS Text
CSS Text
CSS Text Color
CSS Text Color
The color property is used to set the color of the text . The color is specified by:
The color property is used to set the color of the text . The color is specified by:
- a color name
- a HEX value
- an RGB value
Syntax:
CSS Text Alignment
CSS Text Alignment
The text-align property is used to set the horizontal alignment of a text.
The text-align property is used to set the horizontal alignment of a text.
Syntax:
CSS Text Decoration
CSS Text Decoration
The text-decoration property is used to set or remove decorations from text.
The text-decoration property is used to set or remove decorations from text.
The Value text-decoration: none; is often used to remove underlines from links.
The Value text-decoration: none; is often used to remove underlines from links.
Syntax:
CSS Text Transformation
CSS Text Transformation
The text-transform property is used to specify uppercase and lowercase letters in a text.
The text-transform property is used to specify uppercase and lowercase letters in a text.
Syntax:
CSS Text Spacing
CSS Text Spacing
In this chapter you will learn about the following properties:
In this chapter you will learn about the following properties:
Text-indent
Letter-spacing
Line-height
Word-spacing
Word-spacing
Text Indentation
Text Indentation
The text-indent property is used to specify the indentation of the first line of a text:
The text-indent property is used to specify the indentation of the first line of a text:
Letter Spacing
Letter Spacing
The letter-spacing property is used to specify the space between the characters in a text. The following example demonstrates how to increase or decrease the space between characters:
The letter-spacing property is used to specify the space between the characters in a text. The following example demonstrates how to increase or decrease the space between characters:
Line Height
Line Height
The line-height property is used to specify the space between lines:
The line-height property is used to specify the space between lines:
Word Spacing
Word Spacing
The word-spacing property is used to specify the space between the words in a text. The following example demonstrates how to increase or decrease the space between words:
The word-spacing property is used to specify the space between the words in a text. The following example demonstrates how to increase or decrease the space between words:
White Space
White Space
The white-space property specifies how white-space inside an element is handled. This example demonstrates how to disable text wrapping inside an element:
The white-space property specifies how white-space inside an element is handled. This example demonstrates how to disable text wrapping inside an element:
Property -- Description
Property -- Description
letter-spacing-- Specifies the space between characters in a text
letter-spacing-- Specifies the space between characters in a text
line-height -- Specifies the line height
line-height -- Specifies the line height
text-indent -- Specifies the indentation of the first line in a text-block
text-indent -- Specifies the indentation of the first line in a text-block
white-space -- Specifies how to handle white-space inside an element
white-space -- Specifies how to handle white-space inside an element
word-spacing -- Specifies the space between words in a text
word-spacing -- Specifies the space between words in a text
CSS Font
CSS Font
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
- Font family:
- Purpose: Specifies the typeface for your text.
- Details: Lists fonts in order of preference. If the first font isn’t available, the browser tries the next one. The generic font family (like serif, sans-serif, monospace, etc.) acts as a fallback.
Syntax:
2. Font Size
2. Font Size
- Purpose: Sets the size of the text.
- Details: You can use various units:
- px (pixels) for fixed sizes
- em or rem for scalable, relative sizes
- % for percentages based on parent elements
Syntax:
3. Font Weight
3. Font Weight
- Purpose: Adjusts the thickness or boldness of the text.
- Values:
- Named weights: normal, bold, bolder, lighter
- Numeric values: 100 (thin) to 900 (extra bold)
Syntax:
4. Font Style
4. Font Style
- Purpose: Specifies the style of the text, often used for italics.
- Values: normal, italic, oblique
Syntax:
5. Font Variant
5. Font Variant
Purpose: Controls the appearance of small-caps text.
Purpose: Controls the appearance of small-caps text.
Details: small-caps displays lowercase letters in a smaller uppercase format.
Details: small-caps displays lowercase letters in a smaller uppercase format.
Syntax:
Parallax effect
Parallax effect
<html>
<html>
<head>
<head>
<title>paral effect</title>
<title>paral effect</title>
<style>
<style>
*{
*{
margin: 0px;
margin: 0px;
padding: 0px;
padding: 0px;
}
}
body{
body{
background-image: url("background.jpg");
background-image: url("background.jpg");
background-repeat: no-repeat;
background-repeat: no-repeat;
background-size: cover;
background-size: cover;
background-position: center;
background-position: center;
background-attachment: fixed;
background-attachment: fixed;
}
}
.box{
.box{
height: 100vh;
height: 100vh;
margin-top: 50vh
margin-top: 50vh
}
}
.box h1{
.box h1{
color: white;
color: white;
font-size: 75px;
font-size: 75px;
line-height: 100vh;
line-height: 100vh;
text-align: center;
text-align: center;
text-shadow: 2px 2px 10px #969696;
text-shadow: 2px 2px 10px #969696;
}
}
#b1{
#b1{
background-image: url("pic1.jpg");
background-image: url("pic1.jpg");
background-size: cover;
background-size: cover;
background-position: center;
background-position: center;
background-attachment: fixed;
background-attachment: fixed;
}
}
#b2{
#b2{
background-image: url("pic2.jpg");
background-image: url("pic2.jpg");
background-size: cover;
background-size: cover;
background-position: center;
background-position: center;
background-attachment: fixed;
background-attachment: fixed;
}
}
#b3{
#b3{
background-image: url("pic3.jpg");
background-image: url("pic3.jpg");
background-size: cover;
background-size: cover;
background-position: center;
background-position: center;
background-attachment: fixed;
background-attachment: fixed;
}
}
#b4{
#b4{
background-image: url("pic4.jpg");
background-image: url("pic4.jpg");
background-size: cover;
background-size: cover;
background-position: center;
background-position: center;
background-attachment: fixed;
background-attachment: fixed;
}
}
</style>
</style>
</head>
</head>
<body>
<body>
<div id="b1" class="box"><h1>text</h1></div>
<div id="b1" class="box"><h1>text</h1></div>
<div id="b2" class="box"><h1>text</h1></div>
<div id="b2" class="box"><h1>text</h1></div>
<div id="b3" class="box"><h1>text</h1></div>
<div id="b3" class="box"><h1>text</h1></div>
<div id="b4" class="box"><h1>text</h1></div>
<div id="b4" class="box"><h1>text</h1></div>
</body>
</body>
</html>
</html>
CSS Display Property.
CSS Display Property.
Display Block
Display Block
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:
Display Inline
Display Inline
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;
Display: none;
display: none; is commonly used with JavaScript to hide and show elements without deleting and recreating them.
The position Property
The position Property
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.
Relative Positioning
Relative Positioning
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.
Absolute Positioning
Absolute Positioning
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
Fixed Positioning
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.
Sticky Positioning
Sticky Positioning
How to make Android App logo.
How to make Android App logo.
<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>
CSS List properties
CSS List properties
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.
List-style-type:
List-style-type:
Ordered list
Ordered list
Ordered list:
decimal
decimal-leading-zero
lower-roman
upper-roman
lower-alphabets
upper-alphabets
Unordered list
Unordered list
Unordered list:
disc
square
circle
Code
Preview
List-style-Position:
List-style-Position:
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
List-style-image:
List-style-image:
You can set a background image (icons) in place of the item marker using the list-style-image property.
Code
Preview
Creating Navigation Menus Using Lists
Creating Navigation Menus Using Lists
HTML lists are frequently used to create horizontal navigation bar or menu that typically appear at the top of a website. But since the list items are block elements, so to display them inline we need to use the CSS display property.
HTML lists are frequently used to create horizontal navigation bar or menu that typically appear at the top of a website. But since the list items are block elements, so to display them inline we need to use the CSS display property.
<head><title>Building Navigation Bar with HTML List and CSS</title><style> body{ font-size: 14px; font-family: Arial,sans-serif; } ul { padding: 0; list-style: none; background: #f2f2f2; } ul li { display: inline-block; } ul li a { display: block; padding: 10px 25px; color: #333; text-decoration: none; } ul li a:hover { color: #fff; background: #939393; }</style></head><body> <nav> <ul> <li><a href="#">Home</a></li> <li><a href="#">About Us</a></li> <li><a href="#">Products</a></li> <li><a href="#">Services</a></li> <li><a href="#">Portfolio</a></li> <li><a href="#">Contact</a></li> </ul> </nav> <p><strong>Note:</strong> Place mouse pointer over the menu link to see the hover effect.</p></body><html>
CSS Table properties
CSS Table properties
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.
Collapse table border
Collapse table border
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;
}
Colors specific rows in the table
Colors specific rows in the table
tr:nth-child(3)
{
background-color: black;
color:white;
}
Table Stripped
Table Stripped
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;
}
Controlling the table layout
Controlling the table layout
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;
}
Example 1:
Example 1:
HYML Tags
HYML Tags
<html><head> <title>Styled Tables</title> <link rel="stylesheet" href="styles.css"></head><body><div class="table-container"> <table class="styled-table red-header"> <thead> <tr> <th>Name</th> <th>Age</th> <th>Occupation</th> <th>Location</th> </tr> </thead> <tbody> <tr> <td>Luke Peters</td> <td>25</td> <td>Freelance Web Developer</td> <td>Brookline, MA</td> </tr> <tr> <td>Joseph Smith</td> <td>27</td> <td>Project Manager</td> <td>Somerville, MA</td> </tr> <tr> <td>Maxwell Johnson</td> <td>26</td> <td>UX Architect & Designer</td> <td>Arlington, MA</td> </tr> <tr> <td>Harry Harrison</td> <td>25</td> <td>Front-End Developer</td> <td>Boston, MA</td> </tr> </tbody> </table> <!-- 02 Table --> <table class="styled-table green-header"> <thead> <tr> <th>Product</th> <th>Unit Price</th> <th>Quantity</th> <th>Date Sold</th> <th>Status</th> </tr> </thead> <tbody> <tr> <td>Solid oak work table</td> <td>$800</td> <td>10</td> <td>03/15/2014</td> <td>Waiting for Pickup</td> </tr> <tr> <td>Leather iPhone wallet</td> <td>$45</td> <td>120</td> <td>02/28/2014</td> <td>In Transit</td> </tr> <tr> <td>27" Apple Thunderbolt displays</td> <td>$1000</td> <td>25</td> <td>02/10/2014</td> <td>Delivered</td> </tr> <tr> <td>Bose studio headphones</td> <td>$60</td> <td>90</td> <td>01/14/2014</td> <td>Delivered</td> </tr> </tbody> </table> <!-- 03 Table --> <table class="styled-table blue-header"> <thead> <tr> <th>Username</th> <th>Email</th> <th>Password</th> <th>Active</th> </tr> </thead> <tbody> <tr> <td>ninjalug</td> <td>misterninja@hotmail.com</td> <td>**********</td> <td>Yes</td> </tr> <tr> <td>jsmith41</td> <td>joseph.smith@gmail.com</td> <td>**********</td> <td>No</td> </tr> <tr> <td>1337hax0r15</td> <td>hackerdude1000@aol.com</td> <td>**********</td> <td>Yes</td> </tr> </tbody> </table> </div></body></html>
CSS Tags
CSS Tags
<style>body { font-family: Arial, sans-serif; background-color: #ffffff; color: #fff; padding: 20px; color: black;}.table-container { margin: 0 auto; max-width: 1000px;}.styled-table { border-collapse: collapse; margin: 20px 0; font-size: 18px; width: 100%; text-align: left; border-radius: 8px; overflow: hidden;}.styled-table th,.styled-table td { padding: 12px 15px;}.styled-table thead tr { font-size: 20px; color: #fff;}.red-header thead { background-color: #f25c5c;}.green-header thead { background-color: #4caf50;}.blue-header thead { background-color: #2196f3;}.styled-table tbody tr { border-bottom: 1px solid #ddd;}.styled-table tbody tr:nth-of-type(even) { background-color: #f3f3f3; color: #222;}.styled-table tbody tr:last-of-type { border-bottom: 2px solid #ac4caf;}</style>
Example 2:
Example 2:
HTML
HTML
<!DOCTYPE html><html lang="en"><head> <title>University Timetable</title></head><body> <div class="timetable-container"> <table class="timetable"> <thead> <tr> <th>Time</th> <th>Monday</th> <th>Tuesday</th> <th>Wednesday</th> <th>Thursday</th> <th>Friday</th> </tr> </thead> <tbody> <tr> <td>9:00</td> <td class="blue">CS335 [JH1]</td> <td class="purple">CS426 [CS1]</td> <td class="green">MD352 [Kairos]</td> <td></td> <td></td> </tr> <tr> <td>10:00</td> <td class="blue">CS335 [Lab]</td> <td></td> <td class="green">MD352 [Kairos]</td> <td></td> <td class="orange">CS240 [CH]</td> </tr> <tr> <td>11:00</td> <td class="blue">CS335 [Lab]</td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td>12:00</td> <td></td> <td></td> <td></td> <td class="red">MD313 [Iontas]</td> <td></td> </tr> <tr> <td>14:00</td> <td></td> <td class="purple">CS426 [CS2]</td> <td></td> <td class="orange">CS240 [TH1]</td> <td></td> </tr> <tr> <td>15:00</td> <td></td> <td></td> <td></td> <td class="orange">CS240 [Lab]</td> <td></td> </tr> <tr> <td>16:00</td> <td></td> <td></td> <td></td> <td class="orange">CS240 [Lab]</td> <td></td> </tr> <tr> <td>17:00</td> <td class="blue">CS335 [TH1]</td> <td></td> <td></td> <td></td> <td></td> </tr> </tbody> </table> </div></body></html>
CSS
CSS
<style> body { font-family: Arial, sans-serif; background-color: #ff4c4c; margin: 0; padding: 20px;}
.timetable-container { max-width: 900px; margin: 0 auto;}
.timetable { width: 100%; border-collapse: collapse; background-color: #2e3a46; color: #fff; border-radius: 8px; overflow: hidden;}
.timetable th,.timetable td { padding: 10px; text-align: center;}
.timetable th { background-color: #1c252c;}
.timetable tbody tr:nth-child(even) { background-color: #3a4853;}
.timetable td { border: 1px solid #444;}
.blue { background-color: #007bff; color: #fff;}
.purple { background-color: #6f42c1; color: #fff;}
.green { background-color: #28a745; color: #fff;}
.orange { background-color: #fd7e14; color: #fff;}
.red { background-color: #dc3545; color: #fff;}</style>
.timetable-container { max-width: 900px; margin: 0 auto;}
.timetable { width: 100%; border-collapse: collapse; background-color: #2e3a46; color: #fff; border-radius: 8px; overflow: hidden;}
.timetable th,.timetable td { padding: 10px; text-align: center;}
.timetable th { background-color: #1c252c;}
.timetable tbody tr:nth-child(even) { background-color: #3a4853;}
.timetable td { border: 1px solid #444;}
.blue { background-color: #007bff; color: #fff;}
.purple { background-color: #6f42c1; color: #fff;}
.green { background-color: #28a745; color: #fff;}
.orange { background-color: #fd7e14; color: #fff;}
.red { background-color: #dc3545; color: #fff;}</style>
Page updated
Google Sites
Report abuse