Scribd
Upload
31 views17 pages

WebPHP Unit20 - PDF

The document discusses CSS properties related to fonts, text, backgrounds, and lists. It explains the different CSS properties, their values, and provides examples of how to use them. Inline, internal, and external CSS are described as ways to add CSS to HTML pages.

Uploaded by

kiran23benny
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
31 views17 pages

WebPHP Unit20 - PDF

The document discusses CSS properties related to fonts, text, backgrounds, and lists. It explains the different CSS properties, their values, and provides examples of how to use them. Inline, internal, and external CSS are described as ways to add CSS to HTML pages.

Uploaded by

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

Web Programming using PHP

Unit II CSS
CSS CSS stands for Cascading Style Sheets. It is a style sheet language which is used to describe the
look and formatting of a document written in markup language. CSS is used along with HTML and
JavaScript in most websites to create user interfaces for web applications and for many mobile
applications.

• Selector : points to the HTML element to style


• Declaration block (in curly braces) : contains one or more declarations separated by semicolons.
• Each declaration includes a CSS property name and a value, separated by a colon.

NSS College Rajakumari, Dept. of Computer Applications 1


Web Programming using PHP
Unit II Adding CSS to HTML in 3 ways
CSS
Inline CSS Internal CSS External CSS
used to apply a unique used to define a style for a used to define the style for
style to a single HTML single HTML page, defined many HTML pages, by
element, using HTML in HTML <head> section adding a link in the <head>
style attribute using <style> element section of HTML page.

No HTML
Tags

Appearance of an entire
Inline style(1) has the highest web site can be
priority, and will override changed with a change styles.css
external(2) and internal(3) in external style sheet,
styles (both in head section) which is separately
and browser defaults. saved in .css extension.
2
an exception...? NSS College Rajakumari, Dept. of Computer Applications
Web Programming using PHP
Unit II
CSS CSS Properties - Fonts
The CSS font properties defines the font family, boldness, size, and the style of a text.
Properties Values
font-style normal, italic, oblique
font-variant normal, small-caps
font-weight normal, bold, bolder, lighter, 100, 200….900
xx-small, x-small, small, medium, large, x-large, xx-large,smaller, larger, size
font-size
in pixels or in %
line-height normal,number,length in px, %
font-family any font family eg. Arial, Helvetica, and ends with generic family

The font CSS property is a shorthand property which sets the style, variant, boldness, size/line-height,
and the font family for an element's text content in a single declaration.
font : font-style font-variant font-weight font-size/line-
height font-family|caption|icon|menu|message-
box|small-caption|status-bar|initial|inherit;
NSS College Rajakumari, Dept. of Computer Applications 3
Web Programming using PHP
Unit II
CSS CSS Properties – Fonts example

Individual assignment

Shorthand property

NSS College Rajakumari, Dept. of Computer Applications 4


Web Programming using PHP
Unit II
CSS CSS Properties - Text
Text in HTML content can be styled with some text formatting properties.
Properties Values
color to set the color of the text, values in name, HEX, RGB( )
direction specifies the writing direction within a block-level element, ltr(left-to-right)-default, rtl(right-to-left)
letter-
increase or decrease(negative values) the space between characters in a text. normal-default, length in pixel
spacing
word-spacing increase or decrease(negative values) the space between words. normal-default, length (px, pt, cm, em, etc)
specifies the indentation of the first line in a text-block. The first line will be indented to left if the value is negative.
text-intend
length (0-default,px, pt, cm, em, etc) , %
text-align specifies the horizontal alignment of text in an element. left, right, center, justify
specifies the decoration added to text, and is a shorthand property for
text-
text-decoration-line (required)(underline, overline, line-through), text-decoration-color, text-decoration-style(solid,
decoration
wavy, dotted, dashed, double)
text- controls the capitalization of text. none-default(text as it is), capitalize(First Character Of Each Word Capital),
transform uppercase(all), lowercase(all).
white-space specifies how white-space inside an element is handled. normal, nowrap, pre, pre-line, pre-wrap
NSS College Rajakumari, Dept. of Computer Applications 5
Web Programming using PHP
Unit II
CSS CSS Properties – Text example

NSS College Rajakumari, Dept. of Computer Applications 6


Web Programming using PHP
Unit II CSS Properties – Background
CSS
The CSS background properties are used to define the background effects for elements.
Properties Values
background sets the shorthand property for the following
background-
specifies the background color. color, transparent(default) CSS color values
color
sets one or more background images for an element. By default, a background-image is placed at the top-left
background- corner of an element, and repeated both vertically and horizontally. Background of an element is the total size
image of the element, including padding and border (but not the margin). url(), none(default), linear-gradient, radial-
gradiant, repeating-linear-gradient, repeating-radial-gradiant
sets the starting position of a background image. left top, left center, left bottom, right top, right center, right
background-
bottom, center top, center center, center bottom [with one keyword, the other value will be "center“], x% y%,
position
xpos ypos.
background- specifies the size of the background images. auto(original size), length(width and height), percentage(width
size and height in %), cover, contain.
background- sets if/how a background image will be repeated. repeat(default-horz & vert), repeat-x, repeat-y, no-repeat,
repeat space, round.
background- specifies the origin position (the background positioning area) of a background image. padding-box(default),
origin border-box, content-box
NSS College Rajakumari, Dept. of Computer Applications 7
Web Programming using PHP
Unit II CSS Properties – Background cont...
CSS
Properties Values
background- defines how far the background (color or image) should extend within an element. border-box(default),
clip padding-box, content-box.
background-
sets whether a background image scrolls with the rest of the page, or is fixed. scroll(default), fixed, local.
attachment

shorthand

background-color url

background-repeat

background-attachment

background-position

NSS College Rajakumari, Dept. of Computer Applications 8


Web Programming using PHP
Unit II CSS Properties – Lists
CSS The two types of HTML lists (<ul>, <ol>) can be styled with CSS.
Properties Values
list-style sets the shorthand property for the following
list-style- the shape or appearance of the marker. For unordered list values are none, disc(default), circle, square. For
type ordered list values are decimal, decimal-leading-zero, lower-alpha, upper-alpha, lower-roman, upper-roman….
indicates whether the marker should appear inside or outside of the box containing the bullet points.
list-style-
outside(default - start of each line of the list will be aligned vertically.), inside(line along with the bullet points will
position
be aligned vertically).
list-style-
sets an image as list item marker. url()
image

In addition to Font,
Text, Background and
Lists CSS also have
some other
properties like Border,
Margin, Color,
Animation …….
NSS College Rajakumari, Dept. of Computer Applications 9
Web Programming using PHP
Unit II CSS Selectors
CSS CSS selectors are used to "find" (or select) the HTML elements that want to be styled.
Different categories of CSS Selectors
1. Simple selectors (based on….)
a) Universal selector a wildcard(*) symbol is used to give style for all HTML elements in a page.

b) Name(Element) selector selects all elements with the specified element name.
a hash (#) character followed by id styles the element with the specified id. The id of an
c) id selector element is unique within a page. Selector uses this id attribute of an HTML element to
select a specific element.
select all elements which belong to a particular class attribute. For this a period ( . )
d) Class selector followed by class name is used. Styling a particular element is also possible by starting
with that element name then period(.) followed by class name.
is used to select multiple elements and style them together. Each selector is separated
e) Group selector by a space. This reduces the code and extra effort to declare common styles for each
element.
2. Combinator selectors - select elements based on a specific relationship between them
3. Pseudo-class selectors - select elements based on a certain state
4. Pseudo-element selectors - select and style a part of an element
5. Attribute selectors - select elements based on an attribute or attribute value
NSS College Rajakumari, Dept. of Computer Applications 10
Web Programming using PHP
Unit II CSS Simple Selector
CSS

Universal
Name
id

Class

Group

Classes are not unique


• Same class can be applied on multiple
elements
• Multiple classes can be applied on
same element

NSS College Rajakumari, Dept. of Computer Applications 11


Web Programming using PHP
Unit II CSS Combinator Selector
CSS There are four different combinators in CSS
Name Example Description
descendant selector (space) div p selects all <p> elements inside <div> elements
child selector ( > ) div > p selects all <p> elements where the parent is a <div> element
adjacent sibling selector ( + ) div + p selects all <p> elements that are placed immediately after <div> elements
general sibling selector ( ~ ) div ~ p selects every <p> element that are preceded by a <div> element

descendant adjacent sibling

NSS College Rajakumari, Dept. of Computer Applications 12


Web Programming using PHP
Unit II Pseudo-Class
CSS CSS pseudo-classes are used to add special effects to some selectors. ( Class with pseudo class )

:
selector : pseudo-class { property : value } selector . class : pseudo-class { property : value }
Some commonly used pseudo-classes are
Selector Description
:link Use this class to add special style to an unvisited link.
:visited Use this class to add special style to a visited link.
LOVE
:hover Use this class to add special style to an element when mouse is moved over it
HATE
:active Use this class to add special style to an active element.
:focus Use this class to add special style to an element while the element has focus.
Use this class to add special style to an element that is the first child of some other element.
:first-child
( p : first-child - selects every <p> elements that is the first child of its parent)
Use this class to add special style to an element that is the last child of some other element.
:last-child
( p : last-child - selects every <p> elements that is the first child of its parent)
• Pseudo-class names are not case-sensitive.
a:hover must come after a:link and a:visited in the CSS definition. • Pseudo-class are different from CSS classes but
a:active must come after a:hover in the CSS definition. they can be combined.
NSS College Rajakumari, Dept. of Computer Applications 13
Web Programming using PHP
Unit II
CSS

Focus with “input” & CSS class combined with pseudo class

NSS College Rajakumari, Dept. of Computer Applications 14


Web Programming using PHP
Unit II
CSS Pseudo-Elements
A CSS pseudo-element is used to style specified parts of an element. For example, style the first letter
or line of an element, insert content before, or after, the content of an element ……

All pseudo-elements
selector :: pseudo-element { property : value; } ::
Selector Description
::first-line used to add a special style to the first line of a text. (only for block-level elements)
::first-letter used to add a special style to the first letter of a text.
::before used to insert some content before the content of an element.
::after used to insert some content after the content of an element.
matches the portion of an element that is selected by a user. color, background, cursor,
::selection
and outline properties can be applied.

• Pseudo-elements can be combined with CSS class


• Several pseudo-elements can also be combined.
NSS College Rajakumari, Dept. of Computer Applications 15
Web Programming using PHP
Unit II
CSS Pseudo-Elements

Multiple pseudo elements combined

pseudo elements combined with CSS class

NSS College Rajakumari, Dept. of Computer Applications 16


Web Programming using PHP

References
1. https://www.tutorialspoint.com
2. https://www.geeksforgeeks.org
3. https://www.w3schools.com
4. https://www.javapoint.com
5. Background vector created by grmarc - www.freepik.com
https://www.freepik.com/free-photos-
vectors/background

NSS College Rajakumari, Dept. of Computer Applications 17

You might also like