Scribd
Upload
7 views

introduction to css

Css

Uploaded by

sufiaintzar
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
7 views

introduction to css

Css

Uploaded by

sufiaintzar
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
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