CSS Notes
CSS Notes
CSS Notes
Most web pages are made from HTML, or hypertext markup language. This
is the standard way to decorate plain web text with fonts, colors,
graphic doodads, and hyperlinks (clickable text that magically
transports the user somewhere else). But websites can get really big.
When that happens, HTML is a very hard way to do a very easy thing.
CSS (cascading style sheets) can make decorating web sites easy again!
Think of CSS as a kind of computer dress code. CSS mainly does just
one thing: it describes how web pages should look. Even better, CSS
can be easily separated from HTML, so that the dress code is easy to
find, easy to modify, and can rapidly change the entire look of your
web site.
Like a dress code at school, you can change your CSS and the look of
your students will change with it. Style sheets allow you to rapidly
alter entire websites as you please, just like a fashion craze allows
people to change with the times yet remain the same people.
A really neat thing about CSS, is that it cascades. Each style you
define adds to the overall theme, yet you can make the most recent
style override earlier styles. For example, with CSS we can start by
saying we want all of our text 12px (12 units) high. Later we can say
we want it to be red, too. Still later, we can tell it we want one
phrase to be in bold or italics, or blue rather than red.
Internal style sheet may be used if one single page has a unique
style.
Internal styles are defined within the <style> element, inside the
<head> section of an HTML page:
h1 {color:blue;}
h2 {color:red;}
p {color:green;}
</style><br />
</head>
Inline styles are styles that are written directly in the tag in the
HTML document. Inline styles affect only the specific tag they are
applied to.
<h1 style="color:blue;margin-left:30px;">This is a heading</h1>
CSS Syntax
Example
p {
color: red;
text-align: center;
}
CSS Selectors
CSS selectors are used to "find" (or select) HTML elements based on
their element name, id, class, attribute, and more.
You can select all <p> elements on a page like this (in this case, all
<p> elements will be center-aligned, with a red text color):
Example
p {
text-align: center;
color: red;
}
The id Selector
The style rule below will be applied to the HTML element with
id="para1":
Example
#para1 {
text-align: center;
color: red;
}
Example
.center {
text-align: center;
color: red;
}
You can also specify that only specific HTML elements should be
affected by a class.
p.center {
text-align: center;
color: red;
}
Example
Grouping Selectors
If you have elements with the same style definitions, like this:
h1 {
text-align: center;
color: red;
}
h2 {
text-align: center;
color: red;
}
p {
text-align: center;
color: red;
}
In the example below we have grouped the selectors from the code
above:
Example
h1, h2, p {
text-align: center;
color: red;
}
CSS Text Styles:
Text Color
• The color property is used to set the color of the text. The
color is specified by:
body {
color: blue;
}
h1 {
color: green;
}
Text Alignment
The following example shows center aligned, and left and right aligned
text (left alignment is default if text direction is left-to-right,
and right alignment is default if text direction is right-to-left):
Example
h1 {
text-align: center;
}
h2 {
text-align: left;
}
h3 {
text-align: right;
}
div {
text-align: justify;
}
Text Decoration
Example
a {
text-decoration: none;
}
h1 {
text-decoration: overline;
}
h2 {
text-decoration: line-through;
}
h3 {
text-decoration: underline;
}
Text Transformation
Example
p.uppercase {
text-transform: uppercase;
}
p.lowercase {
text-transform: lowercase;
}
p.capitalize {
text-transform: capitalize;
}
Text Indentation
Example
p {
text-indent: 50px;
}
Text Direction
Example
p {
direction: rtl;
}
Text Shadow
Example
h1 {
text-shadow: 3px 2px red;
}
Example
<html>
<head>
<title>Webpage With Style</title>
<style type="text/css">
.red {
color:red;
}
.large {
font-size: 200%;
}
#green {
color:green;
}
.underlined {
text-decoration: underline;
}
#first-section {
color:blue;
background-color: pink;
width:50%;
}
#second-section {
background-color: yellow;
}
</style>
</head>
<body>
<div id="first-section">
<p>The quick brown fox jumped over the lazy dog.</p>
<p>Wow, I love internal CSS!</p>
</div>
<div id="second-section">
<p id="green">This is some more text. <span class="underlined">And
this text is underlined.</span></p>
<h1 class="red">CSS is cool!</h1>
</div>
</body>
</html>
The CSS border properties allow you to specify the style, width, and
color of an element's border.
Border Style
The border-style property can have from one to four values (for the
top border, right border, bottom border, and the left border).
Example:
<!DOCTYPE html>
<html>
<head>
<style>
.one {
border-style: solid;
border-width: 5px;
border-color: red;
}
.two {
border-style: solid;
border-width: medium;
}
.three {
border-style: dotted;
border-width: 2px;
}
.four {
border-style: dotted;
border-width: thick;
}
.five {
border-style: double;
border-width: 15px;
}
.six {
border-style: double;
border-width: thick;
}
.seven {
border-style: solid;
border-width: 2px 10px 4px 20px;
}
</style>
</head>
<body>
<h2>The border-width Property</h2>
<p>This property specifies the width of the four borders:</p>
<p class="one">Some text.</p>
<p class="two">Some text.</p>
<p class="three">Some text.</p>
<p class="four">Some text.</p>
<p class="five">Some text.</p>
<p class="six">Some text.</p>
<p class="seven">Some text.</p>
<p><b>Note:</b> The "border-width" property does not work if it is
used alone.
Always specify the "border-style" property to set the borders
first.</p>
</body>
</html>
• border-width
• border-style (required)
• border-color
Example
p {
border: 5px solid red;
}
Margins
The CSS margin properties are used to create space around elements,
outside of any defined borders.
With CSS, you have full control over the margins. There are properties
for setting the margin for each side of an element (top, right,
bottom, and left).
CSS has properties for specifying the margin for each side of an
element:
• margin-top
• margin-right
• margin-bottom
• margin-left
Example
div {
margin-top: 100px;
margin-bottom: 100px;
margin-right: 150px;
margin-left: 80px;
}
Or
div {
margin: 25px 50px 75px 100px;
}
Program:
<html
>
<head>
<style>
#first {
border: 1px solid black;
margin-top: 100px;
margin-bottom: 100px;
margin-right: 150px;
margin-left: 8px;
background-color: lightblue;
}
</style>
</head>
<body>
<div id="first">
<h2>Using individual margin properties</h2>
<p>This div element has a top margin of 100px, a right margin of
150px, a bottom margin of 100px, and a left margin of
80px.</p></div>
</body>
</html>
Padding
With CSS, you have full control over the padding. There are properties
for setting the padding for each side of an element (top, right,
bottom, and left).
CSS has properties for specifying the padding for each side of an
element:
• padding-top
• padding-right
• padding-bottom
• padding-left
Example
div {
padding-top: 50px;
padding-right: 30px;
padding-bottom: 50px;
padding-left: 80px;
}
Or
div {
padding: 25px 50px 75px 100px;
}
Program:
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 1px solid black;
background-color: lightblue;
padding-top: 50px;
padding-right: 30px;
padding-bottom: 50px;
padding-left: 80px;
}
</style>
</head>
<body>
<h2>Using individual padding properties</h2>
<div>This div element has a top padding of 50px, a right padding of
30px, a bottom padding of 50px, and a left padding of 80px.</div>
</body>
</html>
Position
• static
• relative
• fixed
• absolute
position: static;
Static positioned elements are not affected by the top, bottom, left,
and right properties.
position: relative;
position: fixed;
position: absolute;
Program:
<!DOCTYPE html>
<html>
<head>
<style>
.static {
position: static;
border: 3px solid #73AD21;
}
.relative {
position: relative;
left: 30px;
border: 3px solid #73AD21;
width: 400px;
height: 200px;
}
.absolute {
position: absolute;
top: 80px;
right: 0;
width: 200px;
height: 100px;
border: 3px solid #73AD21;
}
.fixed {
position: fixed;
bottom: 0;
right: 0;
width: 300px;
border: 3px solid #73AD21;
}
</style>
</head>
<body>
<h2>position: static;</h2>
<p>An element with position: static; is not positioned in any special
way; it is
always positioned according to the normal flow of the page:</p>
<div class="static">
This div element has position: static;
</div>
<h2>position: relative;</h2>
<p>An element with position: relative; is positioned relative to its
normal position:</p>
<div class="relative">
This div element has position: relative;
</div>
<!--<h2>position: absolute;</h2>
<p>An element with position: absolute; is positioned relative to the
nearest positioned ancestor (instead of positioned relative to the
viewport, like fixed):</p>
<div class="relative">This div element has position: relative;
<div class="absolute">This div element has position: absolute;</div>
</div>
<h2>position: fixed;</h2>
<p>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:</p>
<div class="fixed">
This div element has position: fixed;
</div>-->
</body>
</html>
Float
The float property is used for positioning and layout on web pages.
<html>
<head>
<style>
img {
float: left;
}
</style>
</head>
<body>
<p>In this example, the image will float to the right in the
paragraph, and the text in the paragraph will wrap around the
image.</p>
<p><img src="D:\Suneetha\2017-2018\II Sem\page layout\Winter.jpeg"
alt="Sunset" style="width:170px;height:170px;margin-left:15px;">Sunset
or sundown is the daily disappearance of the Sun below the horizon as
a result of Earth's rotation. The Sun will set exactly due west at the
equator on the spring and fall equinoxes, each of which occurs only
once a year.Subcategories of twilightThe time of sunset is defined in
astronomy as the moment when the trailing edge of the Sun's disk
disappears below the horizon. Near to the horizon, atmospheric
refraction causes the ray path of light from the Sun to be distorted
to such an extent that geometrically the Sun's disk is already about
one diameter below the horizon when a sunset is observed.
</p>
</body>
</html>