Scribd
Upload
2 views

introduction to css

Css

Uploaded by

sufiaintzar
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
2 views

introduction to css

Css

Uploaded by

sufiaintzar
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 6

Introduc on to CSS (Cascading Style Sheets)

CSS (Cascading Style Sheets) is a style sheet language used to describe the presenta on of a document
wri en in HTML. It controls the layout, colors, fonts, spacing, and overall look of a webpage. CSS
separates the content from the visual design, allowing developers to keep HTML focused on structure
and CSS focused on design.

Key Concepts of CSS

Selectors: CSS applies styles to HTML elements based on selectors. Selectors define which HTML
elements will be styled.

Common types of selectors:

Element Selector: Targets all instances of a par cular element.

p{

color: blue;

This applies the blue color to all <p> elements.

Class Selector: Targets elements with a specific class a ribute. Class selectors are defined with a
period (.) before the class name.

.example-class {

color: green;

This applies green color to any element with the class example-class.

ID Selector: Targets a specific element with an id a ribute. ID selectors are defined with a hash (#).

#example-id {

color: red;

This applies red color to the element with the ID example-id.

CSS Syntax: A CSS rule set consists of a selector and a declara on block. The declara on block contains
one or more declara ons inside curly braces {}. Each declara on includes a property and a value
separated by a colon (:), and each declara on ends with a semicolon (;).

Example:

h1 {

color: blue;

font-size: 24px;

}
This styles all <h1> elements to be blue and have a font size of 24 pixels.

Cascading and Inheritance:

Cascading: If mul ple rules apply to the same element, the browser decides which rule to apply
based on the source order, specificity, and importance.

Inheritance: Some proper es (like text color and font) are inherited by child elements, meaning if
you set a property on a parent element, its children will inherit that property unless otherwise
specified.

Types of CSS:

Inline CSS: Styles are applied directly within an HTML element using the style a ribute.

<p style="color: blue;">This is a blue paragraph.</p>

Internal CSS: Styles are placed within a <style> tag inside the <head> sec on of the HTML document.

<head>

<style>

p{

color: green;

</style>

</head>

External CSS: Styles are defined in an external CSS file and linked to the HTML document using a
<link> tag in the <head>.

<head>

<link rel="stylesheet" href="styles.css">

</head>

Example external CSS file (styles.css):

body {

background-color: lightgray;

Common CSS Proper es:

Color and Backgrounds:

color: red; /* Text color */

background-color: yellow; /* Background color */


Font and Text:

font-family: Arial, sans-serif; /* Font family */

font-size: 16px; /* Font size */

text-align: center; /* Align text */

Margins and Padding:

margin: 20px; /* Space outside the element */

padding: 10px; /* Space inside the element */

Borders:

border: 2px solid black; /* Border thickness, style, and color */

Tables:

table, th, td {
border: 1px solid;
}

table {
width: 100%;
}

td {
text-align: center;
}

th, td {
padding: 15px;
text-align: le ;
}

tr:hover {background-color: coral;}

tr:nth-child(even) {background-color: #f2f2f2;}

th {
background-color: #04AA6D;
color: white;
}

Box Model: Every HTML element is treated as a rectangular box in CSS, and the box model consists
of:

Content: The actual content (text, image, etc.).

Padding: Space between the content and the border.

Border: The edge around the padding.


Margin: Space outside the border.

Example:

div {

width: 200px;

padding: 20px;

border: 2px solid black;

margin: 10px;

Posi oning: CSS allows you to posi on elements on the page using different techniques:

Sta c (default): Normal flow of the document.

Rela ve: Posi oned rela ve to its normal posi on.

Absolute: Posi oned rela ve to the nearest posi oned ancestor.

Fixed: Posi oned rela ve to the viewport.

Flexbox and Grid: Modern layout models for building complex designs.

Example of absolute posi oning:

.absolute-box {

posi on: absolute;

top: 50px;

le : 100px;

Responsive Design: CSS enables the crea on of responsive web designs that adjust based on the
screen size. Media queries are o en used for this purpose.

@media (max-width: 600px) {

body {

background-color: lightblue;

Pseudoclasses and Pseudoelements:

Pseudoclasses: Apply styles to elements in specific states, such as when a user hovers over a link.

a:hover {

color: red;
}

Pseudoelements: Style specific parts of an element, like the first le er or line.

p::first-le er {

font-size: 2em;

color: blue;

Example of a Simple CSS File

/* Define basic styles */

body {

background-color: white;

font-family: Arial, sans-serif;

/* Style the main heading */

h1 {

color: darkblue;

text-align: center;

/* Style paragraphs */

p{

color: gray;

font-size: 16px;

line-height: 1.5;

/* Add hover effect to links */

a:hover {

color: green;

/* Responsive design for small screens */

@media (max-width: 600px) {

h1 {
font-size: 18px;

p{

font-size: 14px;

Conclusion:

CSS is essen al for crea ng visually appealing and responsive websites. It offers a wide range of styling
op ons, from typography to layout, making websites flexible and easy to manage.

You might also like