Scribd
Upload
26 views27 pages

Cascading Style Sheets

css notes

Uploaded by

vinodgargrdfm
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
26 views27 pages

Cascading Style Sheets

css notes

Uploaded by

vinodgargrdfm
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/ 27

Cascading Style Sheets.

• It is a style sheet language which is used to change the look and


formatting of a document written in markup language.
• It is generally used with HTML to change the style of web pages and
user interfaces.
• It can also be used with any kind of XML documents including plain
XML.
• CSS is used along with HTML and JavaScript in most websites to
create user interfaces for web applications and user interfaces for
many mobile applications.
Advantages/Benefits of CSS
• Solves a big problem: If you are developing a large website where
fonts and color information are added on every single page, it will be
become a long and expensive process. CSS solves this problem.
• Saves a lot of time: CSS style definitions are saved in external CSS
files so it is possible to change the entire website by changing just one
file.
• Provide more attributes: CSS provides more detailed attributes than
plain HTML to define the look and feel of the website.
CSS Syntax
• A CSS rule set contains a selector and a declaration block
• Selector: Selector indicates the HTML element you want to style. It could be any tag like <h1>,
<title> etc.
• Declaration Block: The declaration block can contain one or more declarations separated by a
semicolon.Example, there are two declarations:
1. color: yellow;
2. font-size: 11 px;
• Property: A Property is a type of attribute of HTML element. It could be color, border etc.
• Value: Values are assigned to CSS properties. In the above example, value "yellow" is assigned to
color property.

Selector{Property1: value1; Property2: value2; ..........;}


Levels of CSS
• There are three levels of style sheets in cascading style sheets (CSS):
• Inline style sheet: This level of style sheet is used to define styles for a
specific element or group of elements within an HTML document.
• Inline styles are defined using the "style" attribute in the HTML tag.
<html>
<body style="background-color:white;">
<h1 style="color:Red;">CSS Tutorials</h1>
<p style="color:blue;">It will be useful here.</p>
</body>
</html>
CONT!!
• Internal style sheet/Embedded Style Sheet: This level of style sheet is defined within the head
section of an HTML document using the <style> tag.
• Internal styles apply to the entire document and can be overridden by the inline style.
<html>
<head>
<style>
body {
background-color: black; }
h2 {
color: red; }
</style>
</head>
<body>
<h2>CSS types</h2>
<p>Cascading Style sheet types: inline, external and internal</p>
</body>
</html>
CONT!!
• External style sheet :This level of style sheet is defined in a separate file with a .css extension and is linked to
the HTML document using the <link> tag.
• External styles apply to the entire website and are considered to be the most efficient and flexible way of
defining styles for web pages.
• Create a new .css file with text editor, and add Cascading Style Sheet rules too. For example:

• Add a reference to the external .cssfile right after <title> tag in the <head> section of HTML sheet:
• <link rel="stylesheet" type="text/css" href="style.css" />
Style Specification Formats in CSS
• In CSS, the style specification format typically involves selectors, properties, and
values.

• A selector is used to target HTML elements to which you want to apply the styles.
You can use selectors to target specific elements such as class or ID, or you can
target multiple elements at once.

• A property is a style attribute that you want to apply to the targeted element. There
are many properties in CSS, such as color, font-size, background-color, and border.

• A value is the specific setting you want to apply to the property. For example, if you
want to set the color of text to red, the property would be "color" and the value
would be "red".
How to target an element and assigned value to
property.
• * Target all paragraphs with the class "intro" */
p.intro {
/* Set the font size to 16 pixels */
font-size: 16px;
/* Set the line height to 1.5 */
line-height: 1.5;
/* Set the text color to dark gray */
color: #333;
/* Set the background color to light gray */
background-color: #f2f2f2;
}
CSS Selector

• 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.
1.CSS Element Selector
2.CSS Id Selector
3.CSS Class Selector
4.CSS Universal Selector
5.CSS Group Selector
CSS Element Selector
The element selector selects the HTML element by name.
• CSS Id Selector
(1)The id selector selects the id attribute of an HTML element to select a specific element.
(2) An id is always unique within the page so it is chosen to select a single, unique element.
(3)It is written with the hash character (#), followed by the id of the element.
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.
CSS Universal Selector
The universal selector is used as a wildcard character. It selects all the elements
on the pages.
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.
Property Value Forms

• CSS includes different properties in 7 categories:

Fonts
Lists
Alignment of text
Margins
Colors
Backgrounds
Borders
Property Values (values of properties)
The property value can appear in many forms.
• Keywords – large, medium, small, …
• Number values – integers, decimal numbers etc.
• Length - numbers, maybe with decimal points followed by two character abbreviation of a unit name.
• Unit-
px - pixels
in - inches
cm - centimeters
mm - millimeters
pt - points
pc - picas (12 points)
em – value of the current font size in pixels
ex - height of the letter ‘x’
Note-No space is allowed between the number and the unit specification e.g., 1.5 in is illegal!
Eg: 10px, 24pt etc.
• Percentage - just a number followed immediately by a percent sign. Eg: 70%
• URL values: url(protocol://server/pathname)
Font-Properties
The font-family property specifies the font for an element.
If a font name has more than one word, it should be quoted. ‘Times New Roman‘
Font-Size
• Sets the size of fonts.There are two categories of font-size values, absolute and relative.
• In the case of absolute category the size value could be given as length value in points, picas or pixels or
keywords from the list xx-small, x-small, small, medium, large and x-large.Eg: font-size: 10pt
• The relative size values are smaller and larger, which adjust the font size relative to the font size of the
parent element.Eg: font-size:1.2em
• This sets the font size to 1.2 times the font size of the parent element.
CONT!!
• Font Weight:
The font-weight property sets how thick and thin characters in text should be displayed.Example: font-
weight: normal

• Font-style:
Most commonly used to specify italic. Eg: font-style: italic/ Bold/Normal
• Font-Size-adjust:
The font-size-adjust property gives you better control of the font size .
Example :font-size-adjust: number|none|initial|inherit;
List properties
• list-style-type can applied to both ordered and unordered list.
• The list-style property is a shorthand for the following properties:
list-style-type
list-style-position
list-style-image.

.
Syntax:
(1)list-style-image: url('donald.gif’)

(2) list-style-type: value;

(3)list-style-position: outside (default)


list-style-position: inside
CSS color Property

• The color property specifies the color of text.


CSS text-align Property

• The text-align property specifies the horizontal alignment of text in an


element.
• Syntax:
text-align: left|right|center|justify
CSS background-image Property

• The background-image property sets one or more background images


for an element.
• By default, a background-image is placed at the top-left corner of an
element, and repeated both vertically and horizontally.
• Syntax:
background-image: url|none.
Cont!!
• !!!!!
CSS Box Model
• 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.
• 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
Contd..!!
<html>
<head>
<style>
div {
background-color: lightgrey;
width: 300px;
border: 15px solid green;
padding: 50px;
margin: 20px;
}
</style>
</head>
<body>
<div>This text is the content of the box. We have adn and a 15px green border.
Ut enim ad minim veniam, quis nostraboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in t in voluptate velit esse cillum dolore eu
fugiat nulla pariatur laborumpariatur..</div>

</body>
</html>

You might also like