Education4U

CSS

Lec-1 : What is CSS & how to use it

Description

CSS stands for "Cascading Style Sheet". It is used to control the style of web pages simply and more easily.

We cover both the versions of CSS1, CSS2, and CSS3, and provides a complete understanding of CSS, starting from its basics to the advanced concepts.

Prerequisite

You should be familiar with:

1. Basic word processing using any text editor.

2. How to create directories and files.

3. How to navigate through different directories.

4. Internet browsing by using popular browsers like Internet Explorer or Firefox.

5. For creating simple Web Pages using HTML or XHTML.

Topics Covered

• Properties of CSS • Margins in CSS • Padding

• Animation & Transformation • Properties of CSS

For whom

• This CSS tutorial will help both students as well as professionals who want to make their websites or personal blogs more attractive.

• CSS is a must for the students and working professionals to become great Software Engineers especially when they are working in the Web Development Domain.

• For students who are preparing them for their Engineering Syllabus

Reference books

CSS: The Definitive Guide, 3rd Edition by Eric Meyer

Q & A
Exam Questions

Q1 . What are the advantages of using CSS?
Q2 . Distinguish between CSS2 and CSS3.
Q3 . What are the uses of an embedded style sheet?
Q4 . How do we make a rounded corner by using CSS?
Q5 . What is CSS flexbox?
Q6 . Define different cascading methods that can be used inside the cascading order.
Q7 . What are the ways to assign a certain color to an element in CSS?
Q8 . What are the different units used in CSS?
Q9 . Name a few prominent CSS frameworks.
Q10 . Explain the concept of specificity in CSS.

The browser cannot open the file when you try to open the external CSS file in a browser because the file has a different extension. The only way to use an external CSS file is use tag to reference it within another HTML document.

There are many properties of the flexbox used in the HTML webpage. They are: • flex-direction • flex-wrap • flex-flow • justify-content • align-items • align-content

There are four position states In CSS, as following: • Static(default) • Relative • Fixed • Absolute

There are many different font-related attributes available in CSS as follows: • Font-style • Font-variant • Font-weight • Font-size/line-height • Font-family • Caption • Icon

An integrating a certain CSS style has three ways as follows: 1. You can use inline-styling to integrate your style. 2. You can use style-tags in the head section of your HTML page to integrate your style. 3. You can use a link tag to write your CSS in a separate file and add it to your HTML page.

The clear property specifies the sides of an element where rest floating elements are not allowed. • His method cannot control styles for multiple documents at once. • Inline Style Advantages • Useful for small quantities of style definitions. At the local level, this can override other style specification methods. The only exceptions require to list in conjunction with other style methods.

The media properties have four types as following: • print – for printers • all – for all devices of media type • screen – for tablets, computer screens, smart-phones, etc. • speech – for screen readers. It reads the page out loud

It is the property that defines the transparency of an element. We can transparent the image that can take the values from 0.0 to 1.0. The image is more transparent when the value is low. The earlier versions of the browser and IE8 can take the values from 0 to 100. img { opacity: 0.7; filter: alpha(opacity=70); }

We use the icon library to add icons to the HTML webpage like font-awesome.

We use many properties of the flexbox in the HTML webpage. They are as follows: • flex-direction • flex-wrap • flex-flow • justify-content • align-items • align-content

It is a property of CSS that allows you to display a clear transformation between two or more specified colors. There are two types of gradients present in CSS. They are as following: • Linear Gradient • Radial Gradient

The CSS counters are variables that increase because of CSS rules. This rule inspects track of how many times the variable is used.

In the box model, everything mostly represents in the form of boxes only. We use the box model in CSS for modeling and designing. Its main components and elements layouts are as following: • Padding: This defines the spacing in the box model that is the positioning of elements in the box. • Margin: It is the CSS box model’s top layer. • Border: The padding and content fields used around the border affect the border. We can change the border’s background color also. • Content: It represents the content that needs to display in the box.

The CSS has three types as following: • External: written in separate files. • Internal: cited at the top of the web page code document. • Inline: written right next to the text.

There are different versions of CSS: • CSS1 • CSS2 • CSS2.1 • CSS3 • CSS4

The Webkit is a core software module or component which renders the HTML code and CSS on different browsers like Safari and Chrome. There are some rendering tool engines for different browsers such as Gecko for Mozilla Firefox, Presto for Opera, and Microsoft Edge for Internet Explorer.

Following are the limitations of CSS: • Ascending by selectors is not possible • No expressions • Limitations of vertical control • dynamic behavior does not control Pseudo-class • None column declaration • Styles, Rules, targeting specific text not possible

There are multiple types of CSS selectors: • CSS Element Selector • CSS Id Selector • CSS Class Selector • CSS Universal Selector • CSS Group Selector

-Following are style components of CSS: • Selector • Property • Value

The z-index in CSS is a property that is used to decide the stack order of the elements based on which elements have to display on the web page. That is higher-order elements displays before the lower order elements on the web page. We can apply z-index only to position elements like position: relative, position: absolute, position: fixed, etc.

A contextual selector addresses a particular occurrence of an element. It is a white space separated string of individual selectors. A search pattern, where only the final element in the pattern addresses to giving it matches the specified context.

The p[lang] command is used for selecting all the paragraph elements.

Following are the advantages: • You can create classes for reusing it in multiple documents. • You can use it to control the styles of multiple documents from one file. • You can use selectors and grouping methods In complex situations to apply styles.

The visibility: Hidden property hides the element, but it holds space and affects the layout of the document. The display: none property also hides the element but does not hold space. It does not affect the document layout.

It is a feature of CSS we use to style the given parts of an element. Example: We can style the line of an HTML element or first letter.

No Reviews. Be the First Student to Review the course...

Review :

0 | 0 Reviews

Course Feature

Category Computer Science
Language English
Price 59.00
Validity 1 Year
Q & A 25
Exam Questions 10
Full Course PDF View

Wishlist

Add to Cart

Computer Science

CSS

Lec-1 : What is CSS & how to use it

Course Feature

Share

Data Communication

Distributed Systems

Adhoc & Sensor

Operating Systems(OS)

Useful Links

Download

Computer Science

1.Introduction & properties

2.Margin & Padding

3.Animation & Transforms

4.Property

CSS

Lec-1 : What is CSS & how to use it

1.Introduction & properties

2.Margin & Padding

3.Animation & Transforms

4.Property

Q1 . What happens if you open the external CSS file in a browser?

Q2 . Write all the properties of the flexbox.

Q3 . Write all the position states used in CSS.

Q4 . What are the various font-related attributes in CSS?

Q5 . What are the different ways you could integrate CSS into your HTML page?

Q6 . What is the CSS clear property?

Q7 . What are the different media types allowed by CSS?

Q8 . What is CSS opacity?

Q9 . How can we add icons to the web page?

Q10 . What are the properties of the flexbox?

Q11 . What are gradients in CSS?

Q12 . What are CSS counters?

Q13 . What are the CSS Box Model and its components?

Q14 . What are the different types of CSS?

Q15 . What are the different variations of CSS?

Q16 . What is the use of Webkit in CSS3?

Q17 . What are the limitations of CSS?

Q18 . What are the types of CSS selectors?

Q19 . Name some CSS style components.

Q20 . What is Z-index in CSS?

Q21 . What is a contextual selector?

Q22 . Which command is used for the selection of all the elements of a paragraph?

Q23 . What are the advantages of External Style Sheets?

Q24 . Explain the difference between visibility: hidden and display: none

Q25 . Explain the concept of pseudo-elements in CSS.

Course Feature

Share

Related Courses

Data Communication

Distributed Systems

Adhoc & Sensor

Operating Systems(OS)

Useful Links

Download