Scribd
Upload
130 views19 pages

CSS Notes

CSS (Cascading Style Sheets) is a language for styling and formatting web pages. CSS describes how HTML elements should be displayed on screen, paper, or in other media. CSS saves time and improves accessibility by allowing you to change the styling of an entire website by editing one CSS file. CSS rules consist of selectors that specify the elements to be styled and a declaration block that contains the styling declarations. Common CSS properties include text styling, colors, spacing, and layout. CSS can be applied via internal, external, and inline styles.

Uploaded by

Fatima Fayha
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
130 views19 pages

CSS Notes

CSS (Cascading Style Sheets) is a language for styling and formatting web pages. CSS describes how HTML elements should be displayed on screen, paper, or in other media. CSS saves time and improves accessibility by allowing you to change the styling of an entire website by editing one CSS file. CSS rules consist of selectors that specify the elements to be styled and a declaration block that contains the styling declarations. Common CSS properties include text styling, colors, spacing, and layout. CSS can be applied via internal, external, and inline styles.

Uploaded by

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

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>

You might also like