Scribd
Upload
28 views

02 CSS

Web pdf

Uploaded by

Solomonic Eman
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
28 views

02 CSS

Web pdf

Uploaded by

Solomonic Eman
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/ 26

CSS

HTML has tags to define content of a document and there are some tags which are
designed for formatting like <font>. But using those tags and formatting the content of
web is very expensive process. To minimize such difficult task, CSS has solution, you
can define CSS once and used it many times whenever you want.

CSS (Cascading Style Sheets) is a style sheet language used for describing the
presentation of a document written in a markup language. It defines how to display
HTML elements. CSS is a style language that defines layout of HTML documents and
makes your page attractive.

CSS has lots of advantages on your web like, saves time, loads faster, easy to maintain,
platform independence, multi device compatibility and others.

CSS Syntax

A CSS comprises of style rules that are interpreted by the browser and then applied to the
corresponding elements in your document. A style rule is made of three parts namely
selector, property and value.

p
{
background-color: #B9B9B9;
border: dashed;
}
On this code, p is a selector. Background-color and border are properties and #B9B9B9
and dashed are values. Selector and property must separate with { and you have to close
this at the end. Property and value must separate with: And you have to put ; at the end of
each line (property : value;). Property has a value that will be interpreted by the browser
to be applied on the html in which the selector is called. In the above code the selector is
p, which is paragraph tag, means that in the html code every text which is enclosed by
<p> will have a background color and border.

1
The selector points to the HTML element you want to style. The declaration block
contains one or more declarations separated by semicolons. Each declaration includes a
property name and a value, separated by a colon.

Don't forget a CSS declaration always ends with a semicolon, and declaration groups
are surrounded by curly brackets.

Example
tag.
p {

color:red;

text-align:center;

In this case every text enclosed by <p> will have red font color and it will align to center.

CSS Comments

Comments are used to explain your code, and may help you when you edit the source
code at a later date. Comments are ignored by browsers. A CSS comment starts with /*
and ends with */. Comments can also address multiple lines:

Example

/*This is a multiple
lines comment*/
p
{
color:red;
/*This is another comment*/
text-align:center;
}

Text within comment symbol will not be considered by the browser.

2
Ways to Insert CSS

There are three ways of inserting a style sheet:


➢ External style sheet
➢ Internal style sheet
➢ Inline style

External Style Sheet

External style sheet is one way of inserting CSS to your page. In this case CSS code will
be saved as a file with file extension of .css. An external style sheet is ideal when the
style is applied to many pages. With an external style sheet, you can change the look of
an entire Web site by changing one file. Each page must link to the style sheet using the
<link> tag. The <link> tag goes inside the head section:

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

An external style sheet can be written in any text editor. The file should not contain any
html tags. Your style sheet should be saved with a .css extension. An example of a style
sheet file is shown below:

hr{color:sienna;}
p{margin-left:20px;}
body{background-image:url("images/background.gif");}

After writing this code on your editor, just save it with file extension .css, then it becomes
external css and you can link it with any page using the <link> tag.

Do not add a space between the property value and the unit (such as margin-left:20
px). The correct way is: margin-left:20px tag.

3
Internal Style Sheet

This type of CSS is defined within the page itself, so no need of linking. An internal style
sheet should be used when a single document has a unique style. You define internal
styles in the head section of an HTML page, by using the <style> tag, like this:

<head>
<style>
hr{color:purple;}
p{margin-left:20px;}
body{background-image:url("images/background.gif");}
</style>
</head>

NB:It is possible to have multiple <style> defined in the heading part.

Inline Styles

Inline styles are defined very near to the element in which the style is to be applied. It is
defined within the HTML file in the body part. They cannot be defined alone as of the
previous types of css, instead they are defined on the tag itself. To use inline styles, you
use the style attribute in the relevant tag. The style attribute can contain any CSS property.
The example shows how to change the color and the left margin of a paragraph:

<p style="color:red;margin-left:20px;">This is paragraph.</p>

While defining inline style sheet, the attribute style is used and the value should be
enclosed with " ". You are not to use { }, unlike the other two styles.

➢ Better to use External style sheet if you have multiple pages that needs styling.
➢ External styles should be saved with extension .css, and you have to use <link>
tag in heading part to link it with the current page.
➢ External css styles are applicable only on the page which they are linked.

4
➢ Internal style sheet styles are defined within the HTML page itself. It is must to
define them in heading part using the tag <style>.

Multiple Style Sheets

If some properties have been set for the same selector in different style sheets, the values
will be inherited from the more specific style sheet.

For example, an external style sheet has these properties for the h3 selector:

h3
{
color:red;
text-align:left;
font-size:8px;
}

And an internal style sheet has these properties for the h3 selector:

h3
{
text-align:right;
font-size:20px;
}

If the page with the internal style sheet also links to the external style sheet the properties
for h3 will be:

color:red;
text-align:right;
font-size:20px;

The color is inherited from the external style sheet and the text-alignment and the font
size is replaced by the internal style sheet.

5
What will happen if Multiple Styles defined for same selector?
As we discussed earlier, style can be defined inside an HTML element, inside the head
section of an HTML page or in an external CSS file. But also, we have to remember that
the browser has its own default style which is used if no style is defined. Using those if a
certain selector has been defined with the same property but different value, then we have
to know which will take the highest priority. In such cases, styles will cascade and they
are assumed as a new style and inline style (inside an HTML element) will take the
highest priority, which means that it will override a style defined inside the <head> tag,
or in an external style sheet, or in a browser (a default value). If there is no inline then
internal will take the priority next external and lastly browser default will be applied. But
you have to know that if the <link> tag which links the page with external css is placed
after the definition of internal style sheet, then the external will take the priority over the
internal.

If the link to the external style sheet is placed after the internal style sheet in HTML
<head>, the external style sheet will override the internal style sheet!

6
Lab 1: let us have layout:

<html>

<head>

<style>

#st1 {

position:absolute;

left:106px;

top:32px;

width:839px;

height:120px;

background-color:#A4A4A4;

#st2 {

position:absolute;

left:107px;

top:159px;

width:227px;

height:462px;

background-color:#99CCFF;

#st3 {

position:absolute;

left:340px;

top:160px;

width:604px;

height:462px;

background-color:#FFCCFF;

</style>

</head>

<body>

<div id="st1"></div>

<div id="st2"></div>

<div id="st3"></div>

</body>

</html>

7
OUT
PUT

The code given above has three css id selectors with a name st1, st2 and st3. Position is a
property used in all three selectors. It is used to define the position of div tag on the
browser. As you see there its value is absolute and it has also other values like fixed,
which makes the div tag not to move while we scroll the page up and down. The other
properties height, width, background-color are used to define the height, width and color
of the div tag consecutively. Top is used to determine the distance between top side of the
browser and the div tag and left determines the distance between the left side of the
browser and the div tag.

CSS Selectors

CSS selectors allow you to select and manipulate HTML element(s). CSS selectors are
used to "find" (or select) HTML elements based on their id, classes, types, attributes,
values of attributes and much more.

8
The Universal Selectors
Rather than selecting elements of a specific type, the universal selector quite simply
matches the name of any element type and it is defined using "*". If you define style with
universal selector, then it will apply on every element.

* {
color: #000000;
}

This rule renders the content of every element in our document in black.

The Descendant Selectors

Suppose you want to apply a style rule to a particular element only when it lies inside a
particular element. As given in the following example, style rule will apply to <b>
element only when it lies inside <td> tag.

td b{
color: #000000;
}
In this case the style will apply to elements in the <td> tag and enclosed with <b>.

The element Selector

The element selector selects elements based on the element name. You can select all <p>
elements on a page like this: (all <p> elements will be center-aligned, with a red text
color)

p
{
text-align:center;
color:red;
}

The Class Selectors

The class selector finds elements with the specific class. The class selector uses the
HTML class attribute. To find elements with a specific class, write a period character,

9
followed by the name of the class. In the example below, all HTML elements with
class="center" will be center-aligned:

.center
{
text-align:center;
color:red;
}
This class should be called like this:
<h1 class="center"> centered text</h1>
The text will be center aligned and also red color, since class with such style is called.
This class can be called within any tag using attribute "class".

You can also specify that only specific HTML elements should be affected by a class. In
the example below, all p elements with class="center" will be center-aligned:

p.center
{
text-align:center;
color:red;
}
On this example, class "center" cannot be called by any tag because it is specifically
defined for <p> as it is shown on the selector (p.center).

The id Selector

The id selector uses the id attribute of an HTML tag to find the specific element. An id
should be unique within a page, so you should use the id selector when you want to find a
single, unique element.

To find an element with a specific id, write hash character #, followed by the id of the
element. The style rule below will be applied to the HTML element with id="id1":

#id1
{
text-align:center;
color:red;
}

10
This id should be called like this:
<h1 id="id1"> centered text</h1>
You can make it a bit more particular:
h1#black {
color: #000000;
}

Or

#black h1 {
color: #000000;
}

This defines the content in black for only <h1> elements with id attribute set to black.

Do not start id name and class name with a number and don't forget that class has to
start with . and id has to start with #.

The Attribute Selectors

You can also apply styles to HTML elements with particular attributes. The style rule
below will match all the input elements having a type attribute with a value of text

input[type = "text"]{
color: #000000;
}
The advantage to this method is that the <input type = "submit"> element is unaffected,
and the color applied only to the desired text fields.

11
Grouping Selectors

In style sheets there are often elements with the same style:
h1
{
text-align:center;
color:red;
}
h2
{
text-align:center;
color:red;
}
p
{
text-align:center;
color:red;
}
To minimize the code, you can group selectors. To group selectors, separate each selector
with a comma. In the example below we have grouped the selectors from the code above:
h1,h2,p
{
text-align:center;
color:red;
}

12
Lab 2: let us understand selectors

<html>
<head>
<style>
#id1
{
text-align:center;
font-size:24px;
}
.class1
{
color:#FF0000;
}
body p
{
background-color:#99CCFF;
}

h1.sel1
{
color:#FF0;
background-color:#666666;
}
</style>
</head>
<body>
This is CSS example.
<p id="id1"> big size and centered text with background</p>
<p>text with background color</p>
<h1 class="sel1"> heading text with color and background
color</h1>
<h2 class="sel1">no change over here</h2>
13
</body>
</html>
OUT
PUT

The above code has 4 CSS selectors which are defined in different way. The first selector
"#id1" is an id selector because it starts with #. Don’t forget that it is not possible to use
number after the #. Its properties applied on the tag which calls "id1". <p id="id1"> calls
this id selector so it has applied its properties. The second selector ".class1" is a class
selector because it starts with "." and its property apply on the tag that calls it. The third
which is a descendent selector "body p". Means that every paragraph element in the body
part will take the property of this selector. <p> uses its property. h1.sel1 is a class selector
with a tag. Means the property of this selector works only when it is called by h1 tag.
You can notice on the example that h2 calls sel1 but cannot get its property because sel1
is only for h1 due to its declaration as h1.sel1.

CSS Links

Link is one of the tags that need CSS to be applied. As you see on previous lesson, html
links are not attractive. In order to make it user attractive, you have to apply CSS. Links
can be styled with any CSS property (e.g. color, font-family, background, etc.). In
addition, links can be styled differently depending on what state they are in. The four
links states are:
➢ a:link - a normal and any link but not visited
➢ a:visited - a link the user has visited
➢ a:hover - a link when the user's mouse over it
➢ a:active - a link the moment it is clicked

14
While using the four states, a:hover must come after a:link and a:visited. And a:active
must come after a:hover.

Example
<html>

<head>

<style>

a:link

{ color:#FF0000;

background-color:#A2A2A2;

text-decoration:none;

padding:10px 20px;

border:thin;

border-style:solid;

a:visited

color:#00FF00;

a:hover

{ color:#FF00FF;

background-color:#653D00;

a:active

color:#0000FF;

</style>

</head>

<body>

<a href="abc.html">CSS link1</a><a href="xyz.html">CSS link2</a>

</body>

</html>

15
OUT
PUT

In the example above the there are two links as you can see on the output. Their original
state is with black text color, border line and gray background. As the code says on a:link,
color is black (text color), background-color is gray, text-decoration is none (this means
there is no line on the link), padding is 10px for top and bottom (means the text "CSS
link1" displays 10px away from the border) and 20px for right and left (means the text
displays 20px away from the border), border is thin to have thin border line and border-
style is solid as the line is full. When you mouse over the links, then as it is on a:hover,
the color (text color) and background color of the link will be changed, but it returns to
the original look when you take your mouse out the link. If the link is already visited then
the text color will change a:visited. And if it is the current link clicked, a:active, will
change the text color too.

CSS Margin and padding

Padding property allows you to specify how much space should appear between the
content of an element and its border (inside the border). The padding property sets the
padding space on all sides of an element. The padding area is the space between the
content of the element and its border. Negative values are not allowed. The value of this
attribute should be a length, a percentage, or the word "inherit". If the value is "inherit", it
will have the same padding as its parent element. If a percentage is used, the percentage
is of the containing box. The padding property is a shorthand property for the following
individual padding properties:

• padding-top
• padding-right
• padding-bottom
• padding-left

16
Example

h1 {
padding: 10px 20px 30px 15px;
}

This means, top padding is 10px, right padding is 20px, bottom padding is 30px and left
padding is 15px. Or you can specify specifically using the above four padding properties.
If padding has three values, then the first is for top, the second is for right and left and the
third will be for bottom. If it has two values, the first is for top and bottom and the second
will be for right and left. If it has one value, then all the four will take that value.

The CSS margin properties are used to generate space around elements (outside the
border). The margin does not have a background color, and is completely transparent. It
is possible to use negative values to overlap content. The value of this attribute should be
a length or a percentage. Percentage specifies a margin in % of the width of the
containing element. The margin property allows you set all of the properties for the four
margins (margin-top, margin-right, margin-bottom and margin-left) in one declaration. It
works as the same fashion as padding does.

Negative values are not allowed for padding but possible in the case of margin.

CSS Border

The border properties allow you to specify how the border of the box representing an
element should look. There are three properties of a border you can change, border-color
specifies the color of a border, border-style specifies what kind of border to display (the
values are listed below) and border-width specifies the width of a border.

Border style has to be set to see the value of others (color and width). Some of values of
border-style are:

• none: Defines no border

17
• dotted: Defines a dotted border
• dashed: Defines a dashed border
• solid: Defines a solid border
• double: Defines two borders.

The border-width property is used to set the width of the border. The width is set in pixels,
or by using one of the three pre-defined values: thin, medium, or thick. The "border-
width" property does not work if it is used alone. Use the "border-style" property to set
the borders first.

The border-color is used to specify the color of border to be displayed. Color can be
assigned using hexadecimal, RGB or by its name. You can also set the border color to
"transparent".

Border - Individual sides

It is possible to have different borders for different sides using:

• border-top-style
• border-right-style
• border-bottom-style
• border-left-style

Or you can also use "border-style" only with a value from one to four. If it has four
values like:

border-style:dotted solid double dashed;


It means: top border is dotted, right border is solid, bottom border is double and left
border is dashed. Or if it has three values:

border-style:dotted solid double;


It means: top border is dotted, right and left borders are solid and bottom border is double

border-style:dotted solid;
In this case, top and bottom borders are dotted and right and left borders are solid. And if
it is like:

border-style:dotted;

18
Then all four borders are dotted.

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 border-width, border-
style (required) and border-color.

Example

p {
border: thin solid red;
}

This code results thin solid border with red color.

None of the border properties will have any effect unless the border-style property is
set! The "border-color" property does not work if it is used alone and "border-width"
property does not work if it is used alone. Use the "border-style" with them.

Border radius
After setting border for the element, sometimes we may need to have non sharp edge on
every angle or some of them. "border-radius" is used for that.

p {
border: thin solid red;
border-radius:20px;
}

OUT
PUT

Four sides of the border are rounded with 20px. As the pixel increases the roundness of
the edges increases.

19
p {
border: thin solid red;
border-bottom-left-radius:20px;
border-top-right-radius:20px;
}

OUT
PUT

On the above example "border-bottom-left-radius" is set with 20px and the left bottom
side is rounded as you can see it. The same for "border-top-right-radius".

CSS table

Table is one of the HTML elements that can improve using CSS. There are lots of
features that we can see. "border" property is used to specify table's border.

table {
border: 1px solid black; OUTPUT

The CSS code above gives border for outer table, not for each cell. Check the following
code:

table td {
border: 1px solid black;
}
OUTPUT
table
{
border-collapse:collapse;
}
20
Here both table and td have border with 1px solid and black color, so that the table will
looks like as the output. "border-collapse" property helps the table to have single border,
if it was not set or if its value is "separate" then the border looks like each cell has its own
rectangle border.

Other properties like "vertical-align", "text-align", "padding", "height", "width", "color",


"background-color" can also be used.

td {
border-bottom: 1px solid black;
}
table{
border-collapse:collapse;
}
tr:hover{
background-color:#CFF;
}
tr:nth-child(odd)
"border-bottom" allows having border only on the bottom part. "tr:hover" is used to apply
change
{ when the user takes mouse over the row. In this case the background color will
change when mouse over through #d2d2d2;}
background-color: the row. "tr:nth-child(odd)" will apply change
according to the value on every odd rows. You may change "odd" with "even".

CSS shadow

Having shadow to text, elements and boxes using CSS is possible through CSS3. There
are two major shadow properties "text-shadow" and "box-shadow".

h1 {
text-shadow: 3px 3px 2px blue; OUTPUT
}

21
Values for "text-shadow", the first 3px is for horizontal shadow, the next one is for
vertical shadow. 2px is called blur effect, how much should the color distribute as a
shadow. And "blue" is the color of the shadow.

div {
border:solid thin;
position:absolute;
OUTPUT
width:300px;
height:300px;
box-shadow: 10px 10px 5px 2px grey;
}

"box-shadow" property has 5 values separated with space. The first 10px shows
horizontal shadow, the next is for vertical shadow. 5px is for blur effect and 2px for
shadow spread radius. "grey" is color for shadow.

CSS List

We can apply different style with properties that we know still on lists. In addition there
are some properties that will help us specifically. "list-style-type" used to determin the
list type like, square or disk or letter or number. "list-style-position" has a value of either
inside or outside which displays lists with some padding or without. "list-style-image"
specifies an image as the list item marker.
ul {
background: #666;
padding: 20px;
} OUTPUT
ul li {
background: #96F;
margin: 5px;
color:white;
}
22
"ul" has its own background set and padding value. "li" under every ul has another
background color, text color and padding set.

CSS Background

CSS background is used to define background for html elements. Properties used for
background effects:

• background-color
• background-image
• background-repeat
• background-attachment
• background-position

Background Color
The background-color property specifies the background color of an element. The
background color of a page is defined in the body selector. You may have background
color for different elements like for h1, p or others.

Background Image
The background-image property specifies an image to use as the background of an
element. By default, the background-image property repeats an image both horizontally
and vertically so it covers the entire element. The background image for the whole page
can be set like this:

body {
background-image:url("paper.gif");
}
Background repeat
To determine the repetition of background image, you can use background-repeat
property which has values like no-repeat, repeat-x and repeat-y. "repeat-x" allows your
background to repeat only through x axis, horizontally "repeat-y" will do same task in y
axis. If "no-repeat" used, then image will not be repeated.

23
Background position
This property determines the position of the image that will be applied on the background.
Values could be, bottom, top, left, right or center. If value is center, then the center of that
image will apply as background.

Background attachment
"background-attachment" used to have fixed, which cannot be scrolled with the text, or
scrollable image background. Values can be "fixed" or "scroll". If you have fixed value
then text scrolls but image will remain un-scrollable and if your value is scroll, then both
text and background image will scroll together.

Body

background-image:url(123.jpg);

background-repeat:no-repeat;

background-attachment:scroll;

"background-image" displays image on the background of the element used. With "no-
repeat" value, in which image will not be repeated and the image will scroll with text
because background-attachment has a value of scroll.

CSS Text

Text Color

The color property is used to set the color of the text. With CSS, a color is most often
specified by:

• a HEX value - like "#ff0000"


• an RGB value - like "rgb(255,0,0)"
• a color name - like "red"

body{Color:red;}

24
Text Alignment
The text-align property is used to set the horizontal alignment of a text. Text can be
centered, or aligned to the left or right, or justified. When text-align 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).

h1{text-align:center;}

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.

p.uppercase{text-transform:uppercase;}
p.lowercase{text-transform:lowercase;}

Since p.uppercase and p.lowercase are class selectors, they can only be applied if you call
them in <p> as <p class="uppercase"> or <p class="lowercase">

CSS Font

CSS font properties define the font family, boldness, size, and the style of a text.

Font Family
The font family of a text is set with the font-family property. The font-family property
should hold several font names as a "fallback" system. If the browser does not support the
first font, it tries the next font. Start with the font you want, and end with a generic family,
to let the browser pick a similar font in the generic family, if no other fonts are available.

Note: If the name of a font family is more than one word, it must be in quotation marks,
like: "Times New Roman".

p{font-family:"Times New Roman";}

25
Font Size
The font-size property sets the size of the text. Being able to manage the text size is
important in web design. However, you should not use font size adjustments to make
paragraphs look like headings, or headings look like paragraphs.

Always use the proper HTML tags, like <h1> - <h6> for headings and <p> for
paragraphs. The font-size value can be an absolute or relative size. Font size can be set
with px or em. Where 1em=16px.

h1{font-size:40px;}
h1{font-size:2em;}

26

You might also like