Scribd
Upload
23 views

CSS Basics

CSS (Cascading Style Sheets) is a language for styling and formatting web pages. It allows control over colors, layout, fonts and more. There are three main ways to apply CSS - inline, internal, and external stylesheets. CSS selectors like tags, IDs, and classes are used to target elements for styling. Common CSS properties include color, background, font, width, height and more.

Uploaded by

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

CSS Basics

CSS (Cascading Style Sheets) is a language for styling and formatting web pages. It allows control over colors, layout, fonts and more. There are three main ways to apply CSS - inline, internal, and external stylesheets. CSS selectors like tags, IDs, and classes are used to target elements for styling. Common CSS properties include color, background, font, width, height and more.

Uploaded by

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

Introduction to CSS | CSS Tutorial for

Beginners
What is CSS?

CSS stands for Cascading Style Sheets. It is the language for describing the
presentation of Web pages, including colours, layout, and fonts, thus making our web
pages presentable to the users.

CSS is designed to make style sheets for the web. It is independent of HTML and can
be used with any XML-based markup language. Now let’s try to break the acronym:

● Cascading: Falling of Styles


● Style: Adding designs/Styling our HTML tags
● Sheets: Writing our style in different documents

CSS History

● 1994: First Proposed by Hakon Wium Lie on 10th October


● 1996: CSS was published on 17th November with influencer Bert Bos
● Later he became co-author of CSS
● 1996: CSS became official with CSS was published in December
● 1997: Created CSS level 2 on 4th November
● 1998: Published on 12th May

CSS Editors

Some of the popular editors that are best suited to wire CSS code are as following:

1. Atom
2. Visual Studio Code
3. Brackets
4. Espresso(For Mac OS User)
5. Notepad++(Great for HTML & CSS)
6. Komodo Edit (Simple)
7. Sublime Text (Best Editor)

CSS Syntax

Selector {
Property 1 : value;
Property 2 : value;
Property 3 : value;
}
For example:
h1
{
Color: red;
Text-align: center;

}
#unique
{
color: green;
}

● Selector: selects the element you want to target


● Always remains the same whether we apply internal or external styling
● There are few basic selectors like tags, id’s, and classes
● All forms this key-value pair
● Keys: properties(attributes) like color, font-size, background, width, height,etc
● Value: values associated with these properties

CSS Comment

● Comments don’t render on the browser


● Helps to understand our code better and makes it readable.
● Helps to debug our code
● Two ways to comment:
● Single line
/*<h6> This represents the most/ least important line of the doc.
</h6>*/

Here is how to comment out multiple lines:

/*
h1
{
color: red;
text-align: center;
}

*/

CSS How-To

● There are 3 ways to write CSS in our HTML file.


● Inline CSS
● Internal CSS
● External CSS
● Priority order
● Inline > Internal > External

Inline CSS

● Before CSS this was the only way to apply styles


● Not an efficient way to write as it has a lot of redundancy
● Self-contained
● Uniquely applied on each element
● The idea of separation of concerns was lost
● Example:

<h3 style=” color:red”> Have a great day </h3>

<p style =” color: green”> I did this , I did that </p>


Internal CSS

● With the help of style tag, we can apply styles within the HTML file
● Redundancy is removed
● But the idea of separation of concerns still lost
● Uniquely applied on a single document
● Example:

< style>
h1{
color:red;
}
</style>

<h3> Have a great day </h3>

External CSS

● With the help of <link> tag in the head tag, we can apply styles
● Reference is added
● File saved with .css extension
● Redundancy is removed
● The idea of separation of concerns is maintained
● Uniquely applied to each document
● Example:

<head>
<link rel="stylesheet" type="text/css" href="name of the Css file">
</head>
h1{
color:red; //.css file

Implementation of all the three types of CSS:

<!DOCTYPE html>
<html>
<head>
<title>HTML</title>
<link rel="stylesheet" type="text/css" href="first.css">
<style>
h1
{
color:green;
}
</style>
</head>
<body>

<h1>This heading will be green</h1>


<p style="color:Red">This paragraph will be red</p>
<p id="center">This paragraph will be pink and center-aligned</p>

</body>
</html>

This is Css file

#center {
text-align: center;
color:pink;
}

Output:

CSS Selectors

● The selector is used to target elements and apply CSS


● Three simple selectors
● Element Selector
● Id Selector
● Class Selector
● Priority of Selectors

Id > Class>Element
Element Selector

● Used to select HTML elements by its name


● How we do it

h1
{
Color: red;

We selected the heading tag and then changed the color property i.e text color to red.
Now whatever is written in this tag (content) will have the text color as red.

ID Selector

● The id attribute is used to select HTML element


● Used to target specific or unique element
● How we do it

#unique
{
Color: red;
}

<h1 id=”unique”> Hi </p>

We selected the id and then changed the color property i.e text color to red. Now
whatever is written in this tag (content) will have the text color as red

Class Selector

● The class attribute is used to select HTML element


● Used to target a specific class of the element
● How we do it

group
{
Color: red;
}
<h1 class=”group”> Hi </p>

We selected the class and then changed the color property i.e text color to red. Now
whatever is written in this tag (content) will have the text color as red

Implementation of all the three selectors in CSS:

<!DOCTYPE html>
<html>
<head>
<title>HTML</title>
<link rel="stylesheet" type="text/css" href="first.css">
<style>

#center1 {
text-align: center;
color:pink;
}

.center2 {
text-align: center;
color:red;
}

h1
{
text-align:center;
color:green;
}

</style>
</head>
<body>

<h1>This heading will be green and center-aligned </h1>


<p class = "center2">This paragraph will be red and center-aligned
</p>
<p id ="center1">This paragraph will be pink and center-aligned</p>

</body>
</html>
Output:

Now that we have seen all the three selectors now let’s see how style falls or cascades.
We will implement one program where we add style on the same element by using a
tag, id’s, and classes as selectors. The objective of this is to show how one style cuts
the other style that might also be referred to as Priority. We will see that id have the
highest priority over tags and classes.

Now let’s see its implementation:

<!DOCTYPE html>
<html>
<head>
<title>HTML</title>
<style>

p{
color:red;
}
.class {
color:green;
}
#id{
color:orange;
}

</style>
</head>
<body>

<p id="id" class="class"> This is CSS </p>

</body>
</html>

If you have observed how one style is fighting against another in order to style the
element. Here the race was won by id, what if all the selectors are classes or tags then
the one which is closer or applied at the end will win the race and what if a class and tag
selectors are used on the same element, in that case, the race will be won by the class
selector.

CSS Colors

● There are different colouring schemes in CSS


● Three widely used techniques are as follows
● RGB
● This starts with RGB and takes 3 parameter
● 3 parameter basically corresponds to red, green and
blue
● The value of each parameter may vary from 0 to 255.
● Eg: RGB(255,0,0); means color red
● HEX
● Hex code starts with # and comprises of 6 numbers
which are further divided into 3 sets
● Sets basically correspond to Red, Green, and Blue
● Single set value can vary from 00 to 09 and AA to FF
● Eg: #ff0000 ; means color red
● RGBA
● This starts with RGB and takes 4 parameter
● 4 parameter basically corresponds to red, green, blue
and alpha
● Value of the first three parameters may vary from 0 to
255 and the last parameter ranges from 0 to 1 that is
from 0.1, 0.2,…..0.9
● Eg: RGB(255,0,0,0); means color red

Implementation of different types of colours in CSS:

<!DOCTYPE html>
<html>
<head>
<title>HTML</title>
<link rel="stylesheet" type="text/css" href="first.css">
<style>
#center{ color:#ff0099;}
h1{ color:rgba(255,0,0,0.5);}
</style>
</head>
<body>
<h1>This heading will be green</h1>
<p style="color:rgb(255,0,0)">This paragraph will be red</p>
<p id="center">This paragraph will be pink and
center-aligned</p>

</body>
</html>

This is the output of the above program showing different shades of


red.

CSS Background

● There are different ways by which CSS can have an effect on HTML elements
● Few of them are as follows:
● Color – used to set the color of the background
● Repeat – used to determine if the image has to repeat or not and if
it is repeating then how it should do that
● Image – used to set an image as the background
● Position – used to determine the position of the image
● Attachment – It basically helps in controlling the mechanism of
scrolling

Implementation of Background Property in CSS:

<!DOCTYPE html>
<html>
<head>
<title>HTML</title>
<link rel="stylesheet" type="text/css" href="first.css">
<style>

html{
background: #ff9900;
}

p{
background:
url("https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcRT8t-o6o
UJ-E9YRhimOvTU2TSH7vlBnRWBN554_rX30dZah466&usqp=CAU");

background-position:center;
background-repeat:no-repeat;

width: 100%;
height: 600px;
}
</style>
</head>
<body>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod
tempor incididunt ut labore et dolore magna aliqua. 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
provident, sunt in culpa qui officia deserunt mollit anim id est
laborum.
</p>
</body>
</html>

CSS Border

● Helps in setting up the border for HTML elements


● There are 4 properties that can help in setting up of border:
● Width – sets the width of the border
● Style – sets the style of border; Eg: solid, dashed etc.
● Color – sets the color of the border
● Radius – determines the roundness of the border
● You can set the border for specifically top, right, bottom and left
● We can also club top and bottom together and same goes for left and right
● Eg: border-width: 2px 5px; sets top and bottom 2px; left and right
5px
● Border can also be set in a single line
● Eg: border : 2px solid blue;

Implementation of Border Property in CSS:

<!DOCTYPE html>
<html>
<head>
<title>HTML</title>
<link rel="stylesheet" type="text/css" href="first.css">
<style>

p{
border-style: solid;
border-color: blue;
border-width: 2px 5px;
border-radius: 10%;
}

</style>
</head>
<body>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do


eiusmod
tempor incididunt ut labore et dolore magna aliqua. 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.
</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod
tempor incididunt ut labore et dolore magna aliqua. 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.
</p>

</body>
</html>

CSS BoxModel

● Every element in CSS can be represented using the BOX model


● It allows us to add a border and define space between the content
● It helps the developer to develop and manipulate the elements
● It consists of 4 edges
● Content edge – It comprises of the actual content
● Padding edge – It lies in between content and border edge
● Border edge – Padding is followed by the border edge
● Margin edge – It is an outside border and controls the margin of the
element

When you go in chrome and right-click, go on inspect. It will give all the elements that
are used in the HTML file. In the right-hand side, there will be a box model like:

The most inner rectangle represents our content, the padding is nothing but the space
between the content and the border then the margin is the area outside the border.

Implementation of BoxModel in CSS:


<!DOCTYPE html>
<html>
<head>
<title>HTML</title>
<link rel="stylesheet" type="text/css" href="first.css">
<style>

p{
border: 2px solid blue;
margin: 5px;
padding: 20px;
content: 50px;
}

</style>
</head>
<body>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do


eiusmod
tempor incididunt ut labore et dolore magna aliqua. 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.
</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod
tempor incididunt ut labore et dolore magna aliqua. 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.
</p>
</body>
</html>

This is the output of the above program:

You might also like