Scribd
Upload
13 views

CSS notes (1)

Uploaded by

Vignana Deepthi
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
13 views

CSS notes (1)

Uploaded by

Vignana Deepthi
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 13

CSS Position:

The CSS position property is used to set position for an element, it is also used to place an
element behind another and also useful for scripted animation effect.
We can position an element using the top, bottom, left and right properties. These properties can
be used only after position property is set first. A position elements computed position property s
relative, absolute, fixed or sticky.
CSS Positing properties:
Position:static:
HTML elements are positioned static by default. Static positioned elements are not affected by
the top, bottom, left, and right properties. This property it is always positioned according to the normal
flow of the page:
Eg.,
div.static {
position: static;
border: 3px solid #73AD21;
}
position: relative
An element with position: relative; is positioned relative to its normal position. Setting the top,
right, bottom, and left properties of a relatively-positioned element will cause it to be adjusted away
from its normal position.
Example
div.relative {
position: relative;
left: 30px;
border: 3px solid #73AD21;
}
position: fixed;
An element with position: fixed; is positioned relative to the viewport, which means it always
stays in the same place even if the page is scrolled. The top, right, bottom, and left properties are used to
position the element.
Example
div.fixed {
position: fixed;
bottom: 0;
right: 0;
width: 300px;
border: 3px solid #73AD21;
}
For the above fixed element in the lower-right corner of the page.
position: absolute;
An element with position: absolute; is positioned relative to the nearest positioned ancestor (instead of
positioned relative to the viewport, like fixed). However; if an absolute positioned element has no
positioned ancestors, it uses the document body, and moves along with page scrolling.

1
Example
div.absolute {
position: absolute;
top: 80px;
right: 0;
width: 200px;
height: 100px;
border: 3px solid #73AD21;
}
position: sticky;
An element with position: sticky; is positioned based on the user's scroll position. A sticky element
toggles between relative and fixed, depending on the scroll position.
Example
div.sticky {
position: sticky;
top: 0;
background-color: green;
border: 2px solid #4CAF50;
}

CSS Overflow:
The css over flow property specifies how to handle the content when it overflows it block level
container.
In a webpage every single element is a rectangular box and the size, positioning and behavior of
these boxes are controlled via CSS.

C
SS Overflow Example :

2
<!DOCTYPE html>
<html>
<head>
<style>
div.scroll {
background-color: yellow
width:100px;
height:100px;
overflow: scroll;
div.hidden {
background-color: cyan
width:100px;
height: 170px;
overflow: hidden;
</style>
</head>
<body>
<p> The overflow property specifies what to do if the content of an element exceeds is the size of the
element's box.</p> SONO DA overflow:scroll</p>
<div class="scroll"> You can use the overflow property when you want to have better control of the
layout. The default value is visible. </div>
<p>overflow:hidden</p>
<div class="hidden"> You can use the overflow property when you want to have better control of the
layout. The default value is visible. </div> </body>
</html>

CSS Float :
The CSS float property is a positioning property. It is used to push an element to the left or right,
allowing other element to wrap around it. It is generally used with images and layouts.

3
Elements are floated only horizontally. So it is possible only to float elements left or right, not up or
down.
1. A floated element may be moved as far to the left or the right as possible.
2. The elements after the floating element will flow around it.
3. The elements before the floating element will not be affected.
4. If the image floated to the right, the texts flow around it to the left and if the image floated to the left,
the text flows around it to the right.
Syntax:
float: none/left/right/initial/inherit;
Property values:
none: This is the default value & the element does not float.
left: Element floats on the left side of the container.
right: Element floats on the right side of the container.
initial Element will be set to its default value.
inherit: Element inherits floating property of its parent property.
<!DOCTYPE html>
<html>
<head>
<style>
img {
float: right;
}
</style>
</head>
<body>
<p> The following paragraph contains an image with style yol <b> float:right</b>. The result is that the
image will float to the right in the paragraph. </p>
<img src="good-morning.jpg" alt="Good Morning Friends"/>
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
</p>
</body>
</html>

CSS combinators:
CSS combinators clarifies the relationship between two selectors, whereas the selectors in CSS
are used to select the content for styling.
The can be more than one simple selector in CSS selector, and between these selectors, we can
include a combinator. Combinators combine the selectors to provide them a useful relationship and the
position of content in the document. There are four types of combinators
1. Descendant selector (space)
2. Child selector (>)
3. Adjacent sibling selector (+)

4
4. General sibling selector (~)
1. Descendant Selector(space):
The descendant selector matches all elements that are descendants of a specified element.
2. Child Selector (>) :
The child selector selects all elements that are the children of a specified element. The following
example selects all <p> elements that are children of a <div> elements: Example:
3. Adjacent Sibling Selector (+) :
The adjacent sibling selector is used to select an element that is directly after another specific
element. Sibling elements must have the same parent elements, and "adjacent" means "immediately
following".
4.General Sibling Selector (~) :
The general sibling selector selects all elements that are next siblings of a specified element. The
following example selects all <p> elements that are next siblings of <div> elements:
<!DOCTYPE html>
<html>
<head>
<title>General Sibling Selector</title>
<style>
body{
text-align: center;
}
h1 ~p{
color: blue;
font-size: 25px;
font-weight: bold;
text-align: center;
background-color:grey;
}
div {
font-size: 32px;
}
</style>
</head>
<body>
<h1>General sibling selector (~) property</h1>
<p>It is the first paragraph element which will get effected.</p>
<div> It is the div element
<p> It is the paragraph under the div element </p>
</div>
<p>It is the paragraph element after the div</p>
<p>It is the paragraph element which will also get affected</p>
</body>
</html>

5
CSS pseudo- class:
A Pseudo class in CSS is used to define the special state of an element. It can be combined with a
CSS selector to add an effect to existing elements based on their states. For Example, changing the style
of an element when the user hovers over it, or when a link is visited. All of these can be done using
Pseudo Classes in CSS.
Syntax:
Selector:Pseudo-class {
property:value;
}

There are various CSS pseudo-classes. The widely used CSS classes are tabulated as follows:

<!DOCTYPE html>
<html>
<head>
<title>CSS transition-property property</title>
<style>
h1{
font-family:Comic Sans MS;
text-align:center;
}
.box{
background-color: red;
width: 300px;
height: 200px;
margin: auto;
font-size: 40px;
text-align: center;
6
}
.box:hover{
background-color: yellow;
}

input:focus {
background-color: grey;
}
</style>
</head>
<body>
<h1>Pseudo Class</h1>
<form>
First name: <input type="text" name="firstname"><br>
Last name: <input type="text" name="lastname">
</form>
<div class="box">
My color changes if you hover over me!
</div>
</body>
</html>

CSS pseudo elements:


Pseudo class in CSS is used to style the element where as pseudo elements are used to style the
specific part of an element. For example, a pseudo element can be used to style the first letter or the
first line of an element. The pseudo elements can also be used to insert the content after or before an
element.
Syntax
selector::pseudo-element {
property: value;
}
CSS Pseudo-elements:

<html>
<head>

7
<style type = "text/css">
p::first-letter { font-size: 35px; color:red;}
h1:first-line { text-decoration: underline; color:blue;}
h2::before{content: '"';
color: red;
font-size: 30px;
}
h2::after{
content: '*';
color: red;
font-size: 30px;
}
</style>
</head>
<body>
<p>First Paragraph with first-letter element </p>
<h1>This is heading with first line pseudo element</h1>
<p>Second Paragraph with first-letter element</p>
<h2>Heading with Before and after pseudo elements</h2>
</body>
</html>

CSS Opacity or Transparency:


CSS opacity is a property that allows you to control the transparency of an element. It can be used to
make an element semi-transparent or fully transparent. Its value is in between 0 and 1, where 0 is fully
transparent and 1 is fully opaque.
For example, to make an element, with the class "my-element" to be semi-transparent set the
opacity value as below in CSS code:
.my-element {
opacity: 0.5;
}
Program:
<html>
<head>
<style>
.trans {
opacity: 0.5;
}
</style>
</head>
<body>
<p>Normal Image</p>
<img src= "rose.png" alt="normal rose">

8
<p>Transparent Image</p>
<img class="trans" src="rose.png" alt="transparent rose"> </body>
</html>

CSS tooltips:
CSS tooltips are small, interactive labels that display extra information about something when the
user moves the mouse cursor over an element.
<!DOCTYPE html>
<html>
<style>
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: red;
color: #003890;
text-align: center;
border-radius: 6px;
padding: 10px 0;
position: absolute;
z-index: 50;
}
.tooltip:hover .tooltiptext {
visibility: visible;
}
</style>
<body style="text-align:center;">
<p>Move the mouse over the text below:</p>
<div class="tooltip">Web Interface Designing Technologies
<span class="tooltiptext">This is tooltip text</span>
</div>
</body>
</html>

CSS image gallery:


CSS can be used to create an image gallery with an image gallery you can combine images with
easy navigation.
<html>
<head>

9
<style>
body {
width:100%; <body>
margin:auto; <div class = "gallery">
} <div class = "box">
.gallery { <div class = "image">
width:100%; <img src ="rose.png" width = "300"
display:flex; height = "200">
} </div>
.box { </div>
flex-basis:20%; <div class = "box">
width:100%; <img src ="h5.png" width = "300" height
padding:30px; = "200">
margin:8px; </div>
box-shadow: 5px 5px green; <div class = "box">
} <div class = "image">
.image:hover { <img src ="wordpress.png" width =
border: 3px solid green; "300" height = "200">
} </div>
</style> </div>
</head> </body>
</html>
Forms in CSS:
CSS form is used to create interactive forms for users and provides many ways to set the style.
There are many CSS properties available that can be used to create and style HTML forms to make
them more interactive. A few of these are mentioned below:
Styling Input Fields:
Width :
By using width property we can set the width of the input field:
Example:
input { width: 100%; } .
The example above applies to all <input> elements If you only want to style a specific input type, we
can use attribute selectors:
input [type=text] - will only select text fields
input[type=password] - will only select password fields
input [type=number] - will only select number fields
1. Padded Inputs:
By using padding property we can add space inside the text field.
Example:
input[type=text]{width: 100%; padding: 12px 20px; margin: 8px 0; box-sizing: border-box; }
2. Bordered Inputs:
By using border properties we can change the border size, color and we can change border
radius property to add rounded corners :

10
Example:
input[type=text] {border: 2px solid red;border-radius: 4px;}
3. Colored Inputs:
Use the background-color property to add a background color to the input, and the color property
to change the text color:
Example:
input[type=text] {background-color: blue;color: white;}
4. Focused Inputs:
By default, some browsers will add a blue outline around the input when it gets focus (clicked
on).
Use focus selector to highlight or to do something with the input field when it gets focus:
Example:
input[type=text]:focus {background-color: lightblue;}
Example:
input[type=text]:focus {border: 3px solid #555;}
5.Input with Icon/Image:
To place the icon inside the input, use the background - image property and position it with the
background-position property. Also add a large left padding to reserve the space of the icon:
Example:
input[type=text] {
background-color: white;
background-image: url('searchicon.png');
background-position: 10px 10px;
background-repeat: no-repeat;
padding-left: 40px;
}
6. Animated Search Input :
In this example we use the CSS transition property to animate the width of the search input when it gets
focus.
Example:
input[type=text] {transition: width 0.4s ease-in-out;}
input[type=text]: focus {width: 100%;}
7. Styling Input Buttons :
Like most elements, buttons have default styles. Use the background_color property to change the
background color of a button.
Example:
input[type=button], input[type-submit], input[type=reset] {
background-color: red; border: none; color: white; padding: 16px 32px; margin: 4px 2px; cursor:
pointer;
}
Program:
<!DOCTYPE html>
<html>

11
<head>
<title>CSS Forms</title>
<style>
input[type=text] {
width: 15%;
padding: 12px 20px 12px 40px;
margin-top: 12px;
box-sizing: border-box;
border: 4px solid #025ea1;
border-radius: 10px;
background-color:#DAD7D7;
color:red;
transition: width 5s ease-in-out;
}
input[type=text]:focus{width:100%;}
input[type=submit], input[type=reset]
{ background-color: red; border: none; color: white; padding: 16px 32px; margin: 4px 2px;
cursor: progress;
}
</style>
</head>
<body>
<form>
<label for="fname">First Name</label>
<input type="text" id="fname" name="fname"><br>
<label for="lname">Last Name</label>
<input type="text" id="lname" name="lname"><br>
<input type="submit" value="Submit">
<input type="reset" value="Reset">
</form>
</body>
</html>

CSS Counters:
CSS counters are a feature in CSS that allows for numbering elements on a web page. CSS
counters is used to increment(increase) a counter value, and then displaying that value. They can be
used to number items in a list, or to create other types of numbered content.
CSS Counter Properties :
i. counter-reset: It is used to create or reset a counter.
ii. counter-increment: It is used to increment the counter value.
iii. content: It is used to insert generated content.
iv. counter() or counters() function: It is used to add the value of a counter to an element.
Example:

12
<!DOCTYPE html>
<html>
<head>
<style>
body {
counter-reset: section;
}
h2::before {
counter-increment: section;
content: "Section " counter(section) ": ";
}
</style>
</head>
<body>
<h1>Using CSS Counters:</h1>
<h2>HTML </h2>
<h2>CSS </h2>
<h2>JavaScript </h2>
</body>
</html>

CSS Responsive:
Responsive Web Design is about using HTML and CSS to automatically resize, hide, shrink, or
enlarge, a website, to make it look good on all devices (desktops, tablets, and phones).
The Website should adjust properly in all the devices as per the shape and size of the devices. A
responsive website will look good and attractive in all the devices and none of the links, images, fonts
etc should break while the website is seen from any devices.
It is difficult to make a responsive design by only HTML. It is better to combine with CSS floats,
CSS media queries, CSS Flexbox, CSS grids or CSS framework like bootstrap.

13

You might also like