We learnt earlier how h.t. email is used to mark-up text the browser decides how that text should be
displayed.
For example A heading is bold and in a larger front one click links are blue and underlined and so on
to change.
How will the browser show was a page of HDMI L..
We use cascading style sheets Ah SS.
See SS is a language for describing how web pages should be presented while 8 mail is used to define
the structure and semantics of your content.
C S S is used to style it and lay it out.
For example C Ss can be used to change the font colour spacing.
Add animations and other decorative features and so on.
Let's look at an example.
Starting with this basic HS team Al with a title and a couple of paragraphs.
In the browser it looks like this.
Just like javascript.
There are three ways to add C S S to an H team document.
The first is to use in line styles.
For example let's add a style attribute to the first paragraph element.
And in here we can add some C Ss that will affect this element.
For example changing its colour to red.
In the browser.
The contents of that paragraph element are now read.
Most elements in the body of an h t e document support the style attribute.
However as with javascript using in line C S S like this is a bad idea as it makes it difficult to maintain.
The second way of adding success is using a style element which has to go inside the head element in
here.
Let's add some styles to the H one element to make it a tallack.
And let's also make the background colour pink.
In the browser the header element now looks like this.
The third way to add styles to a page is to use an external style sheet.
Let's add a new file called styles that C Ss
and in here let's add some styles to paragraph elements to change the font to a sans the civi one and
change the size to 26.
Then in the S T L to reference an external style sheet we use a link tag.
The link tag is used to link an external resource to an eight team elf file.
So to link to a style sheet.
We use the link tag like this putting the U R L of the file in the h referer attribute.
This tag always needs to go in the head section and you can link to as many external stylesheets as
you like.
The advantage of having all the styles in an external file is that you can easily apply common styles
to any page just by including the style sheet file.
In the browser it now looks like this.
Let's also change the colour of the paragraphs to blue in the external stylesheet.
Now in the browser one paragraph is blue but the other one is still red.
This is because the style with this paragraph is defined after the style in the external stylesheet.
The style used by the browser is the latest one it finds either in an external stylesheets in embedded
are in line styles so it's possible to override styles in this way.
When defining a C S S rule the first.
We put a C Ss selector and then the list of styles.
C Ss selectors can be simple element names as we've been using are.
You can identify elements using the I.D. and class attributes too.
For example let's add a class to this paragraph and then in the style sheet.
Change the selector so that the styles only apply to paragraphs with this class.
And in the browser it looks like this.
This being a p h.
P cause I won't get into C S S in a lot of detail but this site is an excellent reference.
If you want more information.