CSS & Jquery Practice Exercises - Img
Uploaded by
Kanth PrasadCSS & Jquery Practice Exercises - Img
Uploaded by
Kanth PrasadHello World!
CSS comments are not shown in the output.
Me too!
< and add the below dparal. style.
‘The code shauld look similar to below. Verify in the preview. The Styling should be applied to the first
paragraph only.
Red and center-aligned headingch1>
“center'>Red and center-aligned paragraph.
tag, name the class of the same as “left” Create a new Class in the Style tag with name as left and add the text-align attribute as left and color as blue. Preview the HTML now and see the difference, 1.3.4 Selecting a specific element with class name: Now that we were selecting the Elements with a class name, lets select specific elements with the class name 3 [Page In the code above in earlier ecercise, beside the dass name, add the tag name as well{suppose p }. Your code should look similar to as below and observe the Styling affects only the
tag and not the This paragraph will be red and center-aligned.
‘tag though both the elements have same Class name.
shtml>
This heading will not be affecteds/h1>
Hello World!
a|Page h2»Smaller heading!
‘This is a paragraph.
My C55 web page!
Hello world! This is an example of body with background color.
1.4.2 Background to specific elements: 5|Page Now Lets individually give a background color to different elements. Copy paste the below cade and observe the way different elements are being styled individually with different background, Check the preview and observe the difference.CSS background-color example!
This paragraph has its own background color.
We are still in the div element.Hello World!
Hello World!Change the repeat-x to repeat-y and check the preview. now the background should be repeated vertically only. 7[Page 1.4.5 No repeat image So now we know how to stop the image getting repeated horizontally/vertically/both. To have the repeat stopped both horizontally & vertically, set the background-repeat to "no-repeat"
Hello World!
1.46 Positioning background image
Observe the below style which will say how to position the imge in the body of the HTML page.
Copy the below HTML code and paste in the HTML Editor and observe the positioning of the background
image now.
shtml>
Now change the position from "right top" to "left top" and preview the HTML.
15 CSS Text
1.5.1 CSS Text color
‘We shall see how to make the color of the text in this exercise.
Observe the color pattern in the below code and see how various colors are put to various texts in
respective elemnts. Copy the below code in HTML editor and preview the same.
9|Page 1.5.2 Text alignment
Observe the below code and see haw the text alignment has been made for various parts of the text.
Use the below code in the HTML Editor and see how the text gets aligned.
ehtml>
Change the Alignments in the above cade and see the preview.
1.5.3 Text decoration
Now we shall see various text decoration patterns.
Add the below styling to the code in HTML Editor and check the difference,
The background image is only showing ance, but itis disturbing the reader!
Hello World!8|Page
W3Schools background no-repeat, set position example.
Now the background image is only shown once, and positioned away from the text.
This is an ordinary paragraph, Notice that this text is red. The default text-color for a page is defined in the body selector.
This is a paragraph with cla ‘ex". This text is blue.
May, 2009
In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since. ‘Whenever you feel like criticizing anyone,’ he told me, "just remember that all the people in this world haven't had the advantages that you've had.'
cbeNote: Resize the browser window to see how the value "justify" works.
This is heading 1
1.5.5 Text indentation
‘The text identation can be done using the below code,
Change the text indent to 150px and see the preview. Observe the difference now.
1.5.6 CSS Fonts
In the below excercise we shall see how to set various fonts to the text.
Observe the style difference for various elements. Try and set the font family and check the preview,
al, Helvetica, sans-serif;
1.5.7 Selecting the font style:
‘The font style can be set to italic/normal using the below attributes,
Observe the different font styles in the paragraphs,
shtml>
‘spa This is a paragraph.
1.6 CSS Links
1.6.1 Working with coloring of links upon visiting, visited and hover.
Copy the below code to the HTML Editor and check for the styles on the link
Note: a:active MUST come after a:hover inthe CSS definition in order to be effective.
17 :€55 Lists:
1.7.1 Styling lists with different bullets
Below styling would set different styles to different ordered lists,
Observe the way each of the list style types are being put up.
ehtml>
16 |Page
This is heading 2
<This is heading 3
1.5.4 Text transformation Using the below style code try and set the text transformations.This is some text.
This is some text.
CSS font-familys/h1>
This is a paragraph, shown in the Times New Roman font.
This is a paragraph, shown in the Arial font.
This is a paragraph in oblique style.
1.5.8 setting the font size 13 [Page Font size can be set using the Font-size attribute. Use the below code and try setting the font size by increasing the px or in the decimals of em.This is another paragraph.
1.5.9 Setting with em: The below format shows how to set the font size Ushg em(unit of measure af font size) Increase the font size in the decimal values and observe the difference.Note: a:hover MUST come after arlink andazvisited in the CSS definition in order ta be effective.
Example of unordered lists:
- Coca Colac/li>
-
slisteac/li>
Example of ordered lists:
- Some text.Some text.
Some text.
A solid red border
A solid green border
Note: The "border-color" property does not work if itis used alone, Use the "border-style" property to set the borders first.
1.9.3 Setting Border to individual sides: Now set the style of the with below code so that each side of the border would look differently.
pt
border-top-style: dotted;
border-right-style: solid;
border-bottom-style: dotted;
border-left-style: solid
}
2z|Page This is some text in a paragraph. tag with some text and apply the below style and see how it differs with and without
margins being set to the element.
pt
background-color: yellow;
t
pcx {
margin-top: 100px;
margin-bottom: 100px;
margin-right: 150px;
margin-left: 50px;
This is a paragraph with no specified margins. This is @ paragraph with specified margins. tags and set padding for one of them with the below style.
This is a paragraph with specified paddings. Notice that the hidden heading still takes up space. Natice that the hidden heading does not take upspace. Whenever you feel lke criticizing anyone,’ he told me, ‘just remember that all the people in this
world haven't had the advantages that you've had.'s/p>
Note: Using margin-auto will not work in IES, unless a IDOCTYPE is declared. In my younger and more vulnerable years my father gave me some advice that I've been turning
over in my mind ever since. "Whenever you feel lke criticizing anyone,’ he told me, ‘just remember that all the people in this
world haven't had the advantages that you've had.'s/p>
In my younger and more vulnerable years my father gave me some advice that I've been turning
‘over in my mind ever since. 'Whenever you feel like criticizing anyone," be told me, ‘just remember that all the people in this
world haven't had the advantages that you've had.' This is another paragraph. tag and replace the click function content with
below code where “test” refers to the id of the element.
S("Atest) hide();
Save the HTML page and reload the same in the browser. Click the button and test the result
This is another paragraph. element and replace the
click function with the below code where “test” refers to the class name,
S(".testi") hide);
Save the HTML page and reload the same in the browser. Cli
the button and test the result,
This is another paragraph.This is a visible headings/h1>
This is a hidden heading
This is aheadings/h2>
This is a headings/h2>
“spoThis is a paragraph.