CSS

6 April 2022 www.snipe.co.in 1
SNIPE TEAM
01/12/2017

4/6/2022
3
CONTENTS
CONTENTS:
• Introduction
• CSS Selector
• CSS Style
• CSS Background
• CSS Border
• CSS Display
• CSS Float
• CSS Font
• CSS Text
• CSS Button
• CSS Table
• CSS Form

• CSS is the language we use to style a Web page.
• CSS stands for Cascading Style Sheets.
• CSS describes how HTML elements are to be displayed on screen, paper, or in other
media.
• External stylesheets are stored in CSS files.
• CSS saves a lot of work. It can control the layout of multiple web pages all at once.
• You can add new look to your HTML
• Define the styles for webpages, design, layout and variations of display on devices
4/6/2022 4

• Håkon Wium Lie (born July 16, 1965) is a Norwegian web pioneer, a standards
activist, and the Chief Technology Officer of Opera Software from 1998.
• He is best known for developing Cascading Style Sheets (CSS) while working with Tim
Berners-Lee and Robert Cailliau at CERN in 1994
4/6/2022 5
Selector{ property : value; }
{ color : blue, font-size : 12px ; }
h1
Declaration
Declaration
Selector
Property value Property value

• 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 Universal Selector
• CSS Class Selector
• CSS Group Selector
4/6/2022 6

• CSS Element Selector
– The element selector selects HTML elements based on the element name.
p {
text-align: center;
color: red;
}
• CSS Id Selector
– The id selector selects the id attribute of an HTML element to select a specific element.
– An id is always unique within the page so it is chosen to select a single, unique element.
– It is written with the hash character (#), followed by the id of the element.
#para1 {
text-align: center;
color: red;
}
4/6/2022 7

• CSS Universal Selector
– The universal selector (*) selects all HTML elements on the page.
* {
text-align: center;
color: blue;
}
• CSS Class Selector
– 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.
.center {
text-align: center;
color: red;
}
4/6/2022 8

CSS Group Selector
– The grouping selector is used to select all the elements with the same style definitions.
– Grouping selector is used to minimize the code. Commas are used to separate each selector in
grouping.
* {
text-align: center;
color: blue;
}
h1, h2, p {
text-align: center;
color: red;
}
4/6/2022 9

CSS is added to HTML pages to format the document according to information in the style
sheet.
There are three ways to insert CSS in HTML documents.
• Inline CSS
• Internal CSS
• External CSS
4/6/2022 10

• 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
styles are defined within the "style" attribute of the relevant element:
<p style=“color:red”>welcome to css</p>
4/6/2022 11

• An Internal CSS is used to apply CSS on a single document or page. It can affect all the
elements of the page.
• It is written inside the style tag within head section of html.
• Example
• Internal styles are defined within the <style> element, inside the <head> section of an
HTML page:
<style>
p{ color:red}
</style>
4/6/2022 12

• An 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.
Example: p{color:red}
You need to link this style.css file to your html pages like this:
<link rel=“stylesheet” type=“text/css” href=“style.css”>
The link tag must be used inside head section of html.
4/6/2022 13

• CSS comments are generally written to explain your code. It is very helpful for the
users who reads your code so that they can easily understand the code.
• Comments are ignored by browsers.
• Comments are single or multiple lines statement and written within /*............*/ .
Example
For Single line comment
/* This is a single-line comment */
For Multi-line comment
/* This is
a multi-line
comment */
4/6/2022 14

CSS background property is used to define the background effects on element. There are
5 CSS background properties that affects the HTML elements:
• background-color
• background-image
• background-repeat
• background-attachment
• background-position
4/6/2022 15

CSS background-color
• The background-color property is used to specify the background color of the element.
h1 , div {
background-color: green;
}
CSS background-image
• The background-image property is used to set an image as a background of an element.
By default the image covers the entire element.
body {
background-image: url(“img.jpg");
}
4/6/2022 16

CSS background-repeat
• By default, the background-image property repeats the background image horizontally
and vertically. Some images are repeated only horizontally or vertically.
• The background looks better if the image repeated horizontally only.
body {
background-image: url(“img_bg.png");
background-repeat: repeat-x;
}
CSS background-attachment
• The background-attachment property is used to specify if the background image is fixed
or scroll with the rest of the page in browser window.
• If you set fixed the background image then the image will not move during scrolling in
the browser.
4/6/2022 17

body {
background-image: url("img_tree.png");
background-repeat: no-repeat;
background-position: right top;
margin-right: 200px;
background-attachment: fixed; or background-attachment:scroll
}
CSS background shorthand
• The it is also possible to specify all the background properties in one single property.
This is called a shorthand property.
body {
background-color: #ffffff;
background-image: url("img_tree.png");
background-position: right top;
}
body {
background: #ffffff url("img_tree.png") no-repeat right top;
}
4/6/2022 18

• The CSS border is a shorthand property used to set the border on an element.
• The CSS border properties are use to specify the style, color and size of the border of
an element.
The CSS border properties are given below
• border-style
• border-color
• border-width
• border-radius
4/6/2022 19

• The Border style property is used to specify the border type which you want to display
the web page.
• There are some border style values which are used with border-style property to define
border
<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>
4/6/2022 20
<p class="dotted">A dotted border.</p>
<p class="dashed">A dashed border.</p>
<p class="solid">A solid border.</p>
<p class="double">A double border.</p>
<p class="groove">A groove border.</p>
<p class="ridge">A ridge border.</p>
<p class="inset">An inset border.</p>
<p class="outset">An outset border.</p>
<p class="none">No border.</p>
<p class="hidden">A hidden border.</p>
<p class="mix">A mixed border.</p>

• The border-width property is used to set the border's width. It is set in pixels. You can al
use the one of the three pre-defined values, thin, medium or thick to set the width of the
border a border
<style>
p.one {
border-style: solid;
border-width: 5px;
}
p.two {
border-width: medium;
}
</style>
4/6/2022 21
<p class="one">Some text.</p>
<p class="two">Some text.</p>

There are three methods to set the color of the border.
• Name: It specifies the color name. For example: "red".
• RGB: It specifies the RGB value of the color. For example: "rgb (255,0,0)".
• Hex: It specifies the hex value of the color. For example: "#ff0000".
• There is also a border color named "transparent". If the border color is not set it is
inherited from the color property of the element.
•
<style>
p.one {
border-color: 5px;
}
</style>
4/6/2022 22
<p class="one">A solid multicolor border</p>

There shorthand representations
p {
border: 5px solid red;
}
<p>This property is a shorthand property for border-width, border-style, and border-color.</p>
4/6/2022 23

• CSS display is the most important property of CSS which is used to control the layout of
the element. It specifies how the element is displayed.
• Every element has a default display value according to its nature. Every element on the
webpage is a rectangular box and the CSS property defines the behavior of that rectangu
box.
CSS display values
There are following CSS display values which are commonly used.
• display: inline;
• display: block;
4/6/2022 24

• The CSS float property is a positioning property. It is used to push an element to the left
right, allowing other element to wrap around it. It is generally used with images and layout
How it works
• Elements are floated only horizontally. So it is possible only to float elements left or right, not up or down.
• A floated element may be moved as far to the left or the right as possible. Simply, it means that a floated
element can display at extreme left or extreme right.
• The elements after the floating element will flow around it.
• The elements before the floating element will not be affected.
• If the image floated to the right, the texts flow around it, to the left and if the image floated to the left, the
text flows around it, to the right.
img {
float: LEFT;
}
4/6/2022 25

• The CSS Font property is used to control the look of texts. By the use of CSS font property you ca
change the text size, color, style and more. bold or underlined.
• These are some important font attributes:
• CSS Font color: This property is used to change the color of the text. (standalone attribute)
• CSS Font family: This property is used to change the face of the font.
• CSS Font size: This property is used to increase or decrease the size of the font.
• CSS Font style: This property is used to make the font bold, italic or oblique.
• CSS Font variant: This property creates a small-caps effect.
• CSS Font weight: This property is used to increase or decrease the boldness and lightness of the font.
4/6/2022 26
•font-style
•font-variant
•font-weight
•font-size/line-height
•font-family
•font: italic bold 12px/30px Georgia, serif;

• The Web safe fonts are fonts that are universally installed across all browsers and devices..
• The following list are the best web safe fonts for HTML and CSS:
• Arial (sans-serif)
• Verdana (sans-serif)
• Helvetica (sans-serif)
• Tahoma (sans-serif)
• Trebuchet MS (sans-serif)
• Times New Roman (serif)
• Georgia (serif)
• Garamond (serif)
• Courier New (monospace)
• Brush Script MT (cursive)
4/6/2022 27

• CSS has a lot of properties for formatting text.
div {
background-color: blue;
color: white;
}
h2 {
text-align: left;
}
p.uppercase {
text-transform: uppercase;
}
p {
text-indent: 50px;
}
• <p class="uppercase">This text is transformed to uppercase.</p>
4/6/2022 28

• We can apply style on HTML tables for better look and feel. There are some CSS properties that a
widely used in designing table using CSS:
– border
– border-collapse
– padding
– width
– height
– text-align
– color
4/6/2022 29

table, td, th {
border: 1px solid black;
}
table {
border-collapse: collapse;
width: 100%;
}
th {
height: 70px;
}
td {
text-align: center;
}
th, td {
padding: 10px;
}
4/6/2022 30
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Savings</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
<td>$100</td>
</tr>
</table>

• The HTML Form generally look and feel can be improved .
4/6/2022 31
•input[type=text] - will only select text fields
•input[type=password] - will only select password fields
•input[type=number] - will only select number fields
•input[type=text] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
}
input[type=text] {
width: 100%;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
font-size: 16px;
background-color: white;
background-image: url('searchicon.png');
background-position: 10px 10px;
padding: 12px 20px 12px 40px;
}

CSS

More Related Content

CSS