CSS (Cascading Style Sheets) is a styling language used to control the appearance and layout of web pages. It works alongside HTML to define how elements like text, images, and sections should look on a website.
With CSS, you can:
✅ Change colors, fonts, and sizes 🎨
✅ Adjust spacing (margin, padding) 📏
✅ Position elements on the page 📌
✅ Create animations and transitions ✨
✅ Make websites responsive for different devices 📱💻
In simple terms, HTML builds the structure, and CSS makes it look beautiful! 💖
CSS works with HTML by selecting elements and applying styles to them. It controls the visual presentation, while HTML provides the structure.
How can we add CSS to an HTML document?
We can add CSS to an HTML document in three different ways:
1.Inline CSS: we can add CSS directly within an HTML element using the style attribute. This method is good for styling a single element.
2.Internal CSS: we can add CSS within the style tag in the head section of the HTML document. This method is useful when you want to apply styles to multiple elements in the same HTML document.
3.External CSS: You can link to an external CSS file using the link tag in the head section. This is the most efficient method, especially when the styles are to be used across multiple pages.
The border-style Property
This property specifies what kind of border to display:
A dotted border.
A dashed border.
A solid border.
A double border.
A groove border.
A ridge border.
A inset border.
A outset border.
A none border.
A hidden border.
A mix border.
This property is a shorthand property for border-width, border-style, and border-color
CSS Padding.
This element has a padding of 70px.
Demonstrating the Box Model
The CSS box model is essentially a box that wraps around every HTML element. It consists of: borders, padding, margins, and the actual content.
This text is the content of the box. We have added a 50px padding, 20px margin and a 15px green border. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Overline text decoration.
Line-throught text decoration.
Underline text decoration
Overline and underline text decoration.
Note:It is not recommended to underline text that is not a link, as this often confuses
the reader.
CSS Fallback Fonts
This is a paragraph.
This is another paragraph.
Sofia Font.
Lorem ipsum dolor sit amet.
123456790
Font Awesome icon library
Some Font Awesome icons:
Styled Font Awesome icons (size and color):
The font Property
This is a paragraph. The font size is set to 20 pixels, and the font family is Arial.
This is a paragraph. The font is set to italic, small-caps and bold, the font size is set to 12 pixels, the line height is set to 30 pixels, and the font family is Georgia.This is a paragraph. The font is set to italic, small-caps and bold, the font size is set to 12 pixels, the line height is set to 30 pixels, and the font family is Georgia.
Style a link with a color
The list-style-type Property
Example of unordered lists:
Coffee
Tea
Coca Cola
Coffee
Tea
Coca Cola
Example of ordered lists:
Coffee
Tea
Coca Cola
Coffee
Tea
Coca Cola
The list-style-image Property
The list-style-image property specifies an image as the list item marker:
Coffee
Tea
Coca Cola
A Fancy Table
Company
Contact
Country
Alfreds Futterkiste
Maria Anders
Germany
Berglunds snabbköp
Christina Berglund
Sweden
Centro comercial Moctezuma
Francisco Chang
Mexico
Ernst Handel
Roland Mendel
Austria
Island Trading
Helen Bennett
UK
Königlich Essen
Philip Cramer
Germany
Laughing Bacchus Winecellars
Yoshi Tannamuri
Canada
Magazzini Alimentari Riuniti
Giovanni Rovelli
Italy
North/South
Simon Crowther
UK
Paris spécialités
Marie Bertrand
France
The width and height Properties
Set the width of the table, and the height of the table header row:
Firstname
Lastname
Savings
Peter
Griffin
$100
Lois
Griffin
$150
Joe
Swanson
$300
Cleveland
Brown
$250
The vertical-align Property
This property sets the vertical alignment (like top, bottom, or middle) of the content in th or td.
Firstname
Lastname
Savings
Peter
Griffin
$100
Lois
Griffin
$150
Joe
Swanson
$300
Cleveland
Brown
$250
Striped Table
For zebra-striped tables, use the nth-child() selector and add a background-color to all even (or odd) table rows:
First Name
Last Name
Points
Peter
Griffin
$100
Lois
Griffin
$150
Joe
Swanson
$300
Cleveland
Brown
$250
Responsive Table
A responsive table will display a horizontal scroll bar if the screen is too
small to display the full content. Resize the browser window to see the effect:
To create a responsive table, add a container element (like div) with overflow-x:auto around the table element:
First Name
Last Name
Points
Points
Points
Points
Points
Points
Points
Points
Points
Points
Jill
Smith
50
50
50
50
50
50
50
50
50
50
Eve
Jackson
94
94
94
94
94
94
94
94
94
94
Adam
Johnson
67
67
67
67
67
67
67
67
67
67
CSS Overflow
The overflow property controls what happens to content that is too big to fit into an area.
This text is really long and the height of its container is only 100 pixels. Therefore, a scrollbar is added to help the reader to scroll the content. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem.
Without clear
div1
div2 - Notice that div2 is after div1 in the HTML code. However, since div1 floats to the left, the text in div2 flows around div1.
With clear
div3
div4 - Here, clear: left; moves div4 down below the floating div3. The value "left" clears elements floated to the left. You can also clear "right" and "both".
Grid of Boxes
Float boxes side by side:
Some text inside the box.
Some text inside the box.
Some text inside the box.
Note: Here, we use the clearfix hack to take care of the layout flow.
We also use the box-sizing property to make sure that the box doesn't break due to extra padding. Try to remove this code to see the effect.
Images Side by Side
Float images side by side:
The border-radius Property
Rounded corners for an element with a specified background color:
Rounded corners!
Rounded corners for an element with a border:
Rounded corners!
Rounded corners for an element with a background image:
Rounded corners!
Linear Gradient - Top to Bottom
Conic Gradient - Three Colors
The transition Property
Hover over the div element below, to see the transition effect:
Circled Image
Use the border-radius property to create circled images:
Hoverable Buttons
Use the :hover selector to change the style of the button when you move the mouse over it.
Tip: Use the transition-duration property to determine the speed of the "hover" effect:
