Today I will be talking about CSS and will be discussing about its
basics. CSS is a programming language that is used to design websites. It is
like a designing extension to html.
Before I talk further on CSS, let me discuss some basics of html:
Say you're creating a website, and the first
thing you want is the text "Hello World". Let us see how to code it
using HTML.
The code will go as follows, and every line
has a meaning.
<html>
<body>
<p>
Hello World
</p>
</body>
</html>
·
<html>
is the opening line.
·
<body>
indicates that the webpage content starts after that.
·
<p>
indicates paragraph.
·
Finally
after these opening codes, you type your webpage content
·
After
typing, close all the opening codes by simply adding this (slash) /
·
So
the closing codes will be
·
</p>
·
</body>
·
</html>
These “/ “ tell the computer that it is the end of file. Anything
typed beyond "/html" is ignored.
Say, you want “hello world” as a
heading. Then the code goes as follows:
<html>
<body>
<h1> Hello World
</h1>
</body>
</html>
As you can see, the only change
is <h1> and </h1>. Now, these h1, p and even body are all called
elements of html.
Need of CSS –
When it comes to website design, using only html makes it tedious
and even stunts its readability so CSS comes to the rescue. Now that we have
the need of CSS established, it is time to talk about
its syntax.
Syntax of CSS contains 2 main portions-
1. Selector – The selector points to the
html element which is to be designed.
Ex: <h1> or <p> - These are elements of
html which can be selected to design in CSS.
2. Declarations – These include the actual
design code that manipulates the element of html selected in the syntax.
Ex: color: red //gives red color to the selected
element.
Now, we have established the general format of CSS syntax. There
are different ways of how selectors can select a particular html element. It
can do so by referring to the element by name, id, class, attributes or others.
To explain all these, I will be taking a simple <p> element of html.
·
Element
Selector: This refers to
selecting the html element by name.
Ex: p {
color: green;
}
Html Code: <html>
<head>
<style>
p { color: green; }
</style>
</head>
<body> <p> Hello World! </p> </body>
</html>
Output: Hello World!
·
id selector: This refers to selecting the html element
which is linked with the id name given.
Ex: #para { color: green; }
Html Code: <html>
<head>
<style>
#para {
color: green;
}
</style>
</head>
<body>
<p id=”para”>
This is the paragraph affected with css code </p>
<p> This paragraph
is not affected </p>
</body>
</html>
Output: This is the paragraph affected with css code
This paragraph is
not affected
·
class selector: This refers to selecting the html element by
the class name provided in the html code.
Ex: .para {color: green; }
html code: <html>
<head>
<style>
.para{color: green;}
</style>
</head>
<body>
<p class="para"> Paragraph affected </p>
<h1 class="para"> Heading affected </h1>
<p> Paragraph Not affected </p>
</body>
</html>
Output: Paragraph
affected
Heading affected
Paragraph Not affected
These were the 3 main type of selectors used in CSS to edit html
elements. In the above examples, I have only used color manipulation when in
actual website designing, lot of manipulation or editing may be required. At
that time, CSS is the most helpful tool to use as it is simple to understand
and quite efficient. My next post will be on using css codes in different
methods to edit html pages.
Here are some helpful links if anyone is further interested:
· https://www.codecademy.com/learn/web
No comments:
Post a Comment