Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
7 views

mod-3 css

This document provides an overview of CSS, including its syntax, selectors, and methods for applying styles to HTML documents. It covers various CSS properties such as color, background, and font styles, along with examples of internal, external, and inline styles. Additionally, it explains background settings, gradients, and font families, emphasizing the importance of proper usage for web design.

Uploaded by

avengersarelike
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
7 views

mod-3 css

This document provides an overview of CSS, including its syntax, selectors, and methods for applying styles to HTML documents. It covers various CSS properties such as color, background, and font styles, along with examples of internal, external, and inline styles. Additionally, it explains background settings, gradients, and font families, emphasizing the importance of proper usage for web design.

Uploaded by

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

MODULE 3

CSS: Syntax of CSS, CSS selectors, CSS in HTML doc, Color property, image
property, size property, background property, font family, font size property, font
style property, font variant property, font weight property, font property.
CSS: Cascading style sheet is a text with .css extension and is used to define styles and layouts of
web pages written in HTML and Extensible Hyper Text Markup Language (XHTML).
Syntax: It is divided into two different parts – Selector and Declaration
Declaration is a part that appears within the braces of the CSS rule followed by the selector.
Selector {
Property1: value;
Property2: value;
Property3: value;
}
Selector: selects the element you want to target, selectors like tags, id’s, and classes will be used.
All forms this key - value pair
Keys : properties(attributes) like color, font-size, background, width, height, etc
Value : values associated with these properties
CSS Selectors
 Selector are used target elements and apply Css
 Different types of selectors are as follows
1. Universal selector
2. Type selector
3. Class Selector
4. Id Selector
5. Child Selector
6. Descendent selector
Priority of Selectors : Id > Class>Element
1. Universal selector
It selects all the elements that are present in an HTML document , it is used to apply the same the rule
to all the elements of an HTML or XHTML document and it is represented by *{ ….. }
<!DOCTYPE html>
<html>
<head>
<style>
*{
text-align: center;
color: blue;
}
</style>
</head>
<body>
<h1>Hello world!</h1>
<p>Every element on the page will be affected by the style.</p>
</body>
</html>
2. The TYPE Selector
It matches all the elements specified in a list with the given value to determine the elements to which
CSS rules are to be applied.
H1, h2, p {
Font-family: sans-serif
}
3. Class Selector
It allows to apply CSS rule to the elements that carry a class attribute whose value matches with the
class attribute specified in the class selector.
<h1 class=”intro”> heading 1 </h1>
.intro{ font-family:sans-serif}
H1.intro{ font-family:sans-serif }
4. ID Selector The value of the id attribute is unique within a document; therefore, the selector is
applied only to the content of one element.
<h1 id =”myheader”> hello world </h1>
#myheader{font-family: sans-serif}
We selected id and then changed the font property
5. Descendant Combinator Selector
Combine two or more selectors. How we do it -
<div id="out">
<div class="in“>Hi </div>
</div>
We selected class inside id then changed the color property i.e text color to red. Now whatever is
written (content) will have the text color as red
#out .in { color: red;}

6. Child Selector
Combine two or more selectors like Descendant, it uses > symbol as combinator
It only targets immediate child.
How we do it
<div id="out">
<div class="in“>Hi </div>
</div>
We selected class inside id then changed the color property i.e text color to red. Now whatever is
written (content) will have the text color as red.
#out > .in {color: red;}
Example for selectors:
<!DOCTYPE html>
<html>
<head>
<style>
h2{ background-color:red;
color:white;
}
#X{
text-align: center;
color: red;
}
.Y {
text-align: center;
color: red;
}
</style>
</head>
<body>
<h1 class="Y">Red and center-aligned heading</h1>
<h2> example for class selector</h2>
<p id="X"> good morning</p>
</body>
</html>
Inserting CSS in an HTML document
There three ways to apply CSS style to an HTML document
1. The internal style sheet
2. The external style sheet
3. The in-line style sheet
1. INTERNAL STYLE SHEET

 It is written within the HEAD element of the HTML document


 This style is applied only to the documents in which it is defined and not referenced by any other web
document
 SYNTAX:
<head>
<style type=text/css”>
Selector { property: value;}
</style>
</head>
 Advantages of using internal style sheet are affects only the page in which they are placed and allows
the user to change the style of the same HTML file.
 It has disadvantages like increases the page load time because the entire CSS file needs to be
implemented first to apply CSS.

Example:
<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: pink;}
h1 {color: maroon;
margin-left: 40px;}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
2. THE EXTERNAL STYLE SHEET

 Each HTML page must include a reference to the external style sheet file inside the <link> element,
inside the head section.
 An external style sheet can be written outside the HTML document, and must be saved with a .css
extension.
 The external .css file should not contain any HTML tags.
 SYNTAX: <LINK rel=”style sheet” type=”css” href=”external.css”/>
 Link refers to HTML link element, which is used to link a style sheet. This has three attributes- rel,
type, and href.
The rel attribute specifies what you are linking
The type specifies the MIME type(Multipurpose Internet Mail Extensions-format of the document)
for the browser,
The href specifies the path of the .css file
EXAMPLE: HTML document with reference to .css file
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Css file saved as style.css
body {
background-color: lightblue;
}
h1 { color: red;
margin-left: 20px;
}
3. THE IN-LINE STYLE SHEET

 It is used to apply a unique style for a single element.


 Inline style properties are written in a single line separated by semicolons.
 These properties are placed inside the Style attribute of the HTML element, on which we want to
apply the style.
 SYNTAX:
<p style=”background-color:#ccc; color:#fff; border: solid black 1px;”>
 EXAMPLE:
<!DOCTYPE html>
<html>
<body>
<h1 style="color:blue;text-align:center;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>
<p style="background-color:#cccc00; color:#0000ff; border: solid black 1px;">good
morning</P>
</body>
</html>

BACKGROUND OF A WEB PAGE -

Background of a web page is the area on which the content of the web page, such as text, tables,
border, and image, is displayed.
CSS provides various properties to set the background of a web page as follows -

1. background-color
2. background-image
3. background-size
4. background-property

1. Background color

It is used to set the color of the background area on which an element is displayed.

Background color property takes three values : Color name, Hexadecimal equivalent of the color
and RGB color value
 The RGB format uses three elementary colors, Red, Green, Blue, to specify the color of an element.
 CSS3 adds a new level ALPHA(A), the level of opacity to this RGB format, therefore a new color
specification is formed, which is RGBA
 CSS3 introduces a new format of color specification, i.e. Hue Saturation Lightness (HSL)
 New CSS3 color specifications are as follows:
Opacity property, RGBA value format, and The HSL & HSLA values format

Opacity property: It is used to produce transparency effect in an HTML.

Opacity: [number between 0-1]; if opacity is 0.5, it means the element will be 50% transparent.

H1 {background: #036 opacity:0.5;}

RGBA value Format: it takes 4 arguments, in which first three are same as in the RGB format,
while the fourth argument is the alpha channel. This specifies the transparency or opacity level of the
specified color. It takes the number between 0 and 1 as a value.

H1{background-color: rgba (153,134,117,0.2);}

HSL and HSLA Values Format: it takes 3 parameters Hue parameter specifies an angle of the
color around the circular wheel, for instance 00 (red), 600 (yellow),1200 (green),1800 (cyan)

<!DOCTYPE html>

<html>
<head> <style>

body { background-color: hsla(89, 43%, 51%, 0.9); }

</style>

</head>

<body>

<p>The background color can be specified with an RGB value.</p>

</body></html>

HSLA Value:

 Hue (89): Defines the color's position on the color wheel, representing a greenish tone.
 Saturation (43%): Determines the intensity of the color (43% is moderately saturated).
 Lightness (51%): Adjusts the brightness of the color.
 Alpha (0.9): Sets the transparency level (0.9 is slightly transparent).

Here's an example of specifying a background color using the RGBA (Red, Green, Blue, Alpha)
color model:

<!DOCTYPE html>

<html>

<head>

<style>

body {

background-color: rgba(0, 128, 255, 0.7); /* Light blue with 70% opacity */

</style>

</head>

<body>

<p>The background color is specified with an RGBA value.</p>

</body></html>

RGBA Value:
 Red (0): No red component.
 Green (128): Medium green intensity.
 Blue (255): Full blue intensity.
 Alpha (0.7): 70% opacity (30% transparency)

Gradient property: it is a variation of colors, which are arranged from lightest to darkest or vice-
versa. CSS gradients let you display smooth transitions between two or more specified colors. It is
used as an background for an entire web page or within table cells or div elements.

CSS defines two types of gradients:

 Linear Gradients (goes down/up/left/right/diagonally)


 Radial Gradients (defined by their center)

CSS Linear Gradients -

 To create a linear gradient you must define at least two color stops.
 Color stops are the colors you want to render smooth transitions among.
 You can also set a starting point and a direction (or an angle) along with the gradient effect.
Syntax -
background-image: linear-gradient(direction, color-stop1, color-stop2, ...);
<!DOCTYPE html>
<html>
<head>
<style>
#grad1{
height: 200px;
background-color: red;
background-image: linear-gradient(red, yellow);
}
</style>
</head>
<body>
<div id="grad1">
<h1>Linear Gradient - Top to Bottom</h1>
<p>This linear gradient starts red at the top, transitioning to yellow at the bottom:</p>
</div>
</body>
</html>

CSS Radial Gradients -


 A radial gradient is defined by its center.
 To create a radial gradient you must also define at least two color stops.
 Syntax background-image: radial-gradient(shape size at position, start-color, ..., last-color);
 By default, shape is ellipse, size is farthest-corner, and position is center.
<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
height: 150px;
width: 200px;
background-color: red;
background-image: radial-gradient(red, yellow, green);
}
</style>
</head>
<body>
<h1>Radial Gradient - Evenly Spaced Color Stops</h1>
<div id="grad1"> </div>
</body>
</html>

2. Background-image
 The background-image property specifies an image to use as the background of an
element.
 By default, the image is repeated so it covers the entire element.
 CSS background-repeat: By default, the background-image property repeats an image
both horizontally and vertically.

 If the image above is repeated only horizontally , then set background-repeat: repeat-x;
 To repeat an image vertically, set background-repeat: repeat-y;
 Showing the background image only once is also specified by the background-repeat property:
EXAMPLE: background-repeat: no-repeat;
 The background-position property is used to specify the position of the background image.
 Position values as follows If you only specify one keyword, the other value will be "center".
 left top
 left center
 left bottom
 right top
 right center
 right bottom
 center top
 center center
 center bottom
 background-position: right top;

<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url("sunset.jpg");
background-repeat: repeat-x;
}
h1,p { color:white; }
</style>
</head>
<body>
<h1>Hello World!</h1>
<p>This page has an image as the background!</p>
</body>
</html>

CSS FONTS
Syntax:
 family-name: refers to the specific font family like Arial, Helvetica, etc
 generic-family: refers to the broader category of font families with similar design
characteristics like serif, sans-serif, etc
 initial: sets font-family to the default value
 inherit: inherits font-family from the parent

font-family: family-name | generic-family | initial | inherit;

font-family: it is used to specify the name of a font family to apply the specified font style on the
text.
In CSS there are five generic font families:
1. Serif fonts have a small stroke at the edges of each letter. They create a sense of formality
and elegance.
2. Sans-serif fonts have clean lines (no small strokes attached). They create a modern and
minimalistic look.
3. Monospace fonts - here all the letters have the same fixed width. They create a mechanical
look.
4. Cursive fonts imitate human handwriting.
5. Fantasy fonts are decorative/playful fonts.
All the different font names belong to one of the generic font families.
font-size/line-height
 The font-size property sets the size of the text.
 We should not use font size adjustments to make paragraphs look like headings, or headings
look like paragraphs.
 Always use the proper HTML tags, like <h1> - <h6> for headings and <p> for paragraphs.
 The font-size value can be an 1)absolute, or 2)relative size 3) percentage value

Absolute size:
 Sets the text to a specified size
 Does not allow a user to change the text size in all browsers (bad for accessibility reasons)
 Absolute size is useful when the physical size of the output is known
EXAMPLE:
<!doctype html>
<html>
<head><style>
Body {
font-size:medium;
}
</style>
</head>
<body>
<h1>absolute value</h1>
<p style="font-size:xx-small"> xx-small</p>
<p style="font-size:x-small"> x-small</p>
<p style="font-size:small"> small</p>
<p style="font-size:large"> large</p>
<p style="font-size:x-large"> x-large</p>
<p style="font-size:xx-large"> xx-large</p>
</body>
</html>

Relative size:
 Sets the size relative to surrounding elements
 Allows a user to change the text size in browsers
<!doctype html>
<html>
<head>
<style>
Body {
font-size:large;
}
</style>
</head>
<body>
<h1>relative value</h1>
<p style="font-size:larger"> larger than the base font</p>
<p style="font-size:smaller"> smaller than the base font</p>
</body>
</html>
percentage value:
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
font-size:180%
}
p{
font-size:150%
}
</style>
</head>
<body>
<h1>CSS font-size propery</h1>
<p>percentage value</p>
</body>
</html>
font-style
The font-style property is mostly used to specify italic text.
This property has three values:
 normal - The text is shown normally
 italic - The text is shown in italics
 oblique - The text is "leaning" (oblique is very similar to italic, but less supported)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Font-Style Example</title>
<style>
.normal {
font-style: normal;
}

.italic {
font-style: italic;
}

.oblique {
font-style: oblique;
}
</style>
</head>
<body>
<h1>Font-Style Examples</h1>
<p class="normal">This text has a normal font style.</p>
<p class="italic">This text has an italic font style.</p>
<p class="oblique">This text has an oblique font style.</p>
</body>
</html>

Explanation -
 font-style: normal;: Displays text with the normal font style.
 font-style: italic;: Displays text in italic (slanted).
 font-style: oblique;: Similar to italic but less commonly used; it slants the text.

font-variant
 The font-variant property specifies whether a text should be displayed in a small-caps font.
 In a small-caps font, all lowercase letters are converted to uppercase letters . However, the converted
uppercase letters appears in a smaller font size than the original uppercase letters in the text.

<!DOCTYPE html>
<html>
<head>
<style>
p.normal {
font-variant: normal;
}
p.small {
font-variant: small-caps;
}
</style>
</head>
<body>
<h1>The font-variant property</h1>
<p class="normal">good morning</p>
<p class="small">good</p>
</body>
</html>

font-weight
The font-weight property specifies the weight of a font:

<!DOCTYPE html>
<html>
<head>
<style>
p.normal {
font-weight: normal;
}
p.light {
font-weight: lighter;
}
p.thick {
font-weight: bold;
}
p.thicker {
font-weight: 900;
}
</style>
</head>
<body>
<h1>The font-weight property</h1>
<p class="normal">This is a paragraph.</p>
<p class="light">This is a paragraph.</p>
<p class="thick">This is a paragraph.</p>
<p class="thicker">This is a paragraph.</p>
</body>
</html>

The font property- Instead of defining all the properties such as font style, font weight and font
family separately, we can specify the values of these properties in the font-property
P{ font: bold italic 30px verdana;}
Create a webpage to demonstrate font property (font family, font size, font style and font variant)
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
font-family: Arial, Helvetica, sans-serif;
font-size: 40px;
font-style: normal;
font-weight: 900;
font-variant: small-caps;
}
h2 {
font-family: Arial, Helvetica, sans-serif;
font-size: 30px;
font-style: italic;
font-variant: small-caps;
}
p{
font-family:"Lucida Console", "Courier New", monospace;
font-size: 14px;
font-style: oblique;
}
</style>
</head>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</body>
</html>

You might also like