Scribd
Upload
14 views

CSS (Cascading Style Sheet)

css csit

Uploaded by

Reeshav Mainali
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
14 views

CSS (Cascading Style Sheet)

css csit

Uploaded by

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

CSS (Cascading Style Sheet)

What is CSS?

 CSS is a language that describes the style of


an HTML document.
 CSS stands for Cascading Style Sheets
 CSS describes how HTML elements are to
be displayed on screen, paper, or in
other media
 CSS saves a lot of work. It can control the
layout of multiple web pages all at once
 External stylesheets are stored in CSS files
CSS Syntax
 A CSS rule-set consists of a selector and a declaration
block:

 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 CSS property name and a
value, separated by a colon.
 A CSS declaration always ends with a semicolon, and
declaration blocks are surrounded by curly braces.
Example

 h1{
 color:red;
 text-align: center;
 }

 p{
 color: blue;
 }
Inserting CSS

We can use style sheets in three different ways in out HTML


document. There are external style sheet, internal style sheet
and inline style.

1. External CSS
 With an external style sheet, you can change the look of an
entire website by changing just one file!
 Each HTML page must include a reference to the external
style sheet file inside the <link> element, inside the head
section.
 Example:

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

 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.
 Example:
 hr {
 color:sienna;
 }
 p
 {
margin-left:20px;
 } /*Note: Do not leave space between property value and units*/
 body {
background-image:url("images/back40.gif");
 }
Internal CSS
 An internal style sheet may be used if one single HTML page has a unique
style.
 The internal style is defined inside the <style> element, inside the head
section.
 Example:
 <html>
 <head>
 <style>
 body {
 background-color: linen;
 }
 h1 {
 color: maroon;
 margin-left: 40px;
 }
 </style>
 </head>
 <body>
 <h1>This is a heading</h1>
 <p>This is a paragraph.</p>
 </body>
 </html>
Inline CSS
 An inline style may be used to apply a unique
style for a single element.
 To use inline styles, add the style attribute to
the relevant element. The style attribute can
contain any CSS property.
 Example:
 <body>

<h1 style="color:blue;text-align:center;">This is a
heading</h1>
<p style="color:red;">This is a paragraph.</p>

</body>
Cascading Order

 What style will be used when there is more than


one style specified for an HTML element?
 All the styles in a page will "cascade" into a new
"virtual" style sheet by the following rules, where
number one has the highest priority:
1. Inline style (inside an HTML element)
2. internal style sheets (in the head section)
3. External style sheet
4. Browser default
 So, an inline style has the highest priority, and will
override external and internal styles and browser
defaults.
CSS Selectors

 CSS selectors are used to "find" (or select) the HTML


elements you want to style.

1. The CSS id Selector

 The id selector uses the id attribute of an HTML


element to select a specific element.
 The id of an element is 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 CSS id Selector

 Example:
The CSS rule below will be applied to the HTML element with id="para1":
<html>
<head>
<style>
#para1 {
text-align: center;
color: red;
}
</style>
</head>
<body>

<p id="para1">Hello World!</p>


<p>This paragraph is not affected by the style.</p>
</body>
</html>
2 . The CSS class Selector

 The class selector selects HTML elements with a


specific class attribute.
 To select elements with a specific class, write a
period (.) character, followed by the class name.
Example:
 <html>
 <head>
 <style>
 .center {
 text-align: center;
 color: red;
 }
 </style>
 </head>
 <body>

 <h1 class="center">Red and center-aligned heading</h1>


 <p class="center">Red and center-aligned paragraph.</p>

 </body>
 </html>
Example
In this example only <p> elements with class="center" will be center-aligned:

 <html>
 <head>
 <style>
 p.center {
 text-align: center;
 color: red;
 }
 </style>
 </head>
 <body>

 <h1 class="center">This heading will not be affected</h1>


 <p class="center">This paragraph will be red and center-aligned.</p>

 </body>
 </html>
CSS Colors
 Colors are specified using predefined color names, or RGB,
HEX, HSL, RGBA, HSLA values.

CSS Backgrounds
 The CSS background properties are used to
define the background effects for elements.
 CSS background properties:

1. background-color
2. background-image
3. background-repeat
4. background-attachment
5. background-position
1.CSS background-color
 The background-color property specifies the
background color of an element.
 body {
background-color: lightblue;
}
2. CSS background-image
 The background-image property specifies an image to use
as the background of an element.
 By default, the image is repeated so it covers the entire
element.
 body {
background-image: url("paper.gif");
}
CSS background-repeat

 By default, the background-image property repeats an


image both horizontally and vertically. Some images
should be repeated only horizontally or vertically. Looks
like this:
 If the image is repeated only horizontally (repeat-x), the
background will look better:
 body
 {
 background-image:url('gradient2.png');
 background-repeat:repeat-x;
 }
Background Image - no-repeat

 Showing the background image only once is


also specified by the background-
repeat property:

 body {
background-image: url("img_tree.png");
background-repeat: no-repeat;
}
CSS background-position
 The background-position property is used to
specify the position of the background image.

 body {
background-image: url("img_tree.png");
background-repeat: no-repeat;
background-position: right top;
}
CSS background-attachment
 The background-attachment property specifies whether the
background image should scroll or be fixed (will not scroll with
the rest of the page):
 body {
background-image: url("img_tree.png");
background-repeat: no-repeat;
background-position: right top;
background-attachment: fixed;
}

 body {
background-image: url("img_tree.png");
background-repeat: no-repeat;
background-position: right top;
background-attachment: scroll;
}
CSS background - Shorthand property

 To shorten the code, it is also possible to specify


all the background properties in one single
property. This is called a shorthand property.
 The shorthand property for background
is background.
 body {
background: #ffffff url("img_tree.png") no-repeat
right top;
}

CSS Borders
 CSS Border Properties
 The CSS border properties allow you to specify
the style, width, and color of an element's
border.
 CSS 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
Example:
 <style>
 p.dotted {border-style: dotted;}
 p.dashed {border-style: dashed;}
 p.solid {border-style: solid;}
 p.double {border-style: double;}
 p.groove {border-style: groove;}
 p.ridge {border-style: ridge;}
 p.inset {border-style: inset;}
 p.outset {border-style: outset;}
 p.none {border-style: none;}
 p.hidden {border-style: hidden;}
 p.mix {border-style: dotted dashed solid double;}
 </style>
CSS Border Width
 The border-width property specifies the width of the four
borders.
 The width can be set as a specific size (in px, pt, cm, em,
etc) or by using one of the three pre-defined values: thin,
medium, or thick.
 The border-width property can have from one to four values
(for the top border, right border, bottom border, and the left
border).

CSS Border Color
 The border-color property is used to set the color
of the four borders.
 The border-color property can have from one to
four values (for the top border, right border,
bottom border, and the left border).

CSS Border - Shorthand Property
 The border property is a shorthand property
for the following individual border properties:
 border-width
 border-style (required)
 border-color

 p{
border: 5px solid red;
}
CSS Text

 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)"
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.
 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):
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:
 <style>
 a{
 text-decoration: none;
 }
 </style>

Note: this removes underline from the links.


CSS Fonts
 The CSS font properties define the font family,
boldness, size, and the style of a text.
 Difference Between Serif and Sans-serif Fonts
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, and so on.
 <style>
 p.serif {
 font-family: "Times New Roman", Times, serif;
 }

 p.sansserif {
 font-family: Arial, Helvetica, sans-serif;
 }
Font Style
 The font-style property is mostly used to
specify italic text.
 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)
Font Size
 The font-size property sets the size of the
text.
 h1 {
font-size: 40px;
}

h2 {
font-size: 30px;
}

p{
font-size: 14px;
}
CSS Lists
 Different List Item Markers
 The list-style-type property specifies the type of list
item marker.
 ul.a {
list-style-type: circle;
}

ul.b {
list-style-type: square;
}

ol.c {
list-style-type: upper-roman;
}

ol.d {
list-style-type: lower-alpha;
}
CSS Tables
 Table Borders
 To specify table borders in CSS, use
the border property.
 The example below specifies a black border for
<table>, <th>, and <td> elements:
 <style>
 table, th, td {
 border: 1px solid black;
 }
CSS Tables
 Collapse Table Borders
 The border-collapse property sets whether the
table borders should be collapsed into a single
border:
 table {
border-collapse: collapse;
}

table, th, td {
border: 1px solid black;
}
CSS Tables
 Table Width and Height
 Width and height of a table are defined by
the width and height properties.
 The example below sets the width of the table to
100%, and the height of the <th> elements to
50px:
 table {
width: 100%;
}

th {
height: 50px;
}
Horizontal Alignment
 The text-align property sets the horizontal
alignment (like left, right, or center) of the
content in <th> or <td>.
 By default, the content of <th> elements are
center-aligned and the content of <td>
elements are left-aligned.
 The following example left-aligns the text in
<th> elements:

 th {
text-align: left;
}
Table Padding

 To control the space between the border and


the content in a table, use
the padding property on <td> and <th>
elements:

th, td {
padding: 15px;
text-align: left;
}
Hoverable Table
 Use the :hover selector on <tr> to highlight
table rows on mouse over:
 tr:hover {background-color: #f5f5f5;}

Table Color
 The example below specifies the background color
and text color of <th> elements:
 th {
background-color: #4CAF50;
color: white;
}
The CSS Box Model
 All HTML elements can be considered as boxes. In
CSS, the term "box model" is used when talking
about design and layout.

 The CSS box model is essentially a box that wraps


around every HTML element. It consists of:
margins, borders, padding, and the actual
content. The image below illustrates the box
model:
The CSS Box Model

Explanation of the different parts:


Content - The content of the box, where text and images
appear
Padding - Clears an area around the content. The padding
is transparent
Border - A border that goes around the padding and
content
Margin - Clears an area outside the border. The margin is
transparent
CSS Layout - The display Property
 The display property is the most important
CSS property for controlling layout.
 The display property specifies if/how an
element is displayed.
 Every HTML element has a default display
value depending on what type of element it is.
The default display value for most elements
is block or inline.
Block-level Elements

 A block-level element always starts on a new line


and takes up the full width available (stretches out
to the left and right as far as it can).
 The <div> element is a block-level element.
 Examples of block-level elements:
 <div>
 <h1> - <h6>
 <p>
 <form>
 <header>
 <footer>
 <section>
Inline Elements

 An inline element does not start on a new line


and only takes up as much width as
necessary.
 This is an inline <span> element inside a
paragraph.
 Examples of inline elements:
 <span>
 <a>
 <img>
Display: none
 display: none; is commonly used with
JavaScript to hide and show elements without
deleting and recreating them. Take a look at
our last example on this page if you want to
know how this can be achieved.
 The <script> element uses display: none; as
default.

 h1{
 display:none;
}
CSS 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).

 Padding - Individual Sides


 CSS has properties for specifying the padding for each
side of an element:
 padding-top
 padding-right
 padding-bottom
 padding-left
Css Padding
 <style>
 div {
 border: 1px solid black;
 background-color: lightblue;
 padding-top: 50px;
 padding-right: 30px;
 padding-bottom: 50px;
 padding-left: 80px;
 }
 </style>
CSS 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
 <style>
 div {
 border: 1px solid black;
 margin-top: 100px;
 margin-bottom: 100px;
 margin-right: 150px;
 margin-left: 200px;
 background-color: lightblue;
 }
 </style>
CSS position Property

 The position property specifies the type of


positioning method used for an element.
 The position property specifies the type of
positioning method used for an element
(static, relative, absolute, fixed, or sticky).
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:
 Eg: This <div> element has position: static;
 div.static {
position: static;
border: 3px solid #73AD21;
}
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. Other
content will not be adjusted to fit into any gap left
by the element.
 Eg:
 div.relative {
position: relative;
left: 30px;
border: 3px solid #73AD21;
}
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.
 A fixed element does not leave a gap in the page
where it would normally have been located.
 div.fixed {
position: fixed;
bottom: 0;
right: 0;
width: 300px;
border: 3px solid #73AD21;
}
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.
 Note: A "positioned" element is one whose
position is anything except static.
position: absolute;
 div.relative {
position: relative;
width: 400px;
height: 200px;
border: 3px solid #73AD21;
}

div.absolute {
position: absolute;
top: 80px;
right: 0;
width: 200px;
height: 100px;
border: 3px solid #73AD21;
}
position: sticky;

 An element with position: sticky; is positioned


based on the user's scroll position.
 A sticky element toggles
between relative and fixed, depending on the
scroll position. It is positioned relative until a
given offset position is met in the viewport -
then it "sticks" in place (like position:fixed).
CSS Layout - float

 With CSS float, an element can be pushed to the left or


right, allowing other elements to wrap around it. Float is
very often used for images, but it is also useful when
working with layouts.
 How Elements Float
 Elements are floated horizontally; this means that an
element can only be floated left or right, not up or
down. A floated element will move as far to the left
or right as it can.
 Usually this means all the way to the left or right of the
containing element. The elements after the floating
element will flow around it. The elements before the
floating element will not be affected. If an image is
floated to the right, a following text flows around it, to
the left.
 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
 inherit - The element inherits the float value of
its parent
 In its simplest use, the float property can be
used to wrap text around images.
CSS box-shadow Property

 The box-shadow property attaches one or


more shadows to an element.
 #example1 {
box-shadow: 5px 10px;
}

#example2 {
box-shadow: 5px 10px #888888;
}
CSS text-shadow Property

 The text-shadow property adds shadow to


text.
 h1 {
text-shadow: 2px 2px #ff0000;
}
What is Responsive Web Design?

 Responsive Web Design is about using HTML


and CSS to automatically resize, hide, shrink,
or enlarge, a website, to make it look good on
all devices (desktops, tablets, and phones):
 Web pages can be viewed using many
different devices: desktops, tablets, and
phones. Your web page should look good, and
be easy to use, regardless of the device.
 Web pages should not leave out information
to fit smaller devices, but rather adapt its
content to fit any device:
 Eg:
https://www.w3schools.com/css/tryit.asp?filen
ame=tryresponsive_col-s
Responsive Web Design - Media Queries

 What is a Media Query?


 Media query is a CSS technique introduced in CSS3.
 It uses the @media rule to include a block of CSS properties only
if a certain condition is true.
 <style>
 body {
 background-color: lightgreen;
 }

 @media only screen and (max-width: 600px) {


 body {
 background-color: lightblue;
 }
 }
 </style>
Bootstrap Get Started

 What is Bootstrap?
 Bootstrap is a free front-end framework for
faster and easier web development
 Bootstrap includes HTML and CSS based
design templates for typography, forms,
buttons, tables, navigation, modals, image
carousels and many other, as well as optional
JavaScript plugins
 Bootstrap also gives you the ability to easily
create responsive designs
Why Use Bootstrap?

 Advantages of Bootstrap:
 Easy to use: Anybody with just basic
knowledge of HTML and CSS can start using
Bootstrap
 Responsive features: Bootstrap's
responsive CSS adjusts to phones, tablets,
and desktops
 Mobile-first approach: In Bootstrap 3,
mobile-first styles are part of the core
framework
 Browser compatibility: Bootstrap is
compatible with all modern browsers (Chrome,
Firefox, Internet Explorer, Edge, Safari, and

You might also like