Scribd
Upload
22 views

What Is CSS?

Computer

Uploaded by

rudramandal2500
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
22 views

What Is CSS?

Computer

Uploaded by

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

WHAT IS CSS?

 CSS stands for cascading style sheet.


 CSS is style sheet language use describe the
presentation of an HTML document
 CSS describe how elements should be
rendered on screen.
why use CSS?

 CSS defines styles of your web pages including


design, layout and variations in display across
devices and screen sizes.
 CSS can save you a lot of work. An external
 Style sheet saved as .css can be used to style multiple
web page all at once!
CSS Example
Body {
{ Background-color: black;
}
P{
Font-size: 20px;
Color: gold;
}
CSS Syntax
A CSS ruleset /rule is composed of selector and a declaration block.
Div {
Background –color: black ;
Width: 200px;
Height: 200px;
}
The selector or a group of selector targets the elements we wont to style.
Div{
Background – color: black;
Width : 200px;
Height: 200px ;
}
The declaration blocks are grouped in blocks.
Each declaration block contains CSS declarations which
are wrapped by an opening curly brace { and a closing
curly brace } .
Div {
Background – color : black
Width: 200px;
Height: 200px;
}
 CSS declarations or declarations are contained inside a
declaration block. Each declaration has to be
separated by a semicolon ; otherwise the codes won’t
work. It is allowed not to put a semicolon in the last
declaration.
Div {
Background – color : black
Width: 200px;
Height: 200px;
}
CSS SELECTOR
 Element selector
 Class selector
 ID Selector
 Grouping selectors
 It is the simplest way to target all elements of
a given type.
H1{
Font-weight: bold;
}
P{
Color: green;
}
Class selector
 Multiple elements can have the same class values.
 CSS class selectors are very useful when targeting different
elements.
 The class selector consists of a dot(.) followed by a class name.
 A class name is defined as a class attribute.
 Example:
.underlined-text{
Text-decoration: underline;
}
.emboldened-text{
Font-weight: bold;
}
 An HTML element can have multiple class names
separated by white space.
 The example below selects both the <p> elements with
the class text-decoration: underlined .
.underline {
Text-decoration: underline;
}
Id selector
The ID selector s very useful when targeting a single element.
An ID selector consists of a hash (#) followed by an ID name.
An ID name is defined using the id attribute.
Example:
#blue{
Background – color : blue;
Width: 200px;
Height: 200px;
}
#red{
Background – color : red;
Width: 200px;
Height: 200px;
}
 We can target only specific html elements with the
given class or id.
 The example below only selects <p> elements with the
class=“red” and ID=“green” attributes.
P.red{
Color: red;
}
P#green{
Color: green;
}
Grouping selectors
 Sometimes multiple CSS rulesets may have similar
declarations. Take a look at the example below:
H1{
Font-family: Times New Roman;
Color: green;
}
p{
Font-family: Times New Roman;
Color: green;
}
 Looks inefficient right? Instead of repeating the same
declarations we can simply have a group of selectors in
a CSS ruleset.
 A group of selectors consists of selectors separated by
commas.
 Example:
H1,p{
Font-family: Times New Roman;
Color: green;
}
CSS Comments
 Comments can be used to explain CSS codes and make it
more readable.
 CSS comments are very useful for people who easily forget
things like me!
 They are not rendered by browsers.
 A CSS comment starts with /* and ends with */.
 Example:
P{
Color: fuchsia;
/*a single line CSS comment*/
}
CSS Inserting
 There are three simple ways to insert CSS into an
HTML document.
❖Internal style sheet
❖External style sheet
❖Inline styling
Internal style sheet
 An internal style sheet is useful when a single HTML document has its unique styles.
 With this, CSS rulesets/rules should be included in the <style> element.
 The <style> element should only be enclosed inside the <head> element.
 For following best practices we can use the type attribute to define the MIME type of the <style> tag.
 The text/css value indicates that the content is CSS.
 Example:
<html>
<head>
<title> write something </title>
<style type=“text/css”>
P{
Color: red;
}
</style>
</head>
<body>
<p> nepal is a beautiful country</p>
</body>
</html>
External style sheet
 An external style sheet can be very useful when multiple HTML pages have the
same styles.
 This can be achieved by having an external style sheet file.
 An external style sheet file must be saved with a .css extension. E.g. filename
.css .
 Then we need to use the <link> element to include the file in our HTML page.
 There should be no <style> element inside a CSS file!
 Example:
 The style.css file contains the following codes.
Body{
Background-color: brown;
}
P{
Color: white;
}
Inline styling
 Inline styling is useful for styling a single element. It is
done by using the style attribute . Its value contains
CSS declarations.
 <p style=“font size: 50px; color: fuchsia;”> I love
nepal</p>
CSS Colors
 CSS colors are commonly specified using the
following:
❑Color name
❑Hexadecimal color value
❑RGB color value
Color name
It defines any valid color by its color name. for example :
white, black etc.
Example:
#color-name{
Color: maroon;
}
Hexadecimal color value
 Also known as hex color value. It defines any valid
color by a hash followed by letters and/or numbers.
E.g. #ffffff, #000000.
 Example
#hex-color{
Color: #808000;
}
RGB color value
 RGB stands for red, green and blue. It defines any valid
color using the rgb() CSS function by this format:
rgb(<number>,<number>,<number>) e.g. rgb(255,255,255),
rgb(0,0,0).
 Note: the <number> value should only be from 0 to 255.
 The number represent the intensity of the red, green and
blue colors in that particular order.
 Example:
 #rgb-color{
 Color: rgb(0,0,255);
CSS Background
 Elements backgrounds can be filled with a color or
image, clipped and/or resized, and otherwise be
modified.
 CSS background properties:
➢ Background-color
➢ Background-image
➢ Background-properties
➢ Background-attachment
➢ Background-repeat
➢ Background-position
Background-color
 We can specify a Background color for an element using the Background-color property.
 The value can be any valid CSS color or CSS3 color.
 Changing the Background color of a whole page:
Body{
Background-color: gold;
}
 Changing the Background color of a whole page:
h1{
Background-color: yellow;
}
p{
Background-color: pink;
}
div{
Background-color: gray;
Width: 200px;
Height: 200px;
}
Background image
 The background-image property set one or more images as
background of an elements.
 The format of its value should be: url(“image.jpg”). Single
quotes and no quotes also work e.g. url(‘image.jpg’) and
url(image.jpg)
 The text contained in the quotes are file paths.
body{
Background-image: url(“images/clouds-bg.jpg”);
}
Note: don’t use any background color or image that will
disturb the text on your webpage. Always keep everything
readable.
Background image repeat
 CSS automatically resets background images horizontally and vertically.
 Take a look at an example below:
body{
Background-image: url(“images/clouds-bg.jpg”);
}
 To only repeat the background image horizontally or vertically we can use the
background-repeat property.
 Horizontally repeating background image.
 Body{
 Background-image: url(“images/clouds-bg.jpg”);
 Background-repeat: repeat-x;
 }
 vertically repeating background image.
 Body{
 Background-image: url(“images/clouds-bg.jpg”);
 Background-repeat: repeat-y;
 }
Background image-no-repeat
 The no-repeat value of the background repeat
property stops a background image from repeating.
Body{
 Background-image: url(“images/clouds-bg.jpg”);
 Background-repeat: no-repeat;
}
Background image-set position
 We can set the initial position of the background image using the
background-position property.
 Valid values:
 Top bottom
 Left
 Right
 Center
 Combination of the ones mentioned above (top and bottom and left
and right can’t be combined)
 <percentage>
 Edge of offset values
 Inherit
 Initial
 Unset
Background attachment
 The background-attachment property sets whether a background
image’s position is fixed within the viewport, or scrolls with its
containing block.
 Valid values
 Scroll: background is fixed relatives to the element itself and does not
scroll with its contents.
 Fixed: background is fixed relatives to the viewport. Even if an element
has a scrolling mechanism, the background doesn’t move with the
element.
 Local: background is fixed relatives to the element’s contents. If the
element has a scrolling mechanism the background scroll with the
element’s contents, and the background painting area and background
positioning area are relative to the scrollable area of the element rather
than to the border framing them.
 Scroll, local
 Local,scroll
Background-shorthand property
 We can specify all the background properties in one
single property using it’s shorthand property.
 The background property is a shorthand for the
following CSS properties:
 Background-color
 Background-image
 Background-attachment
 Background-position
Example:
Body{
Background-color: red;
Background-image: url(“images/titanic.jpg”);
Background-repeat: no-repeat;
Background-attachment: fixed;
Background-position: top right;
}
……can be shortened to:
Body{
Background: red url(“images/titanic.jpg”) no-repeat fixed top
right;
CSS borders
 In CSS, we can decorate borders with lines, make it
square or rounded.
Border style:
the border-style CSS property sets the line style for all
four sides of an element’s border.
Valid values
 None: displays no border
 Hidden: displays no border
 Dotted: displays a series of rounded dots
 Dashed: displays a series of short square ended dashed or line
segments
 Solid: displays a single, straight, solid line
 Double: displays two straight lines
 Groove: displays a border with a carved appearance
 Ridge: displays a border with an extruded appearance
 Inset: displays a border that makes the element appear
embedded
 Outset: displays a border that makes the element appear
embossed
Example:
 P.none { border-style: none; }
 P.hidden { border-style: hidden; }
 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; }
Border width
 We can specify the width of an element’s border using
the border-width CSS property.
Valid values:
 Thin: displays the thin border
 Medium: displays the medium border
 Thick: displays the thick border
 <length>
Example:
 Below is an example of using a <length> value.
Div{
Border-width: 10 px;
Border-style: solid;
Width: 250px;
Height: 250px;
Background: yellow;
}
Border color
 The border-color CSS property defines the color of a border.
Valid value:
<color>
Example:
Div{
Border-style: groove;
Border-width: 5 px;
Border-color: magenta;
Width: 250px;
Height: 250px;
Background: yellow;
}
CSS borders- individual series
 In CSS, we can specify border styles, widths and colors on each side (top, right,
bottom, left).
 We can achieve this by using the following CSS properties.
 Border-top-style
 Border-right-style
 Border-left-style
 Border-bottom-style
 Border-top-width
 Border-right-width
 Border-left-width
 Border-bottom-width
 Border-top-color
 Border-right-color
 Border-left-color
 Border-bottom-color
Changing border style on each side
example:
Div{
Border-top-style: solid;
Border-right-style: dotted;
Border-left-style: groove;
Border-bottom-style: dashed;
Border-width: 5 px;
Border-color: red;
Width: 250px;
Height: 250px;
Background: lightgrey;
}
Changing border width on each
side example:
Div{
Border-top-width: 5px;
Border-right-width: 10px;
Border-left-width: 15px;
Border-bottom-width: 20px;
Border-color: red;
Border style: solid;
Width: 250px;
Height: 250px;
Background: lightgrey;
}
Changing border color on each side
example:
Div{
Border-top-color: blue;
Border-right-color: red;
Border-left-color: gold;
Border-bottom-color: green;
Border-width: 5px;
Border style: solid;
Width: 250px;
Height: 250px;
Background: lightgrey;
}
CSS border-shorthand property
 The border CSS property sets an element’s border. It’s a shorthand for the
following CSS properties:
 Border-width
 Border-style
 Border-properties
 As with all shorthand properties, any omitted sub-values will be set to their
initial sub-values.
 However, in this shorthand property the border-style’s value is required.
 Order does not matter
 Example:
div{
Border: 1px solid black;
Width: 250px;
Height: 250px;
Background: lightgrey;
}
CSS borders-specifying values
 The border-style, border-width and border-color CSS
properties can have one, two, three or four values.
One value
 When one value is specified, it applies the same style, width or color to all four
sides.
Div{
Width: 250px;
Height: 250px;
Background: lightgrey;
Margin: 10px;
}
/* border-style with one value */
#style{
Border-style: dashed;
Border-width: 10px;
Border-color: red;
}
/* border-width with one value */
#width{
Border-style: solid;
Border-width: 10px;
Border-color: red;
}
/* border-color with one value */
#color{
Border-style: dashed;
Border-width: 10px;
Border-color: red;
}
Two value
 When two values are specified, the first styles, widths or colors apply to the top and bottom, the second to the left and right.
Div{
Width: 250px;
Height: 250px;
Background: lightgrey;
Margin: 10px;
}
/* border-style with two values */
#style{
Border-style: dotted dashed;
Border-width: 10px;
Border-color: red;
}
/* border-width with two values */
#width{
Border-style: solid;
Border-width: 10px 15px;
Border-color: red;
}
/* border-color with two values */
#color{
Border-style: dashed;
Border-width: 10px;
Border-color: red green;
}
Three values
 When three values are specified, the first styles, widths or colors apply to the top and bottom, the second to the left and right, the third to the
bottom.
Div{
Width: 250px;
Height: 250px;
Background: lightgrey;
Margin: 10px;
}
/* border-style with three values */
#style{
Border-style: groove dotted dashed;
Border-width: 10px;
Border-color: red;
}
/* border-width with three values */
#width{
Border-style: solid;
Border-width: 10px 15px 10px;
Border-color: red;
}
/* border-color with three values */
#color{
Border-style: dashed;
Border-width: 10px;
Border-color: blue red green;
}
Four values
 When four values are specified, the styles, widths or colors apply to the top right, bottom and left in that ordered (clockwise) respectively.
Div{
Width: 250px;
Height: 250px;
Background: lightgrey;
Margin: 10px;
}
/* border-style with four values */
#style{
Border-style: solid dashed solid dashed;
Border-width: 10px;
Border-color: red;
}
/* border-width with four values */
#width{
Border-style: solid;
Border-width: 5px 10px 15px 20px;
Border-color: red;
}
/* border-color with four values */
#color{
Border-style: dashed;
Border-width: 10px;
Border-color: blue red green gold;
}
 Note: the border property increases elements outer
size except <table> and <td> elements.
 for instance, an element with a width and height of
20px and a border of 5px will have an outer width and
height of 30px (20px width+5px border-left-width+5px
border-right-width=30px outer width).
CSS Margins
 CSS Margins create space around or outside an element.
 CSS Margins-Individual sides
 The following properties set the length of the margin on
each side.
 Margin-top: sets the margin area on top of an element.
 Margin-right: sets the margin area on right side of an
element.
 Margin-bottom: sets the margin area on bottom of an
element.
 Margin-left: sets the margin area on left side of an
element.
Valid values
 <length>
 <Percentage>
 Auto: selects a suitable margin to use. For example, in
certain cases this value can be used to center an element.
 Example:
Div{
Margin-top: 30px;
Margin-left: 90px;
Background: lightgray;
Border: 1px solid red;
}
CSS Margin-Shorthand property
 The margin CSS property is a shorthand for the following properties:
 Margin-top
 Margin-right
 Margin-bottom
 Margin-left
The margin CSS property can have one, two, three or four values.
 When one value is specified, it applies the same margin to all four
sides.
 When two value is specified, the first value applies the top and bottom,
the second to the left and right.
 When three value is specified, the first value applies the top, the
second to the left and right and the third to the bottom.
 When four values are specified, the margins apply to the top, right,
bottom and left in that ordered (clockwise) respecively.
Example:
 One value
#div1 {
Margin: 20px;
}
 two value
#div2 {
Margin: 40px 20px;
}
 three value
#div3 {
Margin: 20px 40px 20px;
}
 four value
#div4 {
Margin: 40px 20px 40px 20px;
}
Horizontally centering an element
 We can center an element by setting the left and right
margins to auto.
Div{
Margin: 0 auto;
Width: 200px;
Height: 200px;
Background: lightgrey;
}
The inherit value
 Since the inherit value is a global value it can work on
almost all of the CSS properties.
 Below is an example of a child element inheriting margin
from its parent element.
Div#parent{
Margin-left: 50px;
Border: 1px solid green;
}
P#children{
Margin-left: inherit;
}
CSS Padding
 CSS Padding creates space within an element. It clears an
area around the inside of an element.
 CSS Padding-Individual sides
 The following properties set the length of the margin on
each side.
 Padding-top: sets the Padding area on top of an element.
 Padding-right: sets the Padding area on right side of an
element.
 Padding-bottom: sets the Padding area on bottom of an
element.
 Padding-left: sets the Padding area on left side of an
element.
Valid values
 <length>
 <Percentage>
Example:
Div{
Padding-top: 30px;
Padding-left: 90px;
Padding-bottom: 70px;
Padding-right: 50px;
Background: lightgrey;
Border: 1px solid red;
}
CSS Padding-shorthand property
 The padding CSS property is a shorthand for the following properties:
 padding -top
 padding -right
 padding -bottom
 padding -left
The padding CSS property can have one, two, three or four values.
 When one value is specified, it applies the same padding to all four
sides.
 When two value is specified, the first value applies the top and bottom,
the second to the left and right.
 When three value is specified, the first value applies the top, the
second to the left and right and the third to the bottom.
 When four values are specified, the padding apply to the top, right,
bottom and left in that ordered (clockwise) respectively.
Example
 One value
#element1 {
padding: 20px;
}
 two value
#element2{
padding : 10px 20px;
}
 three value
#element3 {
padding : 20px 10px 20px;
}
 four value
#element14{
padding : 10px 20px 40px 30px;
}
Padding and width
 The CSS width property only specifies the width of an element’s
content area. It does not include padding, borders and margins.
 Therefore if an element has a specified width and padding they
will be added together.
Example:
Div{
Width: 200px;
Padding: 10px;
/* the actual rendered width of an element is now 220px*/
Background: blue;
Height: 100px;
}
 To keep the width at 200px we need to set the box-sizing
property to the border-box.
 Increasing the padding will now decrease the content space
inside the element.
Example:
Div{
Width: 200px;
Padding: 10px;
Box-sizing: border-box;
/* the actual rendered width of an element is still 200px*/
Background: blue;
Height: 100px;
}
Padding and height
 The CSS height property only specifies the height of an element’s
content area. It does not include padding, borders and margins.
 Therefore if an element has a specified height and padding they
will be added together.
Example:
Div{
height: 200px;
Padding: 10px;
/* the actual rendered height of an element is now 220px*/
Background: blue;
width: 100px;
}
 To keep the height at 200px we need to set the box-sizing
property to the border-box.
 Increasing the padding will now decrease the content space
inside the element.
Example:
Div{
height: 200px;
Padding: 10px;
Box-sizing: border-box;
/* the actual rendered width of an element is still 200px*/
Background: blue;
width: 100px;
}
CSS width and height
 The width and height CSS properties set the width/height of an element.
 By default, these properties define the width/height of the content area/box.
Valid values
 <length>
 <percentage>
 Auto: calculates and selects a width/height for the element.
 Max-content: the intrinsic preferred width
 Min-content: the intrinsic minimum width
 Available: containing block width minus horizontal margin, border and
padding.
 Fit-content: the larger of: the intrinsic minimum width; the smaller of the
intrinsic preferred width and the available width.
Note: the width and height attributes only set the area inside the padding, border
and margin of the element and does not include them.
Example of the width CSS property
#element1{
Width: 200px;
}
#element2{
Width: 5em;
}
#element3{
Width: 75%;
}
#element4{
Width: auto;
}
Example of the height CSS property
#element1{
height : 200px;
}
#element2{
height : 5em;
}
#element3{
height : 75%;
}
#element4{
height : auto;
}
Minimum and maximum width and
height
The following properties define CSS minimum and
maximum widths and heights.
 Min-width: sets the minimum width of an element
 Max-width: sets the maximum width of an element
 Min-height: sets the minimum height of an element
 Max-height: sets the maximum height of an element
Valid values:
<length>
<percentage>
Example of minimum width CSS
property
H1{
Min-width: 500px;
Background: lightblue;
}
Example of maximum width CSS property
p{
Max-width: 250px;
Background: lightgreen;
}
Example of minimum height CSS
property
H1{
Min-height: 500px;
Background: lightblue;
}
Example of maximum height CSS property
p{
Max-height: 250px;
Background: lightgreen;
}
CSS box models
 CSS box model is the foundation of design and layout
of the web.
 It is simply a box or a rectangular box.
In CSS box model, each element is represented as a box
with the following parts or properties:
 Content: also called content box/area; it is the area
where the content of the box is displayed.
 Padding: the space or area between the outer edge of
the document

You might also like