Scribd
Upload
2 views

3. CSS Intro

The document provides an overview of browser developer tools, emphasizing their utility in debugging HTML and CSS code. It explains how to use these tools to inspect elements, modify styles, and understand the cascading nature of CSS. Additionally, it covers CSS basics, including syntax, selectors, and methods for adding CSS to HTML documents, along with best practices for styling elements.

Uploaded by

nishtha
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
2 views

3. CSS Intro

The document provides an overview of browser developer tools, emphasizing their utility in debugging HTML and CSS code. It explains how to use these tools to inspect elements, modify styles, and understand the cascading nature of CSS. Additionally, it covers CSS basics, including syntax, selectors, and methods for adding CSS to HTML documents, along with best practices for styling elements.

Uploaded by

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

Developer Tools and Debugging

Browser Developer Tools

● You learned about chrome developer tools. Many modern browsers that you
see today have developer tools built into them, these are called browser
developer tools. They all work in a similar way. For example Mozilla Firefox,
Microsoft Edge, Brave, etc.
● These are powerful tools for web developers for a variety of purposes.

Uses of Browser Developer Tools

● They help you understand a web page structure (basic HTML), and styling
(CSS) of various elements by inspecting them.
● They help in modifying the HTML and CSS of the page to experiment with
the looks of the webpage for trial purposes.
● They help in debugging code.

Note: They also help you understand the javascript code and functionality
associated with it. You’ll learn more about this in the upcoming lectures.

Debugging

Sometimes our code doesn’t behave the way we wanted to.


For example, we applied black text color to a heading but it appears to be blue in the
browser.
So what went wrong over here?
How do we know the underlying reason for it?
Lastly, how to fix it?
So browser developer tools are very helpful in such cases where debugging is
required.

How to debug CSS code?

Let’s say you have a simple web page as shown below. The text color of the list
items is blue. But you coded it to be green. Now you wish to understand why it is
appearing blue while you coded it to be green. Here we have used Microsoft Edge
as our browser. Similarly, you can use developer tools in other browsers as well.
● Step 1: Select the HTML element that you want to fix, then right-click and
select “inspect”

● Step 2: Under ‘Elements’ you’ll be able to see the HTML code highlighted
with respect to the HTML element that you selected to inspect. Here one
<li>..</li> is selected. You can click on it to expand and see its contents.
Below you can see ‘Styles’ where you’ll be able to see all the styles applied to
the selected element.

● Step 3: Examine the styles applied carefully.


Points to Note:
- You can see the CSS rules applied to the selected element are in a
specific order of most-to-least specific. As:
- The <li> is present inside <ul>. The <ul> is present inside a <div>. The
<div> is present inside <html>.
- The most specific is the CSS rules applied to <li>.
- The least specific is the CSS rules applied to <html>.

● Step 4: Come to a conclusion after examining the styles


- The text color green is applied to <ul>, but its content still has blue
color because <li> is more specific than <ul>. The color applied to <li>
is blue, hence the final color that appears is blue. Now we know where
the problem is, and we can fix it by changing the text color of <li> to
green.
In conclusion,

- Browser developer tools arrange styles applied to an element in order of


most-to-least specific. The above example was very simple. But in huge
and complex websites it gets very easy to figure out styling-related
problems by inspecting.

- In Step 3, you can see some styles have strikethroughs. For example in
<ul>, color: green;
This means you coded <ul> contents to have the color green, but the
browser didn’t apply this color, since some other more specific styling
(that is applied to <li>) overrode this value. Hence developer tools help
us figure out such scenarios helping in debugging.

Note:

You don’t have to master using Browser Developer tools in one go. As you keep
practising you’ll learn with time.

In general, if you ever face any issues with Chrome Developer Tools or if you want to
learn more, you can refer to its documentation whenever required.
● Documentation
● MDN Article on Chrome Dev Tools
Introduction to CSS

Adding CSS to your websites will make them presentable and somewhat like the
sites you see on the internet.
● CSS is a shorthand for Cascading Style Sheets.

● CSS describes how the HTML elements are to be displayed.

● CSS is used to control the layout of multiple web pages at once.

● Includes the addition of visuals such as colour, fonts, layouts, etc.

The syntax for CSS is:


selector {
property: values;
}

● Each property ends with a semicolon.


● Each property includes a name for the css property and a value separated by
a colon.
Below is an example, to see how CSS modifies the HTML code:
<h1>Welcome to Coding Ninjas!</h1>

<h2>Where coding is a way of life..</h2>

Now, adding CSS to the above HTML code:


h1{
font-family: monospace;
}
h2{
color: blue;
}

The code snippet would now look like this:


CSS COMMENTS
Comments are code that is ignored by the browser. They help make code
understandable, hence helping in changes in code that may be required at a later
stage easily, by defining the various sections of HTML element styles.

A CSS comment initiates with /* and ends with */. Comments can also span multiple
lines.

ADDING CSS TO HTML PAGE

The browser formats the HTML document based upon the information in the
stylesheet. The browser will access the stylesheets in the HTML document
itself. There are 3 ways to add CSS styles to your document:
● Inline Styles
● External Styles
● Internal Styles

Cascading order decides which styles will be applied to elements when


multiple styles are used.
Cascading order priority is given as:
Inline > ( internal≅ external ) > browser default.

The browser treats both internal and external CSS equally, but the order in which
they are defined, determines which property gets priority.

● If the link to internal CSS is defined before the external CSS, then
properties of external CSS will get preference over internal CSS, i.e.
external CSS > internal CSS.
● If the link to internal CSS is defined after the external CSS, then properties
of internal CSS will get the preference, i.e internal CSS > external CSS.
Inline Styles

● The style attribute is used to apply an inline stylesheet directly to our


HTML code.
● The inline stylesheet syntax will have the properties specified inside the
style attribute.
● Multiple properties can be specified at a time.
● To apply a unique style to a single element, use inline styling.
You can use inline styles like this:
<p style="color:blue;font-size:40px">Inline CSS</p>

Internal Styles

An internal or in-page stylesheet:


● It contains the CSS style code for the web page.
● It provides the styles for that particular HTML document only.
● It cannot be reused.
● It can be specified with the help of the <style> tag inside the <head> tag.
You can use internal styles like this:
<style>
h1 {
color: blue;
}
h2 {
color: red;
}
p {
color: green;
}
</style>

External styles

● You should use an external style sheet if you want to apply styling to a
website using just one file.
● Although the syntax is similar to internal stylesheets, it is implemented
using a separate CSS file.
● The '.css' extension is used to save it. Eg. 'styles.css'.

To use an external stylesheet, a reference is provided to file inside the <link>


element:
<link rel="stylesheet" type="text/css" href="styles.css">

Attribute Value

rel Defines the linked document


relationship

href Specifies where the linked document is


located

type Defines the type of media of the linked


document

NOTE: The link is placed within the head. CSS syntax code is contained in the
'styles.css' file only. The name of the file could be anything followed by .css
extension, and the same should be specified while linking it to the html file using
<link> tag.

SELECTORS

Selectors are used to point to the HTML element that needs to be


styled. Selectors are used in both internal and external
stylesheets.

Styles are applied using three different types of selectors:


● Element selector
● Class Selector
● Id selector

When multiple styles are applied to an element, specificity determines which style
will be used.

The latest rule is applied, if the specificity is the same.


Specificity order:
inline > id selector > class selector > tag selector > browser default
NOTE: If the same property is defined inside the same type of selector, then the
property which is defined at the last will be used by the browser.

Element Selector

The element selector will help us to select all elements with the same mentioned
element name. This will select all the elements in the HTML document with the
given name, but most of the time this is not our requirement. So, to apply styles to
only some specific elements we need to have some restrictions. We will take a
look at this later in this section only.

Syntax: element { css declarations; }

Eg., applying style to h2 tag like this:


<h1>Blue Color</h1>

and applying CSS like this:


h1{
color: blue;
}

will show on the browser like this:

Class Selector

Multiple elements with a specific class attribute are selected using the class
selector. To select elements with a specific class, type a period (.) followed by the
class name.

Syntax: .class-name {css declarations; }

To use the class selector, the class attribute is used in the element's opening
tag. The value of the class attribute contains the name of the class. There can be
multiple classes added to the tag by giving space in between.

Eg., defining the classes in the HTML file like this:

<p class="red">I am red1</p>


<p class="blue right">I am blue1</p>
<p class="red">I am red2</p>
<p class="blue right">I am blue2</p>

The CSS code file


.red{
color: red ;
}
.blue{
color: blue;
}
.right{
text-align: right;
}

will show on the browser like this:

Id selector

The id selector will help us to select only one element with that specific id. We need
to write a hash(#) character and then id name to select an element with a specific
id.

Syntax: #class-name{css declarations;}

To make use of the id selector, the id attribute is defined in the element's opening
tag. The value of the id attribute will have the name of the id. The id is unique on an
HTML page.
There can only be one id in the tag. If another element is having the same
id, the styles would not be applied by the browser.

Eg., defining the ids in the HTML file like this:

<p id="one">This is id one!</p>

<p id="two">This is id two!</p>

<p id="three">This is id three!</p>

<p id="four">This is id four!</p>


and applying css like this:

#one {

color: blue;

#two {

background-color: teal;

#three {

color: green;

#four {

background-color: lightgrey;

will show on the browser like this:

Grouping Selectors

We usually use the same CSS for multiple elements, and we can't have too
many classes,as too many classes would become difficult to manage.
So, CSS helps us with a grouping feature where you can define the CSS rules
to multiple elements with the use of a combination of either class, tag, or id.
We need to use a comma separator for the different selectors for grouping

Here are a few examples of how grouping can be used:


● p, .class-name { CSS properties } - apply styles to 'para'
and element with class as 'class-name’
● #id1, #id2, span { CSS properties } - apply styles to 'span'
and elements with ids as 'id1'and 'id2'
● .class-name, #id1, div { CSS properties } - apply styles to
'div' and elements with class 'class-name' and id as 'id1'.

Nesting Selectors

Whenever we require to target elements inside a particular section of our


HTML page. Instead of using the classes there, we can use nesting that works
like a hierarchy and is easier to understand.

To use nesting, you need to add space between the selectors. Hence the
sequence formed represents a hierarchy starting from the top.

These are just a few examples:


● .class-name span { CSS declarations } - this will apply
styles to only those 'span', which are present inside the element with
class 'class-name
● #id1 .class-name span { CSS declarations } - this will apply
styles to only
those 'span', which are present inside the element with class 'class-name'
and 'class- name' is inside the element with id 'id1'

Chaining Selectors

There are times when we want to have the same class for multiple elements and
we want to apply styles to them. In this scenario, we can use chaining selectors.

To use chaining we take the help of the combination of selectors without putting any
space in between them.
Eg., we have a class 'header-style' applied to every heading. We can apply different
styles to them like this:
<html>
<head>
<style>
.header-style{
background-color: aqua;
display: inline-block;
}
</style>
</head>
<body>
<h1 class="header-style">Hi</h1>
<h1 class="header-style">Hello</h1>
</body>
</html>

Now, as the class header-style is given to both <h1> tags, we can apply styles to
both of them together as done in the above example.

You might also like