Scribd
Upload
69 views

CSS Presentation

CSS (Cascading Style Sheets) allows you to style and lay out web pages. CSS describes how HTML elements are displayed on screen, paper, or in other media. CSS properties allow control over text formatting, page layout, and other visual aspects without needing HTML. CSS rules consist of a selector and a declaration block. The selector points to the HTML element you want to style, and the declaration block contains one or more declarations separated by semicolons. Each declaration includes a property name and a value separated by a colon.

Uploaded by

SayidAli Cadceed Muhumed
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
69 views

CSS Presentation

CSS (Cascading Style Sheets) allows you to style and lay out web pages. CSS describes how HTML elements are displayed on screen, paper, or in other media. CSS properties allow control over text formatting, page layout, and other visual aspects without needing HTML. CSS rules consist of a selector and a declaration block. The selector points to the HTML element you want to style, and the declaration block contains one or more declarations separated by semicolons. Each declaration includes a property name and a value separated by a colon.

Uploaded by

SayidAli Cadceed Muhumed
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 34

Cascading Style sheet

What is CSS?

 CSS stands for Cascading Style Sheets


 Cascading: refers to the procedure that determines which style will apply to a certain
 section, if you have more than one style rule.
 Style: how you want a certain part of your page to look. You can set things like color,
 margins, font, etc for things like tables, paragraphs, and headings.
 Sheets: the “sheets” are like templates, or a set of rules, for determining how the
webpage
 will look.
 CSS describes how html elements are to be displayed on the screen, paper, or
in other media.
History

 CSS1 was the first edition introduced in 1996.


 CSS2 was published in 1998 and provides enhancement over CSS1.
 CSS2.1 was the last was the last 2nd generation of CSS.
 CSS3 is the latest edition. Several new functionalities have been provided
through CSS3.
 Functions like rounded corners, background decoration, box shadows, which
are demonstrated in the subsequent sections, are introduced in this version.
Advantages

 A web application will contains hundreds of web pages, which are created
using HTML.
 Formatting these HTML pages will be a laborious process, as formatting
elements need to be applied to each and every page.
 CSS saves lots of work as we can change the appearance and layout of all the
web pages by editing just one single CSS file.
CSS Syntax Rules

 Rule have two parts - Selector and declaration.


 Selector: The HTML element you want to add style to.
 <p> <h1> <table> etc.
 Declaration: The statement of style for that element. Made up of property
and value.
CSS Style Example

 Selector - I want the text color of my paragraph to be red and the


background color to be black.
CSS Selectors

 CSS selectors allow you to select and manipulate HTML elements based on
their id, class, type, attribute, and more.
 Examples –
 Declaring CSS Rule For a Class Attribute
 The HTML
 <a class = “pdf” href=“Book.pdf”>Book</a>

 The CSS
 .pdf { background: url(images/pdf.gif) no-repeat left 50%;}

 Use a period when writing a rule for a class


CSS Selectors (Cont.)

 Declaring CSS rule for Id attribute


 The HTML
 <div Id= “ wrapper” > main content</div>
 The CSS
 #wrapper { width:250px; margin:0 auto;}
 Use a pound sign when writing a rule for Id

 Declaring a CSS Rule for a Elements Attribute


 It will style all the content of that element which you are selecting.
 The HTML
 <p> Welcome to the CSS </p>
 <p> <b><i> learn CSS in one day </i></b></p>
 The CSS
 p {text-align: center; color: blue;}
CSS Selectors (Cont.)
 Grouping Selectors
 You can group all the selectors of same style to minimize the code. The selectors should
be separated with comma.
 Example
 H2 {text-align: center; color: red; }
 p {text-align: center; color: red;}
 Grouped Selectors
 h2,p {text-align: center; color: red; }
Inserting a Style Sheet
 You can do in three different ways-
 1. External Style Sheet
 Styles are specified in an external CSS file. you can change the looks of entire website by using
single external style sheet.
 E.g.: <head> <link rel="stylesheet" type="text/css" href=“ex1.css” /> </head>
 2. Internal Style Sheet
 To Appy specific styles to a single HTML file inside the head section of an HTML page.
 E.g.: <style> p { text-align:left; font-size:24px; } </style>
 3. Inline Styles
 Styles are specified inside an HTML tag/element.
 E.g.: <p style="font-family:Algerian; font-size:28px;"> Demo of Inline Style </p>
Inserting a Style Sheet

 Multiple Style Sheets – It can be referenced inside an HTML document.


 The questions is, what styles will be applicable when there is more than one style specified?
 All styles cascade into a new virtual style sheet by applying the
 following rules, where the higher number has the greater priority:
 1. Browser default.
 2. External Stylesheet.
 3. Internal Stylesheet (styles defined in head section).
 4. Inline Style (styles defined in an HTML element).
Formatting with CSS Properties

 CSS Background
 We can use CSS Background properties to define the background effects of an element.
 The following properties can be used for background effects :
 a. background-color
 b. background-image
 c. background-repeat
 d. background-position
Formatting with CSS Properties

 CSS Background Image


 You can use an image as the background for an element using background-image property.
 Example
body{
background-image:url(‘java.png’);
}
 By default, the image is repeated, both horizontally and vertically, so as to cover the entire
body (or the element on which it is applied).
Formatting with CSS Properties

 CSS Background Color


 The background-color property is used to specify the background color of an element.
 Example
body{
background-color:darkblue;
}
 Similarly, we can specify the background for any element (wherever applicable).
p{
background-color:orange;
}
Formatting with CSS Properties

 CSS Background Position


 If the background image disturbs the text, i.e. if the text cannot be read clearly due to
 the image in the background, we can set the position of the background image.
Example
body{
background-image:url(“snapdeal.jpg");
background-repeat:no-repeat;
background-position:right top;
 }
Formatting with CSS Properties
 CSS Background Shorthand
 You can also specify all the properties in a single property.
 This property is known as shorthand property.
 For specifying shorthand property, you just need to use background.
 Example
body{
background:cyan url(‘snapdeal.jpg') no-repeat right top;
}
Formatting with CSS Properties

 Text Formatting
 The following properties can be used for formatting text :
1. Text Color
2. Text Alignment
3. Text Decoration
4. Text Transformation
5. Text Indentation
Formatting with CSS Properties

 Text Alignment
 We can either align the text to the left, right, center or we can make it justified.
 Example
p{ text-align:left; }
h1{text-align:center;}
 Text Color
 The color property is used to set the color of text.
 Example
body{ color:blue;}
p1 {color:magenta;}
Formatting with CSS Properties

 Text Decoration
 You can use text-decoration property to set or remove decorations from text.
 Example
p{text-decoration:overline;}
p {text-decoration:line-through;}
p {text-decoration:underline;}
 Text Transformation
 You can use text-transform property to specify uppercase and lowercase letters of any text.
 Example
h1{text-transform:uppercase;}
h2 {text-transform:lowercase;}
p {text-transform:capitalize;}
Formatting with CSS Properties

 CSS Font
 CSS font properties are used to define the font family, size, style and boldness of the text.
 In CSS, there are two types of font family names:
 generic family - a group of font families with a similar look (like "Serif" or
"Monospace").
 font family - a specific font family (like "Times New Roman" or "Arial").

 Comments in CSS
 /* comment */ - This is comment used in CSS.
Formatting with CSS Properties

 CSS Font Family


 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.
 Example :
 p { font-family:”Arial”, Times, “Sans-serif ”;}
 CSS Font Style
 You can use the property font-style to specify mostly italic text. It has three values –
 Normal, Italic, Oblique (similar to italic).
Formatting with CSS Properties

 CSS Font Size


 You can use the font-size property to set the size of text. The font-size value can be
 absolute or it can be relative.
 Example
h1
{
font-size: 30px;
}
p{
font-size: 14px;
}
Formatting with CSS Properties

 CSS Font Size with em (Relative Size)


 You may face resizing problems, when you use older versions of browsers.
 To avoid such problems, you can use set font size using em, instead of pixels.
 The em size unit is a W3C recommendation.1 em is equal to the current font size.
 The default text size is 16 px. So, the default size of 1 em is 16 px.
 Example
h2 {
font-size: 1.875em; /* 30px/16=1.875em */
}
Formatting with CSS Properties

 CSS Links
 You can use CSS styles to style any link. Links can be
 styled in different ways by using any CSS property like color, font-family etc.
 Links can be in one of the following states :
 a: link – Unvisited link
 a: visited – A link that the user has visited
 a: hover – A link over which the mouse pointer is moving
 a: active – A link, which has been just clicked
 Links can be styled according to their states.
Formatting with CSS Properties
 CSS Links
Formatting with CSS Properties

 CSS List
 You can use CSS list properties for
 Setting different list item markers for ordered lists
 Setting different list item markers for unordered lists
 Set an image as the list item marker
 Values-
 list-style-type
 list-style-image
Formatting with CSS Properties
 Box Model : Introduction
 Box model is useful for designing the layout of an HTML Page.
 CSS Box model describes a box that wraps around HTML elements.
 Using this model, we can define the margins, borders, padding and the actual
content. We
 can place border around elements and space elements in relation to each
other.
Formatting with CSS Properties
 CSS Padding
 You can use the CSS padding properties to define the space between the element border
 and the element content. It is possible to change the top, right, bottom and
 left padding independently using separate properties.
 You can also use a shorthand padding property to change all paddings in a single statement.
 Individual padding properties can be specified as follows :
 padding-top:20px;
 padding-bottom:30px;
 padding-right:25px;
 padding-left:10px;
 In shorthand-
 padding: 20px 30px 25px 10px;
Formatting with CSS Properties

 CSS Border
 You can use the CSS Border properties to specify
 the style and color of an element’s border.
 Values
 border-style
 border-width
 border-color
Formatting with CSS Properties
 CSS Margin
 Using CSS Margin properties you can specify the space around elements.
 Values:
 margin-top:50px;
 margin-bottom:30px;
 margin-right:25px;
 margin-left:10px;
 In shorthand
 margin:
 50px 30px 25px 10px;
CSS Icons

 How to add Icons


 The simplest way to add an icon to your html page , is with icon library, such as
Font Awesome.
 Add the name of the specified icon class to any inline html element (like <i> or
<span>).
 All the icons in the icon library below are scalable vectors that can be customized
with CSS(size,color,shadow,etc.).
 Font AweSome Icons
 To use font AweSome icons Add the following line insdie the <head> section of
your HTML page.
 <link rel=“stylesheet” href=https://cdnjs.cloudflare.com/ajax/libs/font-
awesome/4.7.0/css/font-awesome.min.css>
 Note no downloading or installation is required.
CSS Outline

 The CSS outline properties specify the style, color, and width of an outline.
 An outline is a line that is drawn around elements (outside the borders) to make the
element "stand out".
 However, the outline property is different from the border property - The outline is
NOT a part of an element's dimensions; the element's total width and height is not
affected by the width of the outline.
 This element has a thin black border and an outline that is 10px wide and green.
Outline Style
 The outline-style property specifies the style of the outline.
 The outline-style property can have one of the following values:
 dotted - Defines a dotted outline
 dashed - Defines a dashed outline
 solid - Defines a solid outline
 double - Defines a double outline
 groove - Defines a 3D grooved outline. The effect depends on the outline-color value
 ridge - Defines a 3D ridged outline. The effect depends on the outline-color value
 inset - Defines a 3D inset outline. The effect depends on the outline-color value
 outset - Defines a 3D outset outline. The effect depends on the outline-color value
 none - Defines no outline
 hidden - Defines a hidden outline
Cont…
 The following example first sets a thin black border around each <p> element, then it shows the different
outline-style values:
 Example
p{
border: 1px solid black;
outline-color: red;
}

 p.dotted {outline-style: dotted;}


 p.dashed {outline-style: dashed;}
 p.solid {outline-style: solid;}
 p.double {outline-style: double;}
 p.groove {outline-style: groove;}
 p.ridge {outline-style: ridge;}
 p.inset {outline-style: inset;}
 p.outset {outline-style: outset;}

You might also like