What Is CSS?
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.
Three Types of CSS
CSS comes in three types:
• In a separate file (external)
• At the top of a web page document (internal)
• Right next to the text it decorates (inline)
External style sheets are separate files full of CSS instructions
(with the file extension .css). When any web page includes an external
style sheet, its look and feel will be controlled by this CSS file.
This is how you change a whole website at once. And that's perfect if
you want to keep up with the latest fashion in web pages without
rewriting every page!
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
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:
This is the next best thing to external.
Example:
<head> <br />
<style type="text/css">
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
A CSS rule-set consists of a selector and a declaration block:
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.
The element Selector
The element selector selects elements based on the element name.
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 id selector uses the id attribute of an HTML element to select a
specific element.
The id of an element should be 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.
The style rule below will be applied to the HTML element with
id="para1":
Example
#para1 {
text-align: center;
color: red;
}
The class Selector
The class selector selects elements with a specific class attribute.
To select elements with a specific class, write a period (.)
character, followed by the name of the class.
In the example below, all HTML elements with class="center" will be
red and center-aligned:
Example
.center {
text-align: center;
color: red;
}
You can also specify that only specific HTML elements should be
affected by a class.
In the example below, only <p> elements with class="center" will be
center-aligned:
Example
p.center {
text-align: center;
color: red;
}
HTML elements can also refer to more than one class.
In the example below, the <p> element will be styled according to
class="center" and to class="large":
Example
<p class="center large">This paragraph refers to two classes.</p>
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;
}
It will be better to group the selectors, to minimize the code.
To group selectors, separate each selector with a comma.
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:
• a color name - like "red"
• a HEX value - like "#ff0000"
• an RGB value - like "rgb(255,0,0)“
body {
color: blue;
}
h1 {
color: green;
}
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.
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;
}
When the text-align property is set to "justify", each line is
stretched so that every line has equal width, and the left and right
margins are straight (like in magazines and newspapers):
Example
div {
text-align: justify;
}
Text Decoration
The text-decoration property is used to set or remove decorations from
text.
The value text-decoration: none; is often used to remove underlines
from links:
Example
a {
text-decoration: none;
}
The other text-decoration values are used to decorate text:
h1 {
text-decoration: overline;
}
h2 {
text-decoration: line-through;
}
h3 {
text-decoration: underline;
}
Text Transformation
The text-transform property is used to specify uppercase and lowercase
letters in a text.
It can be used to turn everything into uppercase or lowercase letters,
or capitalize the first letter of each word:
Example
p.uppercase {
text-transform: uppercase;
}
p.lowercase {
text-transform: lowercase;
}
p.capitalize {
text-transform: capitalize;
}
Text Indentation
The text-indent property is used to specify the indentation of the
first line of a text:
Example
p {
text-indent: 50px;
}
Text Direction
The direction property is used to change the text direction of an
element:
Example
p {
direction: rtl;
}
Text Shadow
The text-shadow property adds shadow to text.
The following example specifies the position of the horizontal shadow
(3px), the position of the vertical shadow (2px) and the color of the
shadow (red):
Example
h1 {
text-shadow: 3px 2px red;
}
The <div> Element
The <div> element is often used as a container for other HTML
elements. (Defines a section in a document (block-level))
The <span> Element
The <span> element is often used as a container for some text.
(Defines a section in a document (inline))
When used together with CSS, the <div> element can be used to style
blocks of content:
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>
Page layout with CSS:
The CSS border properties allow you to specify the style, width, and
color of an element's border.
Border Style
The border-style property specifies what kind of border to display.
The following values are allowed:
• dotted - Defines a dotted border
• dashed - Defines a dashed border
• solid - Defines a solid border
• double - Defines a double border
• groove - Defines a 3D grooved border. The effect depends on the
border-color value
• ridge - Defines a 3D ridged border. The effect depends on the
border-color value
• inset - Defines a 3D inset border. The effect depends on the
border-color value
• outset - Defines a 3D outset border. The effect depends on the
border-color value
• none - Defines no border
• hidden - Defines a hidden border
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 - Shorthand Property
To shorten the code, it is also possible to specify all the individual
border properties in one property.
The border property is a shorthand property for the following
individual border properties:
• 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).
Margin - Individual Sides
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
The CSS padding properties are used to generate space around an
element's content, inside of any defined borders.
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
The position property specifies the type of positioning method used
for an element (static, relative, fixed, absolute or sticky).
The position Property
The position property specifies the type of positioning method used
for an element.
There are five different position values:
• static
• relative
• fixed
• absolute
position: static;
HTML elements are positioned static by default.
Static positioned elements are not affected by the top, bottom, left,
and right properties.
An element with position: static; is not positioned in any special
way; it is always positioned according to the normal flow of the page
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
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.
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.
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 CSS float property specifies how an element should float.
The float Property
The float property is used for positioning and layout on web pages.
The float property can have one of the following values:
• left - The element floats to the left of its container
• right- The element floats to the right of its container
• none - The element does not float (will be displayed just where
it occurs in the text). This is default
<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>
