Scribd
Upload
11 views

note4

Uploaded by

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

note4

Uploaded by

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

Div and Span Tags:

-----------------------------------------
We can use div and span tags to group related tags into a single unit.
In general we can use these tags with CSS.
Ex:-
1) <div class="groupone">
2) <h1> Group One Content</h1>
3) <p>This division tag helpful to style a group of
4) html tags with css</p>
5) </div>

div means division


<span> tag is exactly same as division tag except that it is inline. i.e to define
group within the line
of text we can use <span> tag.
<p>This <span>division tag helpful</span> to style a group of html tags with
css</p>
<div> will work for group of lines where as <span> will work within the line.
Note: <div> and <span> tags are helpful only for styling html. Hence they will
always work with
css only.

CSS
--------------------
The main objective of CSS to add styles to HTML. CSS describes how HTML elements
are displayed
on a page.
Styling includes colors,fonts,size,borders etc
We can define CSS styling inside HTML. But it is highly recommended to define
styling inside a
seperate CSS file(.css extension) and link that file to HTML.
The power of CSS demo link:
https://www.w3schools.com/Css/css_intro.asp
Various ways to define Style for HTML Elements:
We can define style in 3 ways
1. In Line
2. By using style tag
3. By using css file

1. In Line:
---------------
<h1 style="color:red">This is My First Part of Data</h1>
define style at tag level is not recommended b'z it increases complexity as every
html page
contains 1000s of tags

2. By using style tag:


------------------------
<html >
<head>
...
<style type="text/css">
h1{
color:blue;
}
</style>
</head>
...
</html>
This way of defining style is not recommended because it is applicable only for
current page but
not for remaining pages.

3. By using css file:


-----------------------
style1.css
h1{
color:red;
}

<head>
<link rel="stylesheet" href="style1.css">
</head>
We can reuse same css file for every html page so that we can promote code
reusability. Hence
this approach is highly recommended to use.

Basic Structure of CSS File:


------------------------------
tagname{
property:value;
}
Eg:
h1{
color:red;
}

Once we defined css file, we can link it to html by using <link> tag inside <head>
part of html.
<head>
<link rel="stylesheet" href="form.css">
</head>

How to define comments in css file:


---------------------------------------
ex:-
/*
This is CSS comment
*/

Various possible ways to specify color:


------------------------------------------------

1. color:red;

2. color:rgb(244,66,220);
we have to collect values from google color picker
The allowed values are: 0 to 255
(0,0,0)--->black
(255,255,255)-->white

3. color:#f44e42
This 6-digit number represents hexa code of color

Setting Background and Borders:


----------------------------------------------
In CSS, we can set Background as follows:
body{
background-color:red;
}

We can set Border as follows:


----------------------------------
div{
border-color:blue;
border-width:thick;
border-style:double;
}
The allowed values for border-width are:
medium,thin,thick.

We can also set our own width with pixels.


Eg: border-width:10px;

The allowed values for border-style are:


dashed,dotted,groove,double etc.

color vs background:
-----------------------------
color attribute meant for text color
background attribute meant for background color
h1{
color:white;
background:blue;
}

How to Set Background Image:


---------------------------------------
body {
background:url(https://image.freepik.com/free-psd/abstract-background-
design_1297-73.jpg);
}

Various properties while setting image:


------------------------------------------------------
body{
color:white;
background:url(https://images.pexels.com/photos/257360/pexels-
photo257360.jpeg?auto=compress&cs=tinysrgb&h=350);
background-repeat: no-repeat;
background-size: cover;
}
By default background image will be repeated. If we don't want to repeat then we
should specify:
no-repeat.

How to set border


------------------------------
Normal way:

h1{
border-color: orange;
border-width: 5px;
border-style: solid;
}
short-cut way:

h1{
border: solid red 5px; order is not important
}

Basic CSS Selectors:


-------------------------------------
1. Element Selectors:
select all instances of given element. i.e style is applicable for every tag of the
specified type.
h1{
color:red;
}
This style applicable for every h1 tag of the html page.

2. ID Selectors:
Selects an element with the given Id. But with in the HTML Page ID is always
unique.
html:
<h1 id="specialh1">Hello This is First Line</h1>
css:
#specialh1{
color:white;
background: blue;
}

3. Class Selector:
Select all elements with the given class.
html:
<body>
<h1 class="specialh1">Hello This is First Line</h1>
<h1>Hello This is Second Line</h1>
<h1 class="specialh1">Hello This is Third Line</h1>
</body>

css:
1) specialh1{
2) color:white;
3) background: blue;
4) }
Note: element,id and class selectors are considered as basic css selectors.

Fonts and Text in CSS:


------------------------------------------
The following are very important properties related to fonts and text in css
1. font-family
2. font-size
3. font-weight
4. line-height
5. text-align
6. text-decoration

1. font-family:
We can select desired font from default css system fonts in the following link
https://www.cssfontstack.com/
Eg:
h1{
font-family: Arial Black;
}
Note: If we are not satisfied with default css system fonts, then we can use
external fonts also.

2. font-size:
p{
font-size: 20px;
}
We can also specify font-size in em units, which is also known as dynamic font-size
(relative fontsize)
Eg:
span{
font-size: 2.0em;
}

3. font-weight:
p{
font-weight: 600;
}

something like bold font,light font etc


The different allowed values are:
bold,bolder,lighter,normal
100 to 900 where 100 means light and 900 means too much bold.

4. line-height:
The space between 2 lines is called line height.
p{
line-height: 1.5;
}

5. text-align:

p{
text-align:center;
}
The allowed values are: left,rigth,center,justify

6. text-decoration:
like underlined,strike through
Eg:
p{
text-decoration: line-through;
}
The allowed values are: underline, overline, line-through

You might also like