CSS Introduction

CSS is the language we use to style a Web page.

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

Why Use CSS?

CSS is used to define styles for your web pages, including the design, layout and variations in display for different devices and screen sizes

HTML vs CSS

FEATURE	HTML (Hyper Text Markup Language	CSS (Cascading Style Sheets)
Core Role	Defines content and structure	Controls layout and presentation
Analogy	The bones and structural pillars	The skin, clothes, and makeup
Syntax Elements	Tags (e.g., `<p>`, `<h1>`, `<div>`)	Selectors and properties (e.g., `color: blue;`)
File Extension	.html	.css
Animations	Does not natively support animations	Built-in support for transitions and animations

Advantages of CSS

Faster Loading Times: Code efficiency is significantly improved. One CSS rule can style thousands of identical elements across an entire website. This means less code to download and much faster page speeds.
Easy Maintenance: Updates take seconds instead of hours. Changing a single color or font in your central CSS file instantly updates every single page across your entire website.
Better User Experience: Websites become fully responsive. Built-in layout tools let you completely rearrange elements for mobile screens, tablets, and desktops using the exact same HTML content.
Advanced Design Options: Visual capabilities are vastly expanded. It handles complex layouts, custom fonts, multi-column text, gradients, shadows, and smooth page animations without needing heavy images.
Search Engine Friendly: Clean code helps search engines index content. Stripping out messy design tags leaves behind pure, structured HTML, making it much easier for Google to read and rank your pages

Types Of CSS

Internal CSS

An internal style sheet may be used if one single HTML page has a unique style.

The internal style is defined inside the <style> element, inside the head section

Example of internal css

<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: linen;
}
h1 {
color: maroon;
">: 40px;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>

Inline CSS

An inline style may be used to apply a unique style for a single element.

To use inline styles, add the style attribute to the relevant element. The style attribute can contain any CSS property.

Example OF Inline css

<!DOCTYPE html>
<html>
<body>
<h1 style="color:blue;text-align:center;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>
</body>
</html>

CSS Comments

Comments are used to explain the CSS code, and may help when you edit the source code at a later date.

Comments are also used to temporarily disable sections of CSS code within a stylesheet.

Comments are ignored by browsers!

A CSS comment is placed inside the HTML <style> element, and starts with /* and ends with */:

EXAMPLE:-

/* This is a single-line comment */
p {
color: red;
}

/* This is
a multi-line
comment */
p {
color: red;
}

CSS Errors

Errors in CSS can lead to unexpected behavior or styles not being applied correctly.

This page shows common CSS mistakes, and how to avoid them.

Missing Semicolons

Forgetting a semicolon at the end of a property declaration can break the style rule

.bad {
color: red
background-color: yellow;
}
HERE FORGOTTEN PUT SEMICOLONS(;) FOR COLOE :RED

Invalid Property Names

Using a property name that does not exist will simply be ignored by the browser.

.bad {
colr: blue;
font-size: 16px;
}

HERE THE PROPERTY NAME COLOR WAS INCORRECT

Invalid Values

Correct properties but invalid values will also be ignored.

.bad {
width: -100px;
color: green;
}

HERE THE VALUE SHOULD BE IN NEGITIVE

Unclosed Braces

If you forget to close a brace }, the entire rule may be ignored.

.bad {
padding: 20px;
margin: 10px;
HERE BRACES WAS NOT CLOSED

Extra Colons or Braces

Typos like extra colons or misplaced braces can cause rules to break.

.bad {
color:: blue;
}}

HERE THERE EXTRA COLONS AND BRACES

CSS Colors

In CSS, colors are specified by using a predefined color name, or with a RGB, HEX, HSL, RGBA, HSLA value

CSS Color Names

In CSS, a color can be specified by using a predefined color name

CSS/HTML support 140 standard color names

CSS Background Color

You can set the background color for HTML elements

<h1 style="background-color:DodgerBlue;">Hello World</h1>
<p style="background-color:Tomato;">Lorem ipsum...</p>

CSS Text Color

You can set the color of text:

<h1 style="color:Black;">Hello World</h1>
<p style="color:DodgerBlue;">Lorem ipsum...</p>
<p style="color:MediumSeaGreen;">Ut wisi enim...</p>

Hello World

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

CSS RGB Colors

RGB Value

An RGB color value represents RED, GREEN, and BLUE light sources.

In CSS, a color can be specified as an RGB value, using this formula:

rgb(red, green, blue)

Each parameter (red, green, and blue) defines the intensity of the color between 0 and 255.

HEX Value

A hexadecimal color is specified with: #RRGGBB.

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).

HSL Value

HSL stands for hue, saturation, and lightness.

In CSS, a color can be specified using hue, saturation, and lightness (HSL) in the form:

hsl(hue, saturation, lightness)

Hue is a degree on the color wheel (from 0 to 360):

0 (or 360) is red
120 is green
240 is blue

Saturation is a percentage value: 0% means a shade of gray, and 100% is the full color.

Lightness is also a percentage; 0% is black, 50% is neither light or dark, 100% is white.

CSS Backgrounds

The CSS background properties are used to add background effects for elements.

CSS background-color

The background-color property specifies the background color of an element.

Example

The background color of a page is set like this:

body {
background-color: lightblue;
}

With CSS, a color is most often specified by:

a valid color name - like "red"
a HEX value - like "#ff0000"
an RGB value - like "rgb(255,0,0)"
CSS background-image
The background-image property specifies an image to use as the background of an element.

CSS background-repeat

The background-repeat property sets if/how a background image will be repeated.

By default, a background-image is repeated both vertically and horizontally.

Some images should be repeated only horizontally or vertically, or they will look strange, like this:

CSS Borders

CSS Border Width

The border-width property specifies the width of the four borders.

The width can be set as a specific size (in px, pt, cm, em, etc) or by using one of the three pre-defined values: thin, medium, or thick

p.one {
border-style: solid;
border-width: 5px;
}
p.two {
border-style: solid;
  border-width: medium;
}
p.three {
border-style: dotted;
  border-width: 2px;
}
p.four {
border-style: dotted;
  border-width: thick;
}

Result:

CSS Border Color

The border-color property is used to set the color of the four borders.

p.one {
border-style: solid;
border-color: red;
}
p.two {
border-style: solid;
  border-color: green;
}
p.three {
  border-style: dotted;
  border-color: blue;
}

Result:

CSS TEXT-FONTS

1.font-family

The font-family property is used to specify the font type of text.

2.font-size

The CSS font-size property is used to specify the size of the text/font.

Absolute sizes:

px: Pixels offers fixed and precise control over the font size.

xx-small, x-small, small, medium, large, x-large, xx-large. These keywords has a predefined set of sizes in browsers.

CSS Font Style

The CSS font-style property specifies the font style for a text..

p.normal {
font-style: normal;
}
p.italic {
font-style: italic;
}
p.oblique {
font-style: oblique;
}

p.normal {
font-weight: normal;

The font-style property

This is a paragraph in normal style.

This is a paragraph in italic style.

This is a paragraph in oblique style.

CSS Font Weight

The CSS `font-weight` property specifies how thick or thin characters in text should be displayed.
p.light {
font-weight: lighter;
}
p.thick {
font-weight: bold;
}
p.thicker {
font-weight: 900;
}

The font-weight property

This is a paragraph.

This is a paragraph.

CSS Margins

The CSS margin properties are used to create space around elements, outside of any defined borders.

Margins define the distance between an element's border and the surrounding elements.

With CSS, you have full control over the margins. CSS has properties for setting the margin for each individual side of an element (top, right, bottom, and left), and a shorthand property for setting all the margin properties in one declaration.

Margin - Individual Sides

CSS has properties for specifying the margin for each side of an element:

CSS Padding
CSS Padding
The CSS padding properties are used to generate space around an element's content, inside of any defined borders.
With CSS, you have full control over the padding. There are properties for setting the padding for each side of an element (top, right, bottom, and left), and a shorthand property for setting all the padding properties in one declaration.
Padding - Individual Sides
CSS has properties for specifying the padding for each side of an element:
- The CSS Box Model
  In CSS, the term "box model" is used when talking about web design and layout.
  The CSS box model is essentially a box that wraps around every HTML element.
  Every box consists of four parts: content, padding, borders and margins.
  - 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 Flexbox
  CSS Flexbox is short for the CSS Flexible Box Layout module.
  Flexbox is a layout model for arranging items (horizontally or vertically) within a container, in a flexible and responsive way.
  Flexbox makes it easy to design a flexible and responsive layout, without using float or positioning.
  CSS Flex Container Properties
  - display - Must be set to flex or inline-flex
  - flex-direction - Sets the display-direction of flex items
  - flex-wrap - Specifies whether the flex items should wrap or not
  - flex-flow - Shorthand property for flex-direction and flex-wrap
  - justify-content - Aligns the flex items when they do not use all available space on the main-axis (horizontally)
  - align-items - Aligns the flex items when they do not use all available space on the cross-axis (vertically)
  - align-content - Aligns the flex lines when there is extra space in the cross axis and flex items wrap
  CSS flex-direction Property
  The flex-direction property specifies the display-direction of flex items in the flex container.
  This property can have one of the following values:
  row (default)
  - column
  - row-reverse
  - column-reverse
  - CSS Grid Layout
  - CSS Grid Layout Module
  - The Grid Layout Module offers a grid-based layout system, with rows and columns.
  - The Grid Layout Module allows developers to easily create complex web layouts.
  - The Grid Layout Module makes it easy to design a responsive layout structure, without using float or positioning
  - Responsive Web Design
  - Introduction to Responsive Web Design
  - Responsive web design is about creating web pages that look good on all devices!
  - A responsive web design will automatically adjust for different screen sizes and viewports.
  - Best Experience For All Users
  - Web pages can be viewed with many different devices: desktops, tablets, and mobile phones.
  - Your web page should look good, and be easy to use, regardless of the device.
  - Responsive web design is about using HTML and CSS to automatically resize, hide, shrink, or enlarge a website, to make it look good on all devices.
  - Key components in responsive web design are:
  - Viewport <meta> tag
  - Flexible layout (grid and flex)
  - Mediaqueries

CSS(Cascading Style Sheets)

CSS Introduction

Why Use CSS?

Internal CSS

Inline CSS

CSS Comments

CSS Errors

Missing Semicolons

Invalid Property Names

Invalid Values

Unclosed Braces

Extra Colons or Braces

CSS Colors

CSS Colors

CSS Color Names

CSS Background Color

CSS Text Color

Hello World

CSS RGB Colors

RGB Value

HEX Value

HSL Value

CSS Backgrounds

CSS background-color

Example

CSS background-image

CSS background-repeat

CSS Borders

CSS Border Width

CSS Border Color

1.font-family

CSS Font Style

The font-style property

CSS Font Weight

The CSS font-weight property specifies how thick or thin characters in text should be displayed.p.light { font-weight: lighter;}p.thick { font-weight: bold;}p.thicker { font-weight: 900;}

The font-weight property

CSS Margins

Margin - Individual Sides

CSS Padding

CSS Padding

Padding - Individual Sides

The CSS Box Model

CSS Flexbox

CSS Flex Container Properties

CSS flex-direction Property

CSS Grid Layout

CSS Grid Layout Module

Responsive Web Design

Introduction to Responsive Web Design

Best Experience For All Users

Comments

Join Techsnap Creators

The CSS `font-weight` property specifies how thick or thin characters in text should be displayed.
p.light {
font-weight: lighter;
}
p.thick {
font-weight: bold;
}
p.thicker {
font-weight: 900;
}