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

CSS Part 1

CSS can be added to HTML documents in 3 ways: internally, externally, and inline. Internal CSS uses the <style> element in the document head, external CSS links to an external .css file, and inline CSS uses the style attribute. CSS selectors like type, ID, class, and universal selectors allow targeting specific elements with declarations that control color, font, size, and other properties.

Uploaded by

Prachi Panjikar
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
16 views

CSS Part 1

CSS can be added to HTML documents in 3 ways: internally, externally, and inline. Internal CSS uses the <style> element in the document head, external CSS links to an external .css file, and inline CSS uses the style attribute. CSS selectors like type, ID, class, and universal selectors allow targeting specific elements with declarations that control color, font, size, and other properties.

Uploaded by

Prachi Panjikar
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 39

CSS CAN BE ADDED TO HTML

DOCUMENTS IN 3 WAYS:

1) Internal - by using a <style> element in the <head> section


2) External - by using a <link> element to link to an external CSS file
3) Inline - by using the style attribute inside HTML elements
1) INTERNAL CSS
• An internal CSS is used to define a style for a single HTML page.
• An internal CSS is defined in the <head> section of an HTML page, within a <style> element.
• The curly braces hold property followed by a colon, which is further followed by a value and
finally the value is followed by a semicolon.

• Syntax:
ADVANTAGES AND DISADVANTAGES OF
INTERNAL CSS
• Advantages:
• Allows you to change the style of the same HTMl file in which you are working.
• Since you’ll only add the code within the same HTML file, you don’t need to upload multiple files.

• Disadvantages:
• Affects only to one page to which they are applied. If you want to use same styling for multiple
document you will have to repeat the same styling for all pages.
• Increases the page load time.
CSS SELECTORS

CSS SELECTORS TYPES

IV.The
I.The type II.The ID III.The class
universal
selector selector selector
selector
I.THE TYPE SELECTOR

• Applies css rule to all the tags/elements specified

Example:
This applies color
Red to text in the <p> tag
II. THE ID SELECTOR
• The value od if attribute is unique within a document therefore the slector is applied to the
content of one element or tag.
• For id selector a hash(#) symbol is used followed by the value od the id to which css needs to be
applied.

Example:
In this example the id of <p> tag is alt
To which a css of color blue,alignment to
left and size100 % will be applied.
III.THE CLASS SELECTOR
• The class selector is similar to id selector.
• It allows you to apply css rules to the tags/elements that carry class attribute whose value
matches with class attribute specified in the selector.
IV.UNIVERSAL SELECTOR

• The universal selctor selects all the elements that are present in an HTML document.
• You can use this selector to apply the same css rule to all the elemets/tags of HTML document.
• Star(*) is used as universal selector.

Example: This will turn all the tags content of the html
page RED in color.
CSS FOT TEXT

• p{
color:red; //will change color of text to red
text-align:center; //will align the text in the center
text-align:right; // will align the text to the right
font-size:50px; //will increase the size of text
font-family:Arial; //will change the font of the text //font-family: cursive;
}
CSS FOR WEBSITE BACKGROUND:

• How to add color to website background?

body{
background-color:lime;
}
• How to add image to website background?

body{
background-image:url(“imagename.jpg”);
background-repeat:no-repeat;
background-size:cover;
}
COLOR PROPERTY OF CSS:

• The color property is used to set the color of the text.


• The color is specified by:

a color like "red"


name –
a HEX like "#ff0000"
value –
an RGB like

value –
"rgb(255,0,0)"
COLORS

• To add color to text:


<SPAN> TAG

• Is like an in line container which is used to mark-up a part of text or part of document.
• It is used to group elements for styling purposes (by using the class or id attributes
• The span tag is a paired tag means it has both open(<) and closing (>) tags, and it is mandatory
to close the tag.
• this tag does not make any visual change by itself.
• span is very similar to the div tag, but div is a block-level tag and span is an inline tag.
• Span conforms to the width of whatever element it contains.
<SPAN> TAG EXAMPLE

Within <p> tag only the text marked within <span>


Tag gets colored with css RED color as applied by
Css rule in style tag.
<DIV> TAG

• It is a block level tag and is used to put multiple tags in a container so that css could be applied to
them.
• It adds a line break before and after it
• The span tag is also a div tag sometimes there is no specific meaning at all the times but not vice
versa.
• Div tag takes up the entire width of the screen
<DIV> tag Example
2) EXTERNAL CSS

• With external CSS, you’ll link your web pages to an external .css file, which can be created by
any text editor in your device (e.g., Notepad++).
• This CSS type is a more efficient method, especially for styling a large website.
• By editing one .css file, you can change your entire site at once.
Example of External CSS
ADVANTAGES AND DISADVANTAGES OF
EXTERNAL CSS
• Advantages:
• Since the CSS code is in a separate document, your HTML files will have a cleaner structure and are
smaller in size.
• You can use the same .css file for multiple pages.

• Disadvantages:
• Your pages may not be rendered correctly until the external CSS is loaded.
• Uploading or linking to multiple CSS files can increase your site’s download time.
3) INLINE CSS

• Inline CSS is used to style a specific HTML element.


• For this CSS style, you’ll only need to add the style attribute to each HTML tag, without using
selectors.
• This CSS type is not really recommended, as each HTML tag needs to be styled individually.
Managing your website may become too hard if you only use inline CSS.
• However, inline CSS in HTML can be useful in some situations. For example, in cases where
you don’t have access to CSS files or need to apply styles for a single element only.
LET’S TAKE A LOOK AT AN EXAMPLE. HERE, WE
ADD AN INLINE CSS TO
THE <BODY> AND <H1> TAG
ADVANTAGES AND DISADVANTAGES OF
INLINE CSS
• Advantages:
• You can easily and quickly insert CSS rules to an HTML page.
• Used for testing and quick fixes.
• You don’t need to create and upload a separate document as in the external style.

• Disadvantages:
• Adding CSS rules to every HTML element is time-consuming and makes your HTML structure messy.
• Styling multiple elements can affect your page’s size and download time.
CSS FOR BORDER

body
{
border: 3px solid blue;
}

Types: dashed,solid,double,ridge,inset,outset,groove
BORDER TYPES:
LIST CSS
• list-style-type: circle;

• list-style-type: square

• list-style-type: upper-roman;

• list-style-type: lower-alpha;

• list-style-type: none;

• list-style-image: url('sqpurple.gif');
LINKS CSS

• With CSS, links can be styled in many different ways.


• links can be styled differently depending on what state they are in.
• The four links states are:
• a:link - a normal, unvisited link
• a:visited - a link the user has visited
• a:hover - a link when the user moves mouse over it
• a:active - a link the moment it is clicked

• When setting the style for several link states, there are some order rules:
• a:hover MUST come after a:link and a:visited
• a:active MUST come after a:hover
LINK CSS
MARGIN & PADDING

• In CSS, a margin is the space around an element’s border, while padding is the space between an
element’s border and the element’s content.
PADDING

• The size of the inner margins can be defined using the following properties:
• padding-top: size of the upper inner margin
• padding-right: size of the inner margin on the right
• padding-bottom: size of the lower inner margin
• padding-left: size of the inner margin on the left
• padding: defines the four inner margins in the order top, right, bottom then left

• The values can be:


• length in pixel (px), point (pt), centimeter (cm), percentage (%) ...
MARGIN

• The size of the outer margins can be defined using the following properties:
• margin-top: size of the top outer margin
• margin-right: size of the outer margin on the right
• margin-bottom: size of the lower outer margin
• margin-left: size of the outer margin on the left
• margin defines the four outer margins in the order top, right, bottom then left

• The values can be:


• length in pixel (px), point (pt), centimeter (cm), percentage (%) ...
CSS EXAMPLE PROBLEM 2

1. Change background color of the web page to gray


2. Change background color of last line to green.
3. Change color of text of the word Goa to yellow color.
4. Change background color word welcome to pink.
CSS EXAMPLE PROBLEM 3
QUESTION BANK:
1. What is the full form of CSS?
2. Why CSS is used?
3. Write a short note on CSS
4. Which are the 3 ways of adding CSS to HTML document.
5. Explain Internal CSS and state its advantages and disadvantages
6. Explain External CSS and state its advantages and disadvantages
7. Explain Inline CSS and state its advantages and disadvantages
8. Write the syntax for applying red color css to <p> tag.
9. Name and Explain with example the different types of selector in CSS.
QUESTION BANK

• What are different ways of putting color in css?


• Write the css to add background color blue to a web page.
• What is the syntax of css to add roman numbers to an ordered list?
• Explain the use of <DIV> tag
• Explain <SPAN> tag
• What are the different types of border available in css?
• How to add a border using css to an html document?
• Which are the four link states for adding css to anchor tag?

You might also like