CSS-web-technology-note
CSS-web-technology-note
4 - CSS
What is CSS?
• CSS stands for Cascading Style Sheets
• Styles define how to display HTML elements
• External Style Sheets can save a lot of work
• External Style Sheets are stored in CSS files
Importance of CSS
• CSS defines HOW HTML elements are to be displayed.
• Styles are normally saved in external .css files. External style sheets enable you to change the
appearance and layout of all the pages in a Web site, just by editing one single file.
CSS Syntax
• A CSS rule has two main parts: a selector, and one or more declarations:
The id Selector
• The id selector is used to specify a style for a single, unique element.
• The id selector uses the id attribute of the HTML element, and is defined with a "#".
• The style rule below will be applied to the element with id="para1":
#para1
{ text-align:center; color:red; }
4 - CSS
The class Selector
• The class selector is used to specify a style for a group of elements. Unlike the id selector, the class
selector is most often used on several elements.
• This allows you to set a particular style for many HTML elements with the same class.
• The class selector uses the HTML class attribute, and is defined with a "."
• In the example below, all HTML elements with class="center" will be center-aligned:
.center {text-align:center;}
• We can use more than one class in a single element
Explain different ways to write the CSS. / Explain CSS with all types. / Enlist
and explain methods of using CSS in web page.
• There are three ways of inserting a style sheet:
o External style sheet
o Internal/Embedded style sheet
o Inline style
1. External Style Sheet
o When using CSS it is preferable to keep the CSS separate from your HTML.
o Placing CSS in a separate file allows the web designer to completely differentiate between
content (HTML) and design (CSS).
o External CSS is a file that contains only CSS code and is saved with a ".css" file extension.
o This CSS file is then referenced in your HTML using the <link> instead of <style>.
File Creation
o Open up notepad.exe, or any other plain text editor and type the following CSS code.
body{ background-color: gray;} p { color: blue; }h3{ color: white; }
o Save the file as a CSS (.css) file.
o Name the file "test.css" (without the quotes). Now create a new HTML file and fill it with
the following code.
<html><head>
<link rel="stylesheet" type="text/css" href="test.css" /></head>
<body>
<h3> A White Header </h3>
<p> This paragraph has a blue font.
The background color of this page is gray because we changed it with CSS! </p>
</body></html>
4 - CSS
o It's much easier to reuse your CSS code if you have it in a separate file. Instead of typing
the same CSS code on every web page you have, simply have many pages refer to a single
CSS file with the "link" tag.
o You can make drastic changes to your web pages with just a few changes in a single CSS
file.
2. Internal/Embedded CSS
o This type of CSS is only for Single Page.
o When using internal CSS, we must add a new tag, <style>, inside the <head> tag. The
HTML code below contains an example of <style>'s usage.
<html><head>
<style type="text/css"></style>
</head><body>
<p>Your page's content!</p></body>
</html>
3. Inline CSS
o It is possible to place CSS right in your HTML code, and this method of CSS usage is
referred to as inline css.
o Inline CSS has the highest priority out of external, internal, and inline CSS.
o This means that you can override styles that are defined in external or internal by using
inline CSS.
o If you want to add a style inside an HTML element all you have to do is specify the desired
CSS properties with the style HTML attribute.
<html><head>
<link rel="stylesheet" type="text/css" href="test.css" /></head>
<body>
<p style="background: blue; color: white;">A new background andfont color with
inline CSS</p></body>
</html>
4 - CSS
o The background color of a page is defined in the body selector:
o Below is example of CSS backgrounds
body {background-color:#b0c4de;}
body {background-image:url('paper.gif');}
3. Background Image Repeat
o You can have a background image repeat vertically (y-axis), horizontally (x-axis), in both
directions, or in neither direction.
p {background-image: url(smallPic.jpg); background-repeat: repeat; }
h4 {background-image: url(smallPic.jpg); background-repeat: repeat-y; }
ol {background-image: url(smallPic.jpg); background-repeat: repeat-x; }
ul {background-image: url(smallPic.jpg);background-repeat: no-repeat; }
4 - CSS
3. CSS Font Size
o The font-size property sets the size of the text.
p { font-size: 120%; } ol{ font-size: 10px; } ul{ font-size: x-large; }
4. CSS Font Style
o The font-style property is mostly used to specify italic text.
o This property has three values:
▪ normal - The text is shown normally
▪ italic - The text is shown in italics
▪ oblique - The text is "leaning" (oblique is very similar to italic, but less supported)
p { font-style: italic; }h4{ font-style: oblique; }
p { font-variant: small-caps; }}
2. Text Indent
o The text-indentation property is used to specify the indentation of the first line of a text.
p { text-indent: 20px; } h5 { text-indent: 30%; }
3. Text Align
o The text-align property is used to set the horizontal alignment of a text.
p { text-align: right; }
h5{ text-align: justify; }
4. Text Transform
o The text-transform property is used to specify uppercase and lowercase letters in a text.
4 - CSS
p { text-transform: capitalize; } h5{ text-transform: uppercase; }
4 - CSS
• The top, right, bottom, and left margin can be changed independently using separate properties. A
shorthand margin property can also be used, to change all margins at once.
Value Descriptions
auto The browser calculates a margin
length Specifies a margin in px, pt, cm, etc. Default value is 0px
% Specifies a margin in percent of the width of the
containing element
inherit Specifies that the margin should be inherited from the
parent element
4 - CSS
2. Margin - Shorthand property
o To shorten the code, it is possible to specify all the margin properties in one property. This
is called a shorthand property.
margin:100px 50px;
2. Border Width
o The border-width property is used to set the width of the border.
3. Border Color
o The border-color property is used to set the color of the border.
o Border colors can be any color defined by RGB, hexadecimal, or key terms. Below is an
example of each of these types.
4. Border: border-(direction)
o If you would like to place a border on only one side of an HTML element, or maybe have a
unique look for each side of the border, then use border-(direction).
o The direction choices are of course: top, right, bottom, and left. CSS allows you to treat
each side of a border separately from the other three sides.
o Each side can have its own color, width, and style set, as shown below.
p { border-bottom-style: dashed ; border-bottom-color: yellow; border-bottom-width: 5px; }
h4 { border-top-style: double; border-top-color: purple; border-top-width: thick; }
4 - CSS
1. CSS List Style Type
o Specify all the list properties in one declaration.
▪ Unordered list styles: square, circle, disc (default), and none
▪ Ordered list styles: upper-alpha, lower-alpha, upper-roman, lower-roman, decimal
(default), and none
ol { list-style-type: upper-roman; }
ul { list-style-type: circle; }
ul { list-style-image: url("listArrow.gif"); }
ol { list-style-image: url("listArrow2.gif"); }
ul { list-style-position: inside; }
ol { list-style-position: outside; }
• Note: "Outside" is actually the default setting for indentation.
4 - CSS
a:link {background-color:#B2FF99;}
a:visited {background-color:#FFFF85;}
a:hover {background-color:#FF704D;}
a:active {background-color:#FF704D;}
2. Position Absolute
o With absolute positioning, you define the exact pixel value where the specified HTML
element will appear.
o The point of origin is the top-left of the browser's viewable area, so be sure you are
measuring from that point.
h3 {position: absolute; top: 50px;left: 45px;}
p{position: absolute; top: 75px;left: 75px;}
4 - CSS
<body>
<img src="sunset.gif" class="floatLeft"><p>The images are contained with...</p>
<img src="sunset.gif" class="floatRight"><p>This second paragraph has an...</p>
</body>
Introduction to CSS3
• CSS3 is the latest standard for CSS.
• CSS3 is completely backwards-compatible with earlier versions of CSS.
• CSS3 has been split into "modules". It contains the "old CSS specification" (which has been split
into smaller pieces). In addition, new modules are added.
• CSS3 Transitions are a presentational effect which allow property changes in CSS values, such as
those that may be defined to occur on :hover or :focus, to occur smoothly over a specified
duration – rather than happening instantaneously as is the normal behaviour.
• Transition effects can be applied to a wide variety of CSS properties, including background-color,
width, height, opacity, and many more.
• Some of the most important CSS3 modules are:
o Selectors
o Box Model
o Backgrounds and Borders
o Image Values and Replaced Content
o Text Effects
o 2D/3D Transformations
o Animations
o Multiple Column Layout
o User Interface