Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
3 views

Introduction to CSS-1

This document provides an introduction to Cascading Style Sheets (CSS), explaining its purpose in styling web pages, including syntax, selectors, and different methods of applying CSS (inline, internal, and external). It covers various CSS selectors such as element, id, class, and pseudo-classes, as well as positioning elements and managing backgrounds. The document also emphasizes the importance of CSS in enhancing the presentation of HTML content.

Uploaded by

phtkgmz
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
3 views

Introduction to CSS-1

This document provides an introduction to Cascading Style Sheets (CSS), explaining its purpose in styling web pages, including syntax, selectors, and different methods of applying CSS (inline, internal, and external). It covers various CSS selectors such as element, id, class, and pseudo-classes, as well as positioning elements and managing backgrounds. The document also emphasizes the importance of CSS in enhancing the presentation of HTML content.

Uploaded by

phtkgmz
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 36

Introduction to Cascading Style Sheet

(CSS): Part 1
What is CSS?
• CSS stands for Cascading Style Sheets. It is the language for describing the presentation of Web pages, including
colors, layout, and fonts, thus making our web pages presentable to the users.
• CSS is designed to make style sheets for the web. It is independent of HTML and can be used with any XML-
based markup language.
Cascading: Falling of Styles
Style: Adding designs/Styling our HTML tags
Sheets: Writing our style in different documents
CSS Syntax
Selector { Property 1 : value; Property 2 : value; Property 3 : value; }
Selector: selects the element you want to target. It could be any tag like <h1>, <title> etc
Declaration Block: The declaration block can contain one or more declarations separated by a semicolon. For the
below example, there are two declarations:
color: yellow; font-size: 11 px;
Each declaration contains a property name and value, separated by a colon.
Property: A Property is a type of attribute of HTML element. properties(attributes) like color, font-size,
background, width, height ,etc.
Value: Values are assigned to CSS properties. In the above example, value "yellow" is assigned to color
CSS Selector
CSS selectors are used to select the content you want to style. Selectors are the part of CSS rule set. CSS
selectors select HTML elements according to its id, class, type, attribute etc.
There are several different types of selectors in CSS.
• CSS Element Selector
• CSS Id Selector
• CSS Class Selector
• CSS Universal Selector
• CSS Group Selector
Element Type Selectors
• The most basic CSS selectors are Element Type Selectors. That's a fancy name for simply using an
HTML tag, without the angle braces.
p{
text-align: center;
color: blue;
}
Id Selectors
Match an element that has the specified id.
To match a specific id attribute, we always start the selector with a hash symbol (#), to signify that we are
looking for an id value.
An id is always unique within the page so it is chosen to select a single, unique element.
For example, if we wanted the element with an id of "content", we would use the following CSS rule:
#content { border: 2px solid green; }
#para1 {
text-align: center;
color: blue;
}
Class Selectors
Match an element that has the specified class. The class selector selects HTML elements with a specific
class attribute.
It is used with a period character . (full stop symbol) followed by the class name.
Note: A class name should not be started with a number.
.center {
text-align: center;
color: blue;
}
CSS Class Selector for specific element
If you want to specify that only one specific HTML element should be affected then you should use the element
name with class selector.
p.center {
text-align: center;
color: blue;
}
Pseudo-classes
A pseudo-class is used to define a special state of an element.
For example, it can be used to:
• Style an element when a user mouses over it
• Style visited and unvisited links differently
• Style an element when it gets focus
Syntax
/* selected link */
A pseudo-class starts with a colon (:). Let's see its syntax.
selector: pseudo-class { a:active {
property: value; color: blue;
}
Ex: }
<!DOCTYPE html> </style>
<html>
</head>
<head>
<style> <body>
/* unvisited link */
<h2>Styling a link depending on state</h2>
a:link {
color: red; <p><b><a href="http://www.rvrjc.ac.in"
} target="_blank">This is a link</a></b></p>
/* visited link */
<p><b>Note:</b> a:hover MUST come after a:link and
a:visited {
a:visited in the CSS definition in order to be effective.</p>
color: green;
} <p><b>Note:</b> a:active MUST come after a:hover in
/* mouse over link */ the CSS definition in order to be effective.</p>
a:hover {
</body>
color: hotpink;
Universal Selector
h1 {
The universal selector is used as a wildcard
character. It selects all the elements on the pages. text-align: center; color: blue;
*{
}
color: green;
font-size: 20px;
h2 {
} text-align: center; color: blue;
CSS Group Selector }
The grouping selector is used to select all the p{
elements with the same style definitions.
Grouping selector is used to minimize the code.
text-align: center; color: blue;
Commas are used to separate each selector in }
grouping.
It can be grouped in following way
h1,h2,p {
text-align: center; color: blue;
}
CSS How-To
There are 3 ways to write CSS in our HTML file.
• Inline CSS
• Internal CSS
• External CSS
Priority order
• Inline > Internal > External
Inline CSS
• Uniquely applied on each element
Ex:
<h3 style=” color: red”> Have a great day </h3>
<p style =” color: green”> I did this , I did that </p>
Internal CSS
Uniquely applied on a single document. With the help of style tag, we can apply styles within the HTML
file
< style>
h1{ color:red; }
</style>
<h3> Have a great day </h3>
External CSS
External CSS is used to apply CSS on multiple pages or all pages. Here, we write all the CSS code in a
css file. Its extension must be .css for example style.css.
With the help of <link> tag in the head tag, we can apply styles
<head>
<link rel="stylesheet" type="text/css" href="name of the Css file">
</head>
h1{ color:red; //.css file }
Inline CSS
• We can apply CSS in a single element by inline CSS technique.
• The inline CSS is also a method to insert style sheets in HTML document. This method mitigates some
advantages of style sheets so it is advised to use this method sparingly.
• Not an efficient way to write as it has a lot of redundancy
<!DOCTYPE html>
<html>
<body>
<h1 style="color:red;margin-left:40px;">Inline CSS is applied on this heading.</h1>
<p>This paragraph is not affected.</p>
</body>
</html>
Inline CSS is applied on this heading.
This paragraph is not affected.
Ex2:
<!DOCTYPE html>
<html>
<head>
<title>Inline Styles</title>
</head>
<body>
<p>This text does not have any style applied to it.</p>
<p>This text has the <em>font-size</em> style applied to it, making it 20pt.
</p>
<p style = "font-size: 20pt; color: deepskyblue;">
This text has the <em>font-size</em> and
<em>color</em> styles applied to it, making it 20pt and deep sky blue.</p>
</body>
</html>
Embedded Style Sheets (Internal CSS)
A second technique for using style sheets is embedded style sheets.
The internal style sheet is used to add a unique style for a single document. It is defined in <head> section of the HTML page inside
the <style> tag.
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: linen;
}
h1 {
color: Red;
margin-left: 80px;
}
</style>
</head>
<body>
<h1>The internal style sheet is applied on this heading.</h1>
<p>This paragraph will not be affected.</p>
Ex2:
<!DOCTYPE html>
<html>
<head>
<title>Embedded Style Sheet</title>
<style type = "text/css">
em { font-weight: bold; color: black; }
h1 { font-family: tahoma, helvetica, sans-serif; }
p { font-size: 12pt; font-family: arial, sans-serif; }
.special { color: purple; }
</style>
</head>
<body>
<h1 class = "special">Deitel & Associates, Inc.</h1>
<p>Deitel & Associates, Inc. is an authoring and corporate training organization specializing in programming languages, Internet
and web technology,
iPhone and Android app development, and object technology education.</p>
<h1>Clients</h1>
<p class = "special"> The company's clients include many <em>Fortune 1000 companies</em>, government agencies, branches of
the military and business organizations.</p>
</body>
External CSS
• The external style sheet is generally used when you want to make changes on multiple pages. It is
ideal for this condition because it facilitates you to change the look of the entire web site by changing
just one file.
• It uses the <link> tag on every pages and the <link> tag should be put inside the head section.
/* styles.css */
/* External style sheet */
body { font-family: arial, helvetica, sans-serif; }
a.nodec { text-decoration: none; }
a:hover { text-decoration: underline; }
li em { font-weight: bold; }
h1, em { text-decoration: underline; }
ul { margin-left: 20px; }
ul ul { font-size: .8em; }
Attaching a specific style class with a specific element
A.nodec { text-decoration: none}
• Overrides an element function
• If A is used with nodec class the text will not be underlined
<P><A CLASS = "nodec" HREF = "http://food.com">Go to the Grocery store</A></P>
• text-decoration property
Applies decorations to text within an element
None, Overline, line-through
Pseudo-class
Extends function of an element
Allows author access to content not specifically declared in the document
A:hover { text-decoration: underline; color: red; background-color: #CCFFCC}
The hover pseudo class is dynamically activated when the user mover the mouse cursor over an A element
Element within Element
LI EM { color: red; font-weight:bold}
Declare a style for EM when used as children of LI
Applying to multiple elements requires separating element with comma eg LI EM
<!DOCTYPE html> </ul>
<html> </li>
<head> <li>Carrots</li>
<title>Linking External Style Sheets</title>
<li>Yogurt</li>
<link rel = "stylesheet" type = "text/css"
<li>Pizza <em>with
href = "styles.css">
mushrooms</em></li>
</head>
</ul>
<body>
<h1>Shopping list for <em>Monday</em>:</h1>
<p><em>Go to the</em>
<ul> <a class = "nodec" href =
<li>Milk</li>
"http://www.bigbasket.com">
<li>Bread Grocery store</a>
<ul> </p>
<li>white bread</li> </body>
<li>Rye bread</li> </html>
<li>Whole wheat bread</li>
Positioning Elements: Absolute Positioning, z-index
Before CSS, controlling element positioning in HTML documents was difficult—the browser
determined positioning.
CSS introduced the position property and a capability called absolute positioning, which gives you
greater control over how document elements are displayed.
The z-index property specifies the stack order of an element. (which element should be placed in front
of, or behind, the others).
An element can have a positive or negative stack order.
The z-index property allows you to layer overlapping elements. Elements that have higher z-index
values are displayed in front of elements with lower z-index values.
If you do not specify a z-index or if elements have the same z-index value, the elements are placed from
background to foreground in the order in which they’re encountered in the document. The default z-
index value is 0.
<!DOCTYPE html>
<html>
<head>
<style>
img {
position: absolute;
left: 0px;
top: 0px;
z-index: -1;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<img src="https://media.newyorker.com/photos/Trees.jpg"width="100" height="140">
<p>Because the image has a z-index of -1, it will be placed behind the text.</p>
</body>
<html> </style>
<head> </head>
<title>Absolute Positioning</title> <body>
<style type = "text/css">
<p><img src = "background_image.jpg" class = "background_image"
.background_image { position: absolute;
alt = "First positioned image" width="1000" height="1000"/></p>
top: 0px;
left: 0px;
<p><img src = "foreground_image.jpg" class = "foreground_image"
z-index: 1; }
alt = "Second positioned image" /></p>
.foreground_image { position: absolute;
top: 300px;
left: 350px; <p class = "text">DEPT OF CSE</p>
z-index: 2; } </body>
.text { position: absolute; </html>
top: 400px;
left: 400px;
z-index: 3;
font-size: 20pt;
font-family: tahoma, geneva, sans-serif; }
Positioning Elements: Relative Positioning, span
Absolute positioning is not the only way to specify page layout, in which elements are positioned
relative to other elements.
Element span is a grouping element by default, it does not apply any formatting to its contents. Its
primary purpose is to apply CSS rules or id attributes to a section of text.
Element span is an inline-level element it does not change the flow of elements in the document.
Examples of inline elements include span, img, a, em and strong.
<html>
<head>
<title>Relative Positioning</title>
<style type = "text/css">
p { font-size: 1.3em;
font-family: verdana, arial, sans-serif; }
span { color: red;
font-size: .6em;
height: 1em; }
.super { position: relative;
top: -1ex; }
.sub { position: relative;
bottom: -1ex; }
.shiftleft { position: relative;
left: -1ex; }
.shiftright { position: relative;
right: -1ex; }
</style>
</head>
<body>
<p>The text at the end of this sentence
<span class = "super">is in superscript</span>.</p>
<p>The text at the end of this sentence
<span class = "sub">is in subscript</span>.</p>
<p>The text at the end of this sentence
<span class = "shiftleft">is shifted left</span>.</p>
<p>The text at the end of this sentence
<span class = "shiftright">is shifted right</span>.</p>
</body>
Backgrounds in CSS
CSS provides control over the backgrounds of block-level elements. CSS can set a background
color or add background images to HTML5 elements.
The background property is a shorthand property for
• background-color
• background-image
• background-position
• background-size
• background-repeat
• background-origin
• background-clip
• background-attachment
The background-color property sets the background color of an element.
background-color: color;
The background-image property sets one or more background images for an element.
By default, a background-image is placed at the top-left corner of an element, and repeated both
vertically and horizontally.
background-image: url|none;
The background-position property sets the starting position of a background image.
background-position: value;
The background-size property specifies the size of the background images.
There are four different syntaxes you can use with this property: the keyword syntax ("auto",
"cover" and "contain")
background-size: auto|length|cover|contain;
The background-repeat property sets if/how a background image will be repeated.By default, a
background-image is repeated both vertically and horizontally.
background-repeat: repeat|repeat-x|repeat-y|no-repeat;
The background-attachment property sets whether a background image scrolls with the rest of
the page, or is fixed.
background-attachment: scroll|fixed|local;
<html>
<head>
<title>Background Images</title>
<style type = "text/css">
body { background-image: url(rvr.jpg);
background-position: bottom right;
background-repeat: no-repeat;
background-attachment: fixed;
background-color: blue; }
p { font-size: 18pt;color: Darkblue;text-indent: 1em;
font-family: arial, sans-serif; }
.dark { font-weight: bold; }
</style>
</head>
<body>
<p>Established by the renowned <span class = "dark">Nagarjuna Education Society (1967)</span> in the year 1985,
the College drew its initial impetus from people's representatives, local doctors, charitable trusts and commercial
houses of Guntur District.</p>
</body>
Element Dimensions
Dimensions in CSS: To specify the height and width of an element you can use height and
width properties. It does not specify the borders, margins, and padding, it just sets the height
and width inside the border, margins, and padding for an HTML element.
CSS Dimension Properties CSS Height and Width Values
PROPERTY DESCRIPTION
This is the default. The browser
Sets the height of an Auto
height calculates the height and width
element
Sets the maximum height of
max-height Specify the height and width in px,
an element Length
cm, etc.
Sets the maximum width of
max-width
an element
Specify the height and width in
%
Sets the minimum height of percent of the containing block
min-height
an element

Sets the minimum width of Provides the height and width to


min-width Initial
an element its default value
Sets the width of an
width The height and width will be
element Inherit
inherited from its parent value
<!DOCTYPE html>
<html>
<head>
<title>Box Dimensions</title>
<style type = "text/css">
p { background-color: lightskyblue;
margin-bottom: .5em;
font-family: arial, helvetica, sans-serif; }
</style>
</head>
<body>
<p style = "width: 20%">Here is some text that goes in a box which is set to stretch across twenty percent of the width of the
screen.</p>
<p style = "width: 80%; text-align: center"> Here is some CENTERED text that goes in a box which is set to stretch across
eighty percent of the width of the screen.</section>
<p style = "width: 10%; height: 150px; overflow: scroll">This box is only twenty percent of the width and has a fixed height.
What do we do if it overflows? Set the overflow property to scroll!</p>
</body>
</html>
Box Model and Text Flow
A CSS box model is a compartment that includes numerous assets, such as edge, border, padding and material. It
is used to develop the design and structure of a web page.
Content - The content of the box, where text and images appear
Padding - The padding property determines the distance between the content inside an element and the inside of
the element’s border. Padding can be specified in the, using padding-top, padding-right, padding-left and padding-
bottom.
Border - A border that goes around the padding and content. The border-color property sets the color. [Note: This
property has different meanings for different border styles—e.g., some display the border color in multiple
shades.] The border-style options are none, hidden, dotted, dashed, solid, double, groove, ridge, inset and outset.
Borders groove and ridge have opposite effects, as do inset and outset
Margin - Clears an area outside the border. Margin property sets the space between the outside of an element’s
border and all other content on the page.
Width and Height of an Element
In order to set the width and height of an element correctly in all browsers, you need to know how the box model
works.
Important: When you set the width and height properties of an element with CSS, you just set the width and height of
the content area. To calculate the full size of an element, you must also add padding, borders and margins.
The total width of an element should be calculated like this:
• Total element width = width + left padding + right padding + left border + right border + left margin + right margin
The total height of an element should be calculated like this:
• Total element height = height + top padding + bottom padding + top border + bottom border + top margin + bottom
margin
DIV tag
The <div> tag defines a division or a section in an HTML document.
The <div> tag is used as a container for HTML elements - which is then styled with CSS or manipulated with
JavaScript.
The <div> tag is easily styled by using the class or id attribute.
<html> .red { border-color: red; }
<head> .blue { border-color: blue; }
<title>Borders</title> </style>
<style type = "text/css"> </head>
div { text-align: center; <body>
width: 50%; <div class = "solid">Solid border</div><hr>
position: relative; <div class = "double">Double border</div><hr>
left: 25%; <div class = "groove">Groove border</div><hr>
border-width: 6px; } <div class = "ridge">Ridge border</div><hr>
.thick { border-width: thick; } <div class = "dotted">Dotted border</div><hr>
.medium { border-width: medium; } <div class = "inset">Inset border</div><hr>
.thin { border-width: thin; } <div class = "thick dashed">Thick dashed border</div><hr>
.solid { border-style: solid; } <div class = "thin red solid">Thin red solid border</div><hr>
.double { border-style: double; } <div class = "medium blue outset">Medium blue outset border</div>
.groove { border-style: groove; } </body>
.ridge { border-style: ridge; } </html>
.dotted { border-style: dotted; }
.inset { border-style: inset; }
.outset { border-style: outset; }
.dashed { border-style: dashed; }
<html>
Text Flow
<head>
Floating allows you to move an element to one <title>Flowing Text Around Floating Elements</title>
side of the screen; other content in the document <style type = "text/css">
then flows around the floated element.
header { background-color: skyblue;
• The CSS float property is a positioning text-align: center;
property. It is used to push an element to the left font-family: arial, helvetica, sans-serif;
or right, allowing other element to wrap around
padding: .2em; }
it. It is generally used with images and layouts.
p { text-align: justify;
• To understand its purpose and origin, let's take a
font-family: verdana, geneva, sans-serif;
look to its print display.
margin:.5em;}
h1 {margin-top: 0px}
.floated{ background-color: lightgrey;
font-size: 1.5em;
font-family: arial, helvetica, sans-serif;
padding: .2em;
margin-left: .5em;
margin-bottom: .5em;
float: right; text-align: right;
width: 50%; }
section { border: 1px solid skyblue; } <section>
</style> <h1 class = "floated">Programming Books and Videos</h1>
</head> <p>Through its publishing partnership with Pearson,
RVRJC . publishes leading-edge programming textbooks,
<body>
professional books and interactive web-based and DVD Live
<header><img src = "rvr.jpg" alt = "RVRJC" /></header> Lessons video courses.</p>
<section> </section>
<h1 class = "floated">Corporate Training and </body>
Authoring</h1>
</html>
<p>RVR&JC is an internationally recognized corporate
training and authoring organization specializing in
programming languages, Internet/web technology, iPhone
and Android app development and object technology
education. The company provides courses on Java, C++,
C#, Visual Basic, C, Internet and web programming,
Object Technology and iPhone and Android app
development.</p>
</section>
Media Types and Media Queries
CSS media types allow you to decide what a page should look like, depending on the kind of media
being used to display the page.
The most common media type for a web page is the screen media type, which is a standard computer
screen. Other media types in CSS include handheld, braille, speech and print.
The handheld medium is designed for mobile Internet devices such as smartphones.
braille is for machines that can read or print web pages in braille.
speech styles allow you to give a speech-synthesizing web browser more information about the content
of a page.
The print media type affects a web page’s appearance when it’s printed.
<html>
color: red;
<head>
font-family: "times new roman", times, serif; }
<title>Media Types</title>
} /* End @media print declaration. */
<style type = "text/css">
</style>
@media all
</head>
{
<body>
body { background-color: steelblue; }
<h1>CSS Media Types Example</h1>
h1 { font-family: verdana, helvetica, sans-serif;
<p>
color: palegreen; }
This example uses CSS media types to vary how the page
p { font-size: 12pt;
appears in print and how it appears on any other media.
color: white;
This text will appear in one font on the screen and a
font-family: arial, sans-serif; }
different font on paper or in a print preview. To see
} /* End @media all declaration. */
the difference in Internet Explorer, go to the Print
@media print
menu and select Print Preview. In Firefox, select Print
{
Preview from the File menu. </p>
body { background-color: white; }
</body>
h1 { color: seagreen; }
</html>
p { font-size: 14pt;
Media queries in CSS extended the CSS media types idea: Instead of looking for a type of device, they
look at the capability of the device. Media queries include a media type and expressions that check the
media features of the output device.
Some of the common media features include:
• width—the width of the part of the screen on which the document is rendered, including any scrollbars
• height—the height of the part of the screen on which the document is rendered, including any
scrollbars
• device-width—the width of the screen of the output device
• device-height—the height of the screen of the output device
• orientation—if the height is greater than the width, orientation is portrait, and if the width is greater
than the height, orientation is landscape
• aspect-ratio—the ratio of width to height
• device-aspect-ratio—the ratio of device-width to device-height
Drop-Down Menus nav ul li { border-top: 2px solid royalblue;background-color:
white;
Drop-down menus are a good way to provide navigation links
without using a lot of screen space. width: 10em;color: black; }
The <nav> tag defines a set of navigation links. Notice that nav ul li:hover { background-color: powderblue; }
NOT all links of a document should be inside a <nav> element. { text-decoration: none; }
<html> </style>
<head> </head>
<title>Drop-Down Menu</title> <body>
<style type = "text/css"> <nav>Menu
body { font-family: arial, sans-serif } <ul>
nav { font-weight: bold; color: white; border: 2px solid <li><a href = "#">Home</a></li>
royalblue; text-align: center; width: 10em; background-color: <li><a href = "#">News</a></li>
royalblue; }
<li><a href = "#">Articles</a></li>
nav ul { display: none; list-style: none; margin: 0; padding: 0; }
<li><a href = "#">Blog</a></li>
nav:hover ul { display: block }
<li><a href = "#">Contact</a></li>
nav ul li { border-top: 2px solid royalblue; background-color:
white;width: 10em; color: black; } </ul>

nav ul { display: none;list-style: none; margin: 0; padding: 0; } </nav>

nav:hover ul { display: block } </body>


</html>
User Style Sheets

You might also like