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

What Is CSS?: The Id Selector

css notes

Uploaded by

Abhinav kumar
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
6 views

What Is CSS?: The Id Selector

css notes

Uploaded by

Abhinav kumar
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 11

What is CSS?

 CSS stands for Cascading Style Sheets


 Styles define how to display HTML elements
 External Style Sheets can save a lot of work
 External Style Sheets are stored in CSS files

Importance of CSS
 CSS defines HOW HTML elements are to be displayed.
 Styles are normally saved in external .css files. External style sheets enable you to change the
appearance and layout of all the pages in a Web site, just by editing one single file.

CSS Syntax
 A CSS rule has two main parts: a selector, and one or more declarations:

 The selector is normally the HTML element you want to style.


 Each declaration consists of a property and a value.
 The property is the style attribute you want to change. Each property has a value.

What is the difference between class and id?

The id Selector
 The id selector is used to specify a style for a single, unique element.
 The id selector uses the id attribute of the HTML element, and is defined with a "#".
 The style rule below will be applied to the element with id="para1":

#para1
{ text-align:center; color:red; }
The class Selector
 The class selector is used to specify a style for a group of elements. Unlike the id selector, the class
selector is most often used on several elements.
 This allows you to set a particular style for many HTML elements with the same class.
 The class selector uses the HTML class attribute, and is defined with a "."
 In the example below, all HTML elements with class="center" will be center-aligned:

.center {text-align:center;}
 We can use more than one class in a single element

<a class=”Center bold italic”>

Explain different ways to write the CSS. / Explain CSS with all types. / Enlist
and explain methods of using CSS in web page.
 There are three ways of inserting a style sheet:
o External style sheet
o Internal/Embedded style sheet
o Inline style
1. External Style Sheet
o When using CSS it is preferable to keep the CSS separate from your HTML.
o Placing CSS in a separate file allows the web designer to completely differentiate between
content (HTML) and design (CSS).
o External CSS is a file that contains only CSS code and is saved with a ".css" file extension.
o This CSS file is then referenced in your HTML using the <link> instead of <style>.

File Creation
o Open up notepad.exe, or any other plain text editor and type the following CSS code.
body{ background-color: gray;} p { color: blue; }h3{ color: white; }
o Save the file as a CSS (.css) file.
o Name the file "test.css" (without the quotes). Now create a new HTML file and fill it with
the following code.

<html><head>
<link rel="stylesheet" type="text/css" href="test.css" /></head>
<body>
<h3> A White Header </h3>
<p> This paragraph has a blue font.
The background color of this page is gray because we changed it with CSS! </p>
</body></html>

Why Use External CSS?


o It keeps your website design and content separate.
o It's much easier to reuse your CSS code if you have it in a separate file. Instead of typing the
same CSS code on every web page you have, simply have many pages refer to a single CSS
file with the "link" tag.
o You can make drastic changes to your web pages with just a few changes in a single CSS file.

2. Internal/Embedded CSS
o This type of CSS is only for Single Page.
o When using internal CSS, we must add a new tag, <style>, inside the <head> tag. The HTML
code below contains an example of <style>'s usage.
<html><head>
<style type="text/css"></style>
</head><body>
<p>Your page's content!</p></body>
</html>

Creating Internal CSS Code


o Below is an example of simple CSS code.
<html><head>
<style type="text/css">
p {color: white; }
body {background-color: black; }
</style></head><body>
<p>White text on a black background!</p></body>
</html>

3. Inline CSS
o It is possible to place CSS right in your HTML code, and this method of CSS usage is
referred to as inline css.
o Inline CSS has the highest priority out of external, internal, and inline CSS.
o This means that you can override styles that are defined in external or internal by using
inline CSS.
o If you want to add a style inside an HTML element all you have to do is specify the desired
CSS properties with the style HTML attribute.
<html><head>
<link rel="stylesheet" type="text/css" href="test.css" /></head>
<body>
<p style="background: blue; color: white;">A new background andfont color with
inline CSS</p></body>
</html>

Explain CSS Background with all its attributes


 CSS background properties are used to define the background effects of an element.
1. CSS Background Color
o The background-color property specifies the background color of an element.
o The background color of a page is defined in the body selector:
o Below is example of CSS backgrounds
body {background-color:#b0c4de;}

2. CSS Background Image


o The background-image property specifies an image to use as the background of an
element.

body {background-image:url('paper.gif');}
3. Background Image Repeat
o You can have a background image repeat vertically (y-axis), horizontally (x-axis), in both
directions, or in neither direction.
p {background-image: url(smallPic.jpg); background-repeat: repeat; }
h4 {background-image: url(smallPic.jpg); background-repeat: repeat-y; }
ol {background-image: url(smallPic.jpg); background-repeat: repeat-x; }
ul {background-image: url(smallPic.jpg);background-repeat: no-repeat; }

4. CSS Fixed Background Image


o The background-attachment property sets whether a background image is fixed or scrolls
with the rest of the page.
textarea.noScroll { background-image: url(smallPic.jpg); background-attachment: fixed;}
textarea {
background-image: url(smallPic.jpg);
background-attachment: scroll; }

5. CSS Background Image Positioning


o The background-position property sets the starting position of a background image.
p {background-image: url(smallPic.jpg); background-position: 20px 10px;}
h4 {background-image: url(smallPic.jpg); background-position: 30% 30%;}
ol {background-image: url(smallPic.jpg); background-position: top center;}

Explain CSS Font with all its attributes


 CSS font properties define the font family, boldness, size, and the style of a text.
1. CSS Font Color
o Set the text-color for different elements:
h4 { color: red; }
h5 { color: #9000A1; }
h6 { color: rgb(0, 220, 98); }
2. CSS Font Family
o The font family of a text is set with the font-family property.

h4 { font-family: sans-serif; }h5 { font-family: serif; }


h6 { font-family: arial; }
3. CSS Font Size
o The font-size property sets the size of the text.
p { font-size: 120%; } ol{ font-size: 10px; } ul{ font-size: x-large; }
4. CSS Font Style
o The font-style property is mostly used to specify italic text.
o 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)
p { font-style: italic; }h4{ font-style: oblique; }

5. CSS Font Weight


o The font-weight property sets how thick or thin characters in text should be displayed.
p { font-weight: 100; } ul{ font-weight: bolder; }

6. CSS Font Variant


o The font-variant property specifies whether or not a text should be displayed in a small-
caps font.

p { font-variant: small-caps; }}

Explain CSS Text with all its attributes.


 While CSS Font covers most of the traditional ways to format your text, CSS Text allows you to
control the spacing, decoration, and alignment of your text.
1. Text Decoration
o The text-decoration property is used to set or remove decorations from text.
o The text-decoration property is mostly used to remove underlines from links for design
purposes.

h4{ text-decoration: line-through; }


h5{ text-decoration: overline; }
h6{ text-decoration: underline; }
a { text-decoration: none; }

2. Text Indent
o The text-indentation property is used to specify the indentation of the first line of a text.
p { text-indent: 20px; } h5 { text-indent: 30%; }

3. Text Align
o The text-align property is used to set the horizontal alignment of a text.
p { text-align: right; }
h5{ text-align: justify; }

4. Text Transform
o The text-transform property is used to specify uppercase and lowercase letters in a text.
p { text-transform: capitalize; } h5{ text-transform: uppercase; }

5. CSS White Space


o The white-space attribute allows you to prevent text from wrapping until you place a
break <br /> into your text.
p { white-space: nowrap; }

6. CSS Word Spacing


o With the CSS attribute word-spacing you are able to specify the exact value of the spacing
between your words. Word-spacing should be defined with exact values.
p { word-spacing: 10px; }

7. CSS Letter Spacing


o With the CSS attribute letter-spacing you are able to specify the exact value of the spacing
between your letters. Letter-spacing should be defined with exact values.
p { letter-spacing: 3px; }

Explain BOX MODEL.


 All HTML elements can be considered as boxes. 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 HTML elements, and it consists of:
margins, borders, padding, and the actual content.
 The box model allows us to place a border around elements and space elements in relation to other
elements.
 The image below illustrates the box model

 Explanation of the different parts:


o Margin - Clears an area around the border. The margin does not have a background color, it
is completely transparent
o Border - A border that goes around the padding and content. The border is affected by the
background color of the box
o Padding - Clears an area around the content. The padding is affected by the background
color of the box
o Content - The content of the box, where text and images appear
Explain CSS Padding.
 The CSS padding properties define the space between the element border and the element
content.
p {padding: 15px; border: 1px solid black;
 The top, right, bottom, and left padding can be changed independently using separate properties.
A shorthand padding property can also be used, to change all puddings at once.
1. Possible Values
Value Descriptions
length Defines a fixed padding (in pixels, pt, em, etc.)
% Defines a padding in % of the containing element.
padding-top:25px;
padding-bottom:25px;
padding-right:50px;
padding-left:50px;

2. Padding - Shorthand property


o To shorten the code, it is possible to specify all the padding properties in one property.
This is called a shorthand property.
padding:25px 50px;

Explain CSS Margin.


 The CSS margin properties define the space around elements.
p {margin: 5px; border: 1px solid black; }

 The top, right, bottom, and left margin can be changed independently using separate properties. A
shorthand margin property can also be used, to change all margins at once.

Value Descriptions
auto The browser calculates a margin
length Specifies a margin in px, pt, cm, etc. Default value is 0px
% Specifies a margin in percent of the width of the
containing element
inherit Specifies that the margin should be inherited from the
parent element

1. Margin - Individual sides


o In CSS, it is possible to specify different margins for different sides:
margin-top:100px;
margin-bottom:100px;
margin-right:50px;
margin-left:50px;
2. Margin - Shorthand property
o To shorten the code, it is possible to specify all the margin properties in one property. This
is called a shorthand property.
margin:100px 50px;

Explain CSS Border with all its attributes.


 The CSS border properties allow you to specify the style and color of an element's border.
1. Border Style Types
o The border-style property specifies what kind of border to display.

p.solid {border-style: solid; } p.double {border-style: double; } p.groove {border-style: groove; }


p.dotted {border-style: dotted; } p.dashed {border-style: dashed; } p.inset {border-style: inset; }
p.outset {border-style: outset; } p.ridge {border-style: ridge; } p.hidden {border-style: hidden; }

2. Border Width
o The border-width property is used to set the width of the border.

table { border-width: 7px; border-style: outset; }


td { border-width: medium; border-style: outset; }
p { border-width: thick; border-style: solid; }

3. Border Color
o The border-color property is used to set the color of the border.
o Border colors can be any color defined by RGB, hexadecimal, or key terms. Below is an
example of each of these types.

table { border-color: rgb( 100, 100, 255); border-style: dashed; }


td { border-color: #FFBD32; border-style: ridge; }
p { border-color: blue; border-style: solid; }

4. Border: border-(direction)
o If you would like to place a border on only one side of an HTML element, or maybe have a
unique look for each side of the border, then use border-(direction).
o The direction choices are of course: top, right, bottom, and left. CSS allows you to treat
each side of a border separately from the other three sides.
o Each side can have its own color, width, and style set, as shown below.
p { border-bottom-style: dashed ; border-bottom-color: yellow; border-bottom-width: 5px; }
h4 { border-top-style: double; border-top-color: purple; border-top-width: thick; }

Explain CSS Lists with all its attributes.


 The CSS list properties allow you to:
o Set different list item markers for ordered lists
o Set different list item markers for unordered lists
o Set an image as the list item marker
1. CSS List Style Type
o Specify all the list properties in one declaration.
 Unordered list styles: square, circle, disc (default), and none
 Ordered list styles: upper-alpha, lower-alpha, upper-roman, lower-roman, decimal
(default), and none

ol { list-style-type: upper-roman; }
ul { list-style-type: circle; }

2. CSS Lists with Images


o Specify an image as the list-item marker in a list:

ul { list-style-image: url("listArrow.gif"); }
ol { list-style-image: url("listArrow2.gif"); }

3. CSS List Position


o With Specify that the the list-item markers should appear inside the content flow (results
in an extra indentation)

ul { list-style-position: inside; }
ol { list-style-position: outside; }
 Note: "Outside" is actually the default setting for indentation.

Explain CSS Links


1. CSS Anchor/Link States
o 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 mouse over it
 a:active - a link the moment it is clicked

a:link{color:#FF0000;} /*unvisited link*/


a:visited{color:#00FF00;} /* visited link */
a:hover{color:#FF00FF;} /* mouse over link */
a:active {color:#0000FF;} /* selected link */
2. Text Decoration
o The text-decoration property is mostly used to remove underlines from links.
a:link {text-decoration:none;}
a:visited {text-decoration:none;}
a:hover {text-decoration:underline;}
a:active {text-decoration:underline;}
3. Background Color
o The background-color property specifies the background color for links.
a:link {background-color:#B2FF99;}
a:visited {background-color:#FFFF85;}
a:hover {background-color:#FF704D;}
a:active {background-color:#FF704D;}

Explain CSS Position with example.


 With the knowledge of CSS Positioning we will be able to manipulate the exact position of your
HTML elements.
1. Position Relative
o Relative positioning changes the position of the HTML element relative to where it
normally appears.
o If we had a header that appears at the top of our page, we could use relative positioning
to move it a bit to the right and down a couple of pixels. Below is an example.
h3 {position: relative; top: 15px;left: 150px;}
p {position: relative; left: -10px;}

2. Position Absolute
o With absolute positioning, you define the exact pixel value where the specified HTML
element will appear.
o The point of origin is the top-left of the browser's viewable area, so be sure you are
measuring from that point.
h3 {position: absolute; top: 50px;left: 45px;}
p{position: absolute; top: 75px;left: 75px;}

Explain CSS Layers. / z-index property


 CSS allows you to control which item will appear on top with the use of layers.
 In CSS, each element is given a priority.
 If there are two overlapping CSS positioned elements, the element with the higher priority will
appear on top of the other.
 To manually define a priority, set the z-index value. The larger the value, the higher the priority
the element will have.
h4{position: relative; top: 30px;left: 50px; z-index: 2;}
p {position: relative; z-index: 1;background-color: #FFCCCC;}
 This paragraph has a z-index of 1, which is less than the header.
 If we had not defined the z-index, by default the paragraph would have been on top of the header
because it appears later in our HTML code.

Explain CSS Float property.


 With CSS float, an element can be pushed to the left or right, allowing other elements to wrap
around it.
 Wrapping text around an image is easy when using the CSS Float attribute.
 You have a choice to either float the picture to the left or to the right and the rest is done for you.

img.floatLeft { float: left; margin: 4px;}


img.floatRight { float: right; margin: 4px;}
<body>
<img src="sunset.gif" class="floatLeft"><p>The images are contained
with...</p>
<img src="sunset.gif" class="floatRight"><p>This second paragraph has
an...</p>
</body>

Introduction to CSS3
 CSS3 is the latest standard for CSS.
 CSS3 is completely backwards-compatible with earlier versions of CSS.
 CSS3 has been split into "modules". It contains the "old CSS
specification" (which has been split into smaller pieces). In addition,
new modules are added.
 CSS3 Transitions are a presentational effect which allow property
changes in CSS values, such as those that may be defined to occur on
:hover or :focus, to occur smoothly over a specified duration – rather
than happening instantaneously as is the normal behaviour.
 Transition effects can be applied to a wide variety of CSS properties,
including background-color, width, height, opacity, and many more.
 Some of the most important CSS3 modules are:
o Selectors
o Box Model
o Backgrounds and Borders
o Image Values and Replaced Content
o Text Effects
o 2D/3D Transformations
o Animations
o Multiple Column Layout
o User Interface

You might also like