Scribd
Carica
42 visualizzazioni2 pagine

My CSS Notebook

My own typed notes regarding CSS for new learners. Basic notes to begin CSS and its syntax

Caricato da

Parth Tatpuje
Copyright
© © All Rights Reserved
Per noi i diritti sui contenuti sono una cosa seria. Se sospetti che questo contenuto sia tuo, rivendicalo qui.
Formati disponibili
Scarica in formato TXT, PDF, TXT o leggi online su Scribd
42 visualizzazioni2 pagine

My CSS Notebook

My own typed notes regarding CSS for new learners. Basic notes to begin CSS and its syntax

Caricato da

Parth Tatpuje
Copyright
© © All Rights Reserved
Per noi i diritti sui contenuti sono una cosa seria. Se sospetti che questo contenuto sia tuo, rivendicalo qui.
Formati disponibili
Scarica in formato TXT, PDF, TXT o leggi online su Scribd
Sei sulla pagina 1/ 2

MY CSS NOTEBOOK

HTML and CSS are parallelly used together for the development of web pages and
websites. HTML offers the syntax, and CSS aids HTML in customizing texts,
background images, links, etc. So, we study these together.

we encounter CSS in HTML in many ways. The attributes we use make use of CSS
editting tools.
So, mainly there are 3 ways we can use CSS editting tools

1. In Line:
An inline CSS is used to apply a unique style to a single HTML element. An
inline CSS uses the style attribute of an HTML element.
This is the way we were using it previously
<h1 style="color:blue;">A Blue Heading</h1>
<p style="color:red;">A red paragraph.</p>

**This way applies the CSS effects only to a single element.

2. Internal:

An internal CSS is used to define a style for a single HTML page. An internal CSS
is defined in the <head> section of an HTML page, within a <style> element. The
following example sets the text color of ALL the <h1> elements (on that page) to
blue, and the text color of ALL the <p> elements to red. In addition, the page will
be displayed with a "powderblue" background color:

<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: powderblue;}
h1 {color: blue;}
p {color: red;}
</style>
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

3. External:
An external style sheet is used to define the style for many HTML pages. To use
an external style sheet, add a link to it in the <head section of each HTML page:

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>

So, basically this system involves making use of of an external saved .css file
that contains the templates of bcg color, h1 and p, that we saw in internal system
similar to template saved in c_templates which contained int main(){ return 0}.

Create a styles.css file anywhere in your laptop, which should contain only the
following criterias
body {background-colour: blue;}
h1 {color: orange;}
p {color: red;}

Then in your html file you give path reference to this file on your computer in the
html code of every web page. Now a single template file is been linked to every
webpage of your website. So, making changes in your .css file makes changes
everywhere on the website

##Properties in CSS

1. The CSS color property defines the text color to be used.


2. The CSS font-family property defines the font to be used.
3. The CSS font-size property defines the text size to be used.
4. The CSS border property defines a border around an HTML element. For eg. p
{border: 2px solid powderblue;}
5. The CSS padding property defines a padding (space) between the text and the
border. For eg. p {border: 2px solid powderblue; padding: 30px; }
6. The CSS margin property defines a margin (space) outside the border. For e.g p
{border: 2px solid powderblue; margin: 50px;}

##HTML LINKS
html links are called as hyperlinks.
**A link does not have to be text. A link can be an image or any other HTML
element!
<p> <a href = "www.google.com" style = "color:blue;"> WebLink </a> </p>

**An interesting thing that the browser does is:


An unvisited link is underlined and blue
A visited link is underlined and purple
An active link is underlined and red

Potrebbero piacerti anche