Short CSS

1. Need for CSS:

CSS (Cascading Style Sheets) is a styling language used to describe the look and
formatting of a document written in HTML or XML. It provides the means to:

Separate content from presentation, ensuring that websites are accessible and
maintainable.

Control layouts, colors, fonts, and more on web pages.

Adapt the presentation to different types of devices, such as large screens, small
screens, or printers.

Example:
Without CSS, an HTML document may appear as plain text with links. With CSS, the
same document can have colors, varied fonts, layouts, and more.

2. Basic Syntax and Structure:

CSS rules consist of a selector and a declaration block:

selector {
property: value;
}

Example:

p {
color: red;
}

This CSS will make all paragraphs ( <p> ) have red text.

3. Backgrounds:
You can set the background properties of an element:

background-color : Sets the background color.

Short CSS 1
 background-image : Sets a background image.

background-repeat : Defines if/how the background image will be repeated.

background-position : Sets the position of the background image.

background-size : Specifies the size of the background images.

Example:

div {
background-color: yellow;
background-image: url('image.jpg');
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
}

4. Colors and Properties:

Colors can be defined in various formats:

Named colors: red , blue , etc.

HEX: #FF0000

RGB: rgb(255,0,0)

RGBA (with alpha transparency): rgba(255,0,0,0.5)

HSL: hsl(0, 100%, 50%)

HSLA: hsla(0, 100%, 50%, 0.5)

Example:

p {
color: #FF0000; /* Text color */
background-color: rgba(0, 255, 0, 0.3); /* Semi-transparent green background */
}

5. Manipulating Texts:
Various properties control text appearance:

Short CSS 2
 color : Sets the text color.

text-align : Controls text alignment ( left , right , center , justify ).

text-decoration : Defines text decoration ( underline , overline , line-through , none ).

line-height : Sets the space between lines of text.

text-transform : Controls text capitalization ( uppercase , lowercase , capitalize , none ).

Example:

p {
text-align: center;
text-decoration: underline;
line-height: 1.5;
text-transform: uppercase;
}

6. Fonts:
Control the typography of an element:

font-family : Specifies the font.

font-size : Sets the font size.

font-weight : Defines the thickness of characters.

font-style : Specifies the font style (normal, italic, or oblique).

Example:

body {
font-family: 'Arial', sans-serif;
font-size: 16px;
font-weight: bold;
font-style: italic;
}

7. Borders and Boxes:

Control the border around elements:

border : Shorthand for setting the width, style, and color of the borders.

Short CSS 3
 border-radius : Rounds the corners of an element.

box-shadow : Attaches one or more shadows to an element.

Example:

div {
border: 2px solid black;
border-radius: 5px;
box-shadow: 3px 3px 5px #888888;
}

8. Margins and Padding:

margin : Sets the space outside the borders.

padding : Sets the space between the content and the border.

Example:

div {
margin: 20px;
padding: 10px;
}

9. Lists:
Style list elements:

list-style-type : Specifies the type of list item marker ( disc , circle , square ,
decimal , none , etc.).

list-style-image : Uses an image as the list item marker.

Example:

ul {
list-style-type: square;
}
li.special {
list-style-image: url('marker.jpg');
}

Short CSS 4
 10. CSS2 and CSS3:
CSS2 was a revision of the original CSS specification. CSS3, on the other hand, is
divided into "modules", allowing specifications to be written and revised individually.

Differences:

CSS3 introduces new features like rounded corners, shadows, gradients,

transitions, and animations.

CSS3 has better support for media-specific styles.

11. Animations:
CSS3 introduced the ability to create animations using keyframes.

Example:

@keyframes slide {
from { transform: translateX(0%); }
to { transform: translateX(100%); }
}
div {
animation: slide 5s infinite;
}

This makes a <div> element slide across its parent container.

12. Tool-Tips:
Tooltips are a common UI element that offers hints or extra information when hovered
over or focused on.

Example:

[data-tooltip]:hover:after {
content: attr(data-tooltip);
position: absolute;
background-color: #333;
color: #fff;
padding: 5px;
border-radius: 5px;
}

Short CSS 5
 Use with HTML:

<span data-tooltip="This is a tooltip">Hover over me</span>

13. Style Images:

Styling images can make them more appealing:

border-radius : Round the corners.

box-shadow : Add shadows.

filter : Apply visual effects (e.g., blur , brightness , contrast ).

Example:

img {
border-radius: 50%;
box-shadow: 3px 3px 5px #888888;
filter: brightness(80%);
}

14. Variables:
CSS variables (or custom properties) allow you to store specific values for reuse
throughout your stylesheet.

Example:

:root {
--primary-color: #4CAF50;
}
body {
background-color: var(--primary-color);
}

15. Flex Box:

Flexbox is a layout model allowing items within a container to be dynamically arranged
based upon specific parameters.

Example:

Short CSS 6
 .container {
display: flex;
justify-content: space-between;
}

16. Media Queries:

Media queries allow styles to be applied based on device characteristics, like screen
width.
Example:

@media (max-width: 600px) {

body {
background-color: lightblue;
}
}

This applies a light

blue background for devices with a screen width of 600px or less.

17. Wildcard Selectors (*, ^, $) in CSS:

: Matches any element.

[attr^=value] : Matches elements with an attribute starting with the value.

[attr$=value] : Matches elements with an attribute ending with the value.

Example:

* {
box-sizing: border-box;
}
a[href^="https://"] {
background-color: yellow;
}
input[name$="name"] {
border: 2px solid red;
}

Short CSS 7
 18. Working with Gradients:
Gradients can be linear or radial:

Example:

div {
background: linear-gradient(red, yellow);
}

19. Pseudo Classes:

Pseudo-classes allow styling elements based on their state or position.
Examples:

a:hover {
color: red;
}
p:first-child {
font-weight: bold;
}

20. Pseudo Elements:

Pseudo-elements let you style specific parts of an element.
Examples:

p::first-line {
color: blue;
}
p::before {
content: "Read this: ";
}

21. Basic of Frameworks like Bootstrap:

Bootstrap is a popular CSS framework that provides ready-to-use components and
styles. It's mobile-first and supports responsive design. By including Bootstrap's CSS
and optional JavaScript files, developers can quickly build attractive, consistent, and
functional web interfaces.

Short CSS 8
 22. Responsive Web Design and Media Query:
Responsive design ensures a website looks good on all devices. Media queries, flexible
grid layouts, flexible images, and an understanding of the viewport and its size help in
achieving this.

Example:

@media screen and (max-width: 600px) {

.sidebar {
display: none;
}
}

23. CSS Variables:

We've already covered this in point #14. They allow for reusable values in your
stylesheets.
In conclusion, CSS is a powerful language for controlling the presentation of web
content. By understanding and mastering these topics, you can create visually
appealing, accessible, and responsive web designs.

Short CSS 9