Description:
First of all, what does CSS actually mean? CSS stands for Cascading Style
Sheet.CSS is used to style websites. Basically websites that are built using
html. But HTML is like a human body without bones and motion. So CSS acts as
the bones for a website. So JavaScript is used for movement. I have already
explained the basic relationship between html, CSS and JavaScript. Follow the
post below:
We have already done almost complete HTML course. Without knowledge of html we
cannot understand CSS.
The Table of content is given below
Headlines.
It is highly recommended to learn about following before start here.
Then start learning it. First we create a simple HTML website. Then we will
learn CSS by using CSS for styling website. That way, we will learn and
practice together of CSS.
Explain in Details.
The first thing to learn CSS is how CSS is connected to HTML and how many
ways it is used. So there are three ways to use CSS and connect it with
HTML.
Before discussing these three method, we should learn CSS priority. Priority
means which style will be used if there are two different styles for the
same element. So inline-CSS has the highest priority. Then the second number
priority is the last read CSS style. You may not understand it yet but we
will learn about it in future chapters on CSS with examples and usage.
The method of using css is following:
elementSelector{cssProperty: value;}
we can use it in this form also:
elementSelector{
cssProperty: value;
}
example.css
mean path to CSS.
Saving web space (remote storage - disk space)
Save time (one CSS code can be used multiple times in multiple web
pages)
Easy to edit (all CSS code can be found in one place)
The above CSS code will select all elements or tags that have a "type"
attribute with the value "image/jpg" and add a solid border of 1px width.
Posted by Mnzr chauhan
The second form is easier to understand. Now
elementSelector means to select html tags or elements. Then
cssProperty means the name of the style we want to give the selected element.
(CSS-Properties and their values are enclosed in curly-brackets {} and
separated by : and a complete property ends with it; as in the examples
above).
For example if we want to color an element red then the
cssProperty will be
"color"
and the
value
will be
"red".
h1{
color: red;
}
Inline-CSS
Inline-css means using css inside an opening tag via the style attribute?. Even it has the highest priority but it is limited. Example is given below:
<h2 style="color:red;">This course is covered by <span style="color:black;">Letslearnlights</span>.</h2>
This course is covered by Letslearnlights.
Internal-CSS
Inline CSS means using CSS with style tags in the existing document. The style tag is written inside the head section. It has full CSS controls. Example is given below:
<style> .exampleh2{ color: red; }.examplediv{ color: red;background: black; }.examplea{ color: black;text-decoration-color: red; }</style><h2 class="exampleh2">Heading 2 example</h2><div class="examplediv">HTML Div Tag example</div><a href="https://letslearnlights.blogspot.com/2022/03/html-all-important-elements.html" target="blank" class="examplea">Open New Tab</a>
External-CSS
It is similar to external-css but the CSS is written in an external file (a CSS file) that is linked to the HTML file using the link tag. It also has full CSS control. Both eternal and external CSS are included in the head section. How to create and link an external CSS file can be found in this post.The linking guide is given below:
<link rel="stylesheet" type="text/css" href="example.css">
Not Available!
Using external-css is recommended because if your website consists of
multiple pages then this single css file (style.css) can be linked to all
pages.
Benefits given bellow:
Element Selectors:
There are multiple CSS selectors for selecting HTML elements, but we'll just
use the most commonly used selector for now. Selection by tag name, by class
name, by id and by local attribute.
By tag: In this case we only use the tag name and all tags with the selected
name will be selected. For example I'm trying to select div elements, so I
have to use div{+++: value;}...
By class & id: I've already told about id and class in previous post.
- Explain id & class in Detail.
If you want to get detailed information of ID and class, only a little
attention is required.
Let's take the example of a school. So in a school we divide students
into different groups.
So why do we do it? So that we can identify them according to their
educational level.
This system is called class.
This shows that when we want to separate objects with the same value, we
create classes of them. So when we want to give same style to multiple
elements in documents we use class. A class is specified with a dot,
similar to
.classname
in CSS. For example I've 5 html button. I want three buttons text color
red and two button background cyne. In this case we need inly two CSS
classes with required properties then we attach those classes with
targeted elements. If you dont know about css then go to What is HTML, CSS & JS (JavaScript). Main Difference between
HTML, CSS & JS (JavaScript)?
this post.
<style>.color-red{color: red;};.bg-cyan{background: cyan;};</style><Button class="color-red">Button 01</Button>
<Button class="color-red">Button 02</Button>
<Button class="color-red">Button 03</Button>
<Button class="bg-cyan">Button 04</Button>
<Button class="bg-cyan">Button 05</Button>
You can use any class name as you want. You can also use more than one class
for same element.
<style>.ex-red{ color: red; }.ex-bg{ background: black; }.ex-shadow{ box-shadow: 1px 1px 3px cyan; }</style><div class="ex-red ex-bg ex-shadow">Example</div>
Example
When we want to identify students individually in a school, we use a
specific roll number for each student which is actually the student's
identity. According to ID rules we cannot use same ID for more than one
person in a field and cannot use multiple IDs for same person. So an id is a
very clean identification of an element in a document. We identify an id in
CSS with # like #anyid.
By Attribute: The [attribute] selector is used to select elements with a specified
attribute. You can also use attribute include value [attribute=value]. So if
you want to select an element or elements via attribute follow bellow:
<style> [type="image/jpg"]{ border: 1px solid red; } </style> <img type="image/jpg" alt="img tag" src="https://i.ibb.co/zrkCkWX/ftr.jpg" height="auto" width="100%"/>
So far, we have learned how to use CSS and its terms. Next we are going to
learn its basics.
CSS Comment:
In all dev languages (computer coding), comments play a very useful role. Every coding language has its own way of commenting so in CSS we use /* */.
A comment means a non-coding part of the coding. This means that a comment does not play any role in coding but it helps the coder to remember a specific location or a specific code section.
Another reason to use comments is so that a tutor or teacher explains pieces of coding within the code so that a beginner or student can easily understand. We will use CSS comment below. So all content wrapped with /* and */ will be commented out, like /* This is comment */ .
All HTML tags are blocks. We use CSS to modify them as per our requirement.
Here we will only discuss the basics of CSS. Let's discuss the basics one by
one. We are taking for example a div tag with content (text). We will select
it with id. You don't understand right now but just need a little attention.
After reading below I hope you will be completely satisfied.
Before starting, You must familiar with css units and colors.
Visit following:
<style> #testdiv { color: red; /* the color property is used to define element color and its value can be in color name or color code */ background-color: black; /* it is same as color property but it is for background of element */ font-size: 20px; /* Font-size define the size of text of element */ font-family: cursive; /* The font-family property specifies the font for an element. The Font-family property can hold multiple font names as a "fallback" system. */ /* mostly devices has five default font-families like serif, sans serif, cursive, fantasy, and monospace. We will learn more about it later*/ font-style: oblique; /* font-style define the style of text. it can be set italic, oblique and normal */ font-weight: bold; /* font-weight define the saturation of text. it can be set 100,200 ... 1000, bold, bolder, lighter and normal */ /* Other font properties will be explained in future */ } </style> <div id="testdiv"> This is test div content </div>
This is test div content
Final Lines.
We have learned all about css and basic usage of it. In next post we are gong to learn all basic css property and their value. Then we will learn All css advance property and related to it.
««« Thanks again for reading our blog. If you have any questions, feel
free to ask. Your support is enough for us to share this post with your
friends. And a good comment for our hard work. »»»
Thank you ツ
0 Comments