Scribd
Upload
7 views

Css Tutorial

The document is a comprehensive tutorial on CSS (Cascading Style Sheets), detailing its syntax, types (inline, internal, external), selectors, and properties for styling HTML elements. It covers the CSS box model, flexbox layout, and responsive design techniques, along with practical examples for each concept. Additionally, it provides exercises to apply the learned CSS skills in creating styled web pages.

Uploaded by

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

Css Tutorial

The document is a comprehensive tutorial on CSS (Cascading Style Sheets), detailing its syntax, types (inline, internal, external), selectors, and properties for styling HTML elements. It covers the CSS box model, flexbox layout, and responsive design techniques, along with practical examples for each concept. Additionally, it provides exercises to apply the learned CSS skills in creating styled web pages.

Uploaded by

entertainmentj007
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 13

CSS TUTORIAL

CSS is Cascading style sheets is the language we use to style an HTML document.CSS
describes how HTML elements should be displayed. CSS saves a lot of work. It can control
the layout of multiple web pages all at once

CSS Syntax:

Example

In this example all <p> elements will be center-aligned, with a red text color:

p{
color: red;
text-align: center;
}

 p is a selector in CSS (it points to the HTML element you want to style: <p>).
 color is a property, and red is the property value
 text-align is a property, and center is the property value

Types of CSS (Cascading Style Sheet)

 Inline CSS
 Internal or Embedded CSS
 External CSS

1. Inline CSS : Inline CSS involves applying styles directly to individual HTML elements
using the style attribute. This method allows for specific styling of elements within the
HTML document, overriding any external or internal styles.

Ex:

<p style="color:#009900;
font-size:50px;
font-style:italic;
text-align:center;"> Inline CSS </p>
2. Internal or Embedded CSS: Place the CSS styles within a <style> tag
inside the HTML file, usually inside the <head> section.

<html>
<head>
<style>
h3 {
color: green;
}
</style>
</head>
<body>
<h3>Welcome To CSS tutorial </h3>
<p>This is SDC Lab </p>
</body>
</html>

3. External CSS :

External CSS contains separate CSS files that contain only style properties with the help of
tag attributes (For example class, id, heading, … etc). CSS property is written in a separate
file with a .css extension and should be linked to the HTML document using a link tag. It
means that, for each element, style can be set only once and will be applied across web
pages.

<html>
<head>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<p>CSS Tutorial</p>
</body>
</html>

CSS Selectors

CSS selectors are used to target HTML elements on your pages, allowing you to apply
styles based on their ID, class, type attributes, and more.

Types of CSS Selectors

1. Basic Selectors

Basic selectors in CSS are simple tools used to target specific HTML
elements for styling. These include selecting by element name (e.g., h1),
class (.class Name), ID (#idName), or universally (* for all elements).

1. Universal Selector (*): Selects all elements on the page and applies
the same style universally. For example, setting the font color for every
element.

<html>
<head>
<style>
* {
color: red;
}

</style>
</head>
<body>
<h1>Header Text</h1>
<p>Paragraph Text</p>
</body>
</html>

2. Element Selector: Targets all elements of a specific type, such as


paragraphs or headers. For example, setting a common font size for all
paragraphs

<!DOCTYPE html>

<html>
<head>
<style>
h1 {
border: 2px solid green;
background-color: beige;
}
p {
background-color: yellow;
}
</style>

</head>
<body>

<h1>Demo of the element selector</h1>

<p id="firstname">Style with CSS</p>


<p>Enjoy with beautiful web pages</p>

<p>This line is so beautiful</p>

<h2>This is some text not in CSS.</h2>

</body>
</html>

3. Using Multiple Classes on a Single Element

HTML allows an element to have multiple classes by separating class


names with spaces. This enables a more modular and flexible approach to
styling, where an element can share common styles but also have unique
styles.

<!DOCTYPE html>
<html>

<head>
<style>
.country {
color: white;
padding: 10px;
}

.china {
background-color: black;
}

.india {
background-color: blue;
}

.usa {
background-color: red;
}

center {
padding: 20px;
}
</style>
</head>

<body>
<center>
<h2 class="country china">CHINA</h2>
<h2 class="country india">INDIA</h2>
<h2 class="country usa">UNITED STATES</h2>
</center>
</body>

</html>

The CSS id Selector

The id selector uses the id attribute of an HTML element to select a specific


element.

The id of an element is unique within a page, so the id selector is used to


select one unique element!

To select an element with a specific id, write a hash (#) character, followed
by the id of the element.

<!DOCTYPE html>
<html>
<head>
<style>

#para1 {
text-align: center;
color: red;
}
</style>
</head>
<body>
<p id="para1">Hello World!</p>
<p>This paragraph is not affected by the style.</p>

</body>
</html>

CSS Text
Text Color and Background Color

In this example, we define both the background-color property and


the color property:

Example
body {
background-color: lightgrey;
color: blue;
}

h1 {
background-color: black;
color: white;
}

div {
background-color: blue;
color: white;
}
Example:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Document</title>
<style>
body {
background-color: lightgrey;
color: blue;
}

h1 {
background-color: black;
color: white;
}

div {
background-color: blue;
color: white;
}
</style>
</head>
<body>
<h1>Hi i am using CSS test property</h1>
<div>
<h2> Hi i am not using h1</h2>
</div>

<div>
<h1> Hi i am using h1</h1>
</div>

</body>
</html>

Text Alignment
The text-align property is used to set the horizontal alignment of a text.

A text can be left or right aligned, centered, or justified.

h1 {
text-align: center;
}

h2 {
text-align: left;
}

h3 {
text-align: right;
}

CSS Box Model


In CSS, the term "box model" is used when talking about design and layout.

The CSS box model is essentially a box that wraps around every HTML
element. It consists of: content, padding, borders and margins. The image
below illustrates the box model:
 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

<!DOCTYPE html>
<html>
<head>
<style>

div {
background-color: lightgrey;
width: 300px;
border: 15px solid green;
padding: 50px;
margin: 20px;
}
</style>
</head>
<body>

<h2>Demonstrating the Box Model</h2>

<p>The CSS box model is essentially a box that wraps around every HTML element. It consists of:
borders, padding, margins, and the actual content.</p>

<div>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.</div>

</body>
</html>
Solution:

CSS Flexbox

Flexbox is short for the Flexible Box Layout module.

Flexbox is a layout method for arranging items in rows or columns.

Flexbox makes it easier to design a flexible responsive layout structure,


without using float or positioning.

<html>
<head>

<style>
.flex-container {
display: flex;
background-color: #f2f2f2;
padding: 10px;
}
.flex-item {
background-color: #4CAF50;
color: white;
margin: 5px;
padding: 20px;
text-align: center;
flex: 1;
}
</style>
</head>
<body>
<div class="flex-container">
<div class="flex-item">Item 1</div>
<div class="flex-item">Item 2</div>
<div class="flex-item">Item 3</div>
</div>
</body>
</html>

Flexbox Components
 Flex Container: The parent div containing various divisions.
 Flex Items: The items inside the container div.
Flexbox Axes
Flexbox operates on two axes:
1. Main Axis: Runs from left to right by default.
2. Cross Axis: Perpendicular to the main axis, runs from top to bottom.

1. Main Axis:
 Main Start: The start of the main axis.
 Main Size: The length between Main Start and Main End.
 Main End: The endpoint of the main axis.
2. Cross Axis:
The cross axis will be perpendicular to the main axis.
 Cross Start: The start of the cross axis.
 Cross Size: The length between Cross Start and Cross End.
 Cross End: The endpoint of the cross axis.

Flex Direction Properties


 Left to Right: flex-direction: row;
 Right to Left: flex-direction: row-reverse;
 Top to Bottom: flex-direction: column;
 Bottom to Top: flex-direction: column-reverse;
Aligning and Justifying Content
Flexbox provides several properties for aligning and justifying content
within the container:
 justify-content: Aligns items along the main axis (e.g., flex-start, flex-
end, center, space-between, space-around).
 align-items: Aligns items along the cross axis (e.g., stretch, center,
flex-start, flex-end).
 align-content: Aligns rows within a flex container when there is extra
space on the cross axis.

Responsive Design with Flexbox

Flexbox excels in creating responsive designs by adjusting items to fit


various screen sizes. You can use media queries in combination with
Flexbox properties to ensure your layout adapts seamlessly to different
devices.
<html>
<head>
<style>
.flex-container {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
background-color: #32a852;
}
.flex-container div {
background-color: #c9d1cb;
margin: 10px;
padding: 20px;
flex: 1 1 200px;
}
@media (max-width: 600px) {
.flex-container {
flex-direction: column;
}
}
</style>
</head>
<body>
<h2>Responsive Flexbox</h2>
<div class="flex-container">
<div>Item1</div>
<div>Item2</div>
<div>Item3</div>
</div>
</body>
</html>

Horizontal Navigation Bar Using Flexbox


<html>

<head>

<style>

.navbar {

display: flex;

justify-content: space-between;

align-items: center;

background-color: #4CAF50;

padding: 10px;

.navbar a {

color: white;

text-decoration: none;

padding: 10px 15px;


}

.navbar a:hover {

background-color: #45a049;

</style>

</head>

<body>

<div class="navbar">

<a href="#home">Home</a>

<a href="#services">Services</a>

<a href="#contact">Contact</a>

</div>

</body>

</html>

In this example,
 The .navbar uses display: flex with justify-content: space-between to
spread navigation links evenly and align items horizontally.
 Hover effects are added to each or better interactivity, creating a
simple yet effective navigation bar.

1. Create a webpage with a solid red background color.


2. Style a paragraph with a font size of 18px and font color blue.
3. Center a heading using text alignment.
4. Add a border of 2px solid black to a div.
6. Create a button with a background color of green and white text.
7. Add padding of 10px to a paragraph.
8. Set the margin of a div to 20px on all sides.
11. Underline a heading using text decoration.
6. Set a specific font family (like Arial or Times New Roman) for the body.
18. Create a navigation bar with horizontal links styled using CSS.
24. Create a simple flexbox layout with two boxes side by side.
27. Set different colors for alternate rows of a table.
<!DOCTYPE html>
<html>
<head>
<style>
table tr:nth-child(odd) {
background-color: lightgray;
}
table tr:nth-child(even) {
background-color: white;
}
</style>
</head>
<body>
<table>
<tr><td>Row 1</td></tr>
<tr><td>Row 2</td></tr>
<tr><td>Row 3</td></tr>
<tr><td>Row 4</td></tr>
</table>
</body>
</html>

You might also like