CSS for styling website
Css border and background
- 1) Name the property used to specify the background color of an element.The background-color property is used to specify the background color of the element. For example: h2,p{ background-color: #b0d4de; }
- 2) Name the property for controlling the image repetition of the background.The background-repeat property repeats the background image horizontally and vertically. Some images are repeated only horizontally or vertically. body { background-image: url("paper1.gif"); margin-left:100px; }
- 3) Name the property for controlling the image position in the background.The background-position property is used to define the initial position of the background image. By default, the background image is placed on the top-left of the webpage. You can set the following positions: center top bottom left right background: white url('good-morning.jpg'); background-repeat: no-repeat; background-attachment: fixed; background-position: center;
- 4) Name the property for controlling the image scroll in the background.The background-attachment property is used to specify if the background image is fixed or scroll with the rest of the page in the browser window. If you set fixed the background image, then the image not move during scrolling in the browser. Let's take an example with the fixed background image. background: white url('bbb.gif'); background-repeat: no-repeat; background-attachment: fixed;
- 5) What is the difference between inline, embedded and external style sheets?Inline: Inline Style Sheet is used to style only a small piece of code. Syntax Embedded: Embedded style sheets are put between the ... tags. Syntax body { background-color: linen; } h1 { color: red; margin-left: 80px; } External: This is used to apply the style to all the pages within your website by changing just one style sheet. Syntax
- 6) What is the CSS Box model and what are its elements?The CSS box model is used to define the design and layout of elements of CSS. The elements are: Margin - It removes the area around the border. It is transparent. Border - It represents the area around the padding Padding - It removes the area around the content. It is transparent. Content - It represents the content like text, images, etc.
- 7) What is the float property of CSS?The CSS float property is used to move the image to the right or left along with the texts to be wrapped around it. It doesn't change the property of the elements used before it. To understand its purpose and origin, let's take a look at its print display. In the print display, an image is set into the page such that text wraps around it as needed.
- 8) How to center align a div inside another div?HTML:CSS: .cn { display: table-cell; width: 500px; height: 500px; vertical-align: middle; text-align: center; } .inner { display: inline-block; width: 200px; height: 200px; }your content
- 9) What is the difference between inline, inline-block, and block?Block Element: The block elements always start on a new line. They will also take space for an entire row or width. List of block elements are,
. Inline Elements: Inline elements don't start on a new line, they appear on the same line as the content and tags beside them. Some examples of inline elements are , , , and
tags. Inline Block Elements: Inline-block elements are similar to inline elements, except they can have padding and margins added on all four sides.
10) How do we make a rounded corner by using CSS?#rcorners1 { border-radius: 25px; background: #715751; padding: 20px; width: 200px; height: 150px; }The border-radius Property
Rounded corners for an element with a specified background color:
Rounded corners!
11) How will you add border images to an HTML element?We can set the image to be used as the border-image alongside an element by using the property of CSS “border-image”. Example: #borderimg { border: 15px solid transparent; padding: 20px; border-image: url(border.png) 30 round; }12) What is CSS flexbox?It allows you to design a flexible responsive layout structure without using any float or positioning property of CSS. To use CSS flexbox you need to define a flex container initially. Example: .flex-container { display: flex; background-color: #f4b042; } .flex-container > div { background-color: #d60a33; margin: 10px; padding: 20px; font-size: 30px; }123Example of flexbox.
13) What is the difference between padding and margin?In CSS, the margin is the property by which we can create space around elements. We can even create space to the exterior defined borders. In CSS, we have margin property as follows: margin-top margin-right margin-bottom Margin-left Margin property has some defined values as shown below. Auto – Using this property browser calculates the margin. Length – It sets the margin values in px,pt,cm etc. % – It sets the width % of the element. Inherit – By this property we can inherit the margin property from the parent element. In CSS, padding is the property by which we can generate space around an element’s content as well as inside any known border. CSS padding also has properties like, Padding-top Padding-right Padding-bottom Padding-left Negative values are not allowed in padding. div { padding-top: 60px; padding-right: 40px; padding-bottom: 50px; padding-left: 70px; }14) What is CSS opacity?It is the property that elaborates on the transparency of an element. By this property, we can transparent the image that can take the values from 0.0-1.0. If the value is lower, then the image is more transparent. IE8 and earlier versions of the browser can take the values from 0-100. img { opacity: 0.6; filter: alpha(opacity=60); /* For IE8 and earlier */}15) Define ‘important’ declarations used in CSS.Important declarations are defined as that declaration which is having more importance than the normal declaration. While executing, these declarations override the declaration which is having less importance. For example, if there are two users having an important declaration then one of the declarations will override the declaration of another user. For Example: Body {background: #FF00FF !important; color: blue} In this body, the background has more weight than the color.
Overview
Anyone who has worked in web development for more than five minutes can tell you: the difference between an outstanding site and a terrible site is the quality of the CSS. With our “CSS for styling website” course, you can learn to make high-quality, graphically amazing and thoroughly impressive websites. All it takes is a little creativity and a strong understanding of CSS design and code and your website will look exactly the way you want it to. We bring you this dynamic and comprehensive CSS course. This “CSS Tutorial for Beginners” is perfect for both beginners who don’t understand how to use CSS and experts who don’t understand why they cannot get their website to look exactly the way they want it to. With this CSS course, you will become fully competent in CSS and master of your website! Take this ultimate CSS development course (With CSS3!) course now and start learning CSS.
What are the requirements?
- Some understanding of HTML
- Mac or PC with internet connection
- Text editor and web browser
What I am going to get from this course
- How to use CSS selectors
- How to integrate CSS into web and mobile
- How to style text
- How to style lists
- How to use sprite sheets
- How to work with images in CSS
- How to create a CSS drop down model
- How to use and apply the CSS box model to page layout
- How to create CSS transformations
- How to create CSS animations
- How to understand and Use CSS position
- What considerations to take when using CSS for mobile
Target Audience
- Web Designers
- Web Developers
- Programmers
- Web Development Students
- Print Designers Learning Web
- HTML Coders
- PHP Developers
- Creatives
- Mobile Developers
Contact Us
+1-800-543-5571
