# Modify CSS and attributes
You can modify attributes and elements, thanks to web api manipulation function.
I will not cover all the possibilities but give you some simple examples.
## Example with Bulma.io
Bulma is an amazing CSS framework focused only on CSS.
I will show you how you can use easly with hogosuru
### First Step: import the css
There are a lots of way to do this. Usually, you import it in the same time you load the wasm.
I will use another method and show you how you can load it dynamically :thumbsup:
```
func main() {
hogosuru.Init()
// we get the current document
if doc, err := document.New(); hogosuru.AssertErr(err) {
//we got the head
if head, err := doc.Head(); hogosuru.AssertErr(err) {
if link, err := htmllinkelement.New(doc); hogosuru.AssertErr(err) {
link.SetRel("stylesheet")
link.SetHref("https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css")
head.AppendChild(link.Node)
}
}
if body, err := doc.Body(); hogosuru.AssertErr(err) {
//lets create some button design with bulma
if div, err := htmldivelement.New(doc); hogosuru.AssertErr(err) {
if list, err := div.ClassList(); hogosuru.AssertErr(err) {
list.Add("buttons")
}
if buttonprimary, err := htmlbuttonelement.New(doc); hogosuru.AssertErr(err) {
buttonprimary.SetTextContent("Primary")
//we get the class list attribute
if list, err := buttonprimary.ClassList(); hogosuru.AssertErr(err) {
list.Add("button")
list.Add("is-primary")
}
buttonprimary.OnClick(func(e event.Event) {
if list, err := buttonprimary.ClassList(); hogosuru.AssertErr(err) {
list.Remove("is-primary")
list.Add("is-warning")
}
})
div.Append(buttonprimary.Element)
}
if buttondanger, err := htmlbuttonelement.New(doc); hogosuru.AssertErr(err) {
buttondanger.SetTextContent("Danger")
//we get the class list attribute
if list, err := buttondanger.ClassList(); hogosuru.AssertErr(err) {
list.Add("button")
list.Add("is-danger")
}
buttondanger.OnClick(func(e event.Event) {
if list, err := buttondanger.ClassList(); hogosuru.AssertErr(err) {
list.Remove("is-danger")
list.Add("is-info")
}
})
div.Append(buttondanger.Element)
}
body.Append(div.Element)
}
}
}
ch := make(chan struct{})
<-ch
}
```
## Let's take a closer look at the code
First we get the head of the document, we create an htmllink with the ref to the bulma css and attach to the head
```
if head, err := doc.Head(); hogosuru.AssertErr(err) {
if link, err := htmllinkelement.New(doc); hogosuru.AssertErr(err) {
link.SetRel("stylesheet")
link.SetHref("https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css")
head.AppendChild(link.Node)
}
}
```
Follow to the bulma documentation , we create an html code like this:
```
```
We dynamically create the components, assign the class like the html above.\
When click on the Primary button, we change their class for warning.\
When click on the Danger button, we change their class for info.
```
if body, err := doc.Body(); hogosuru.AssertErr(err) {
//lets create some button design with bulma
if div, err := htmldivelement.New(doc); hogosuru.AssertErr(err) {
if list, err := div.ClassList(); hogosuru.AssertErr(err) {
list.Add("buttons")
}
if buttonprimary, err := htmlbuttonelement.New(doc); hogosuru.AssertErr(err) {
buttonprimary.SetTextContent("Primary")
//we get the class list attribute
if list, err := buttonprimary.ClassList(); hogosuru.AssertErr(err) {
list.Add("button")
list.Add("is-primary")
}
buttonprimary.OnClick(func(e event.Event) {
if list, err := buttonprimary.ClassList(); hogosuru.AssertErr(err) {
list.Remove("is-primary")
list.Add("is-warning")
}
})
div.Append(buttonprimary.Element)
}
if buttondanger, err := htmlbuttonelement.New(doc); hogosuru.AssertErr(err) {
buttondanger.SetTextContent("Danger")
//we get the class list attribute
if list, err := buttondanger.ClassList(); hogosuru.AssertErr(err) {
list.Add("button")
list.Add("is-danger")
}
buttondanger.OnClick(func(e event.Event) {
if list, err := buttondanger.ClassList(); hogosuru.AssertErr(err) {
list.Remove("is-danger")
list.Add("is-info")
}
})
div.Append(buttondanger.Element)
}
body.Append(div.Element)
}
}
```
Click on 2 buttons
### How to hide a component?
We can hide components with the style directive "Display:None".
Style can be changed with the SetProperties and RemoveProperties of the [CSSStyleDeclaration](https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleDeclaration)
To hide a button:
```
if css,err:=buttondanger.Style();hogosuru.AssertErr(err) {
css.SetProperty("display", "none")
}
```
### Access to attributes
You can Modify/Set the attributes of elements with the corresponding method available on [Element](https://developer.mozilla.org/en-US/docs/Web/API/Element)
If you want create an input checkbox element, you need write
```
if input, err := htmlinputelement.New(d);hogosuru.AssertErr(err) {
input.SetAttribute("type", "checkbox")
}
```
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://hogosuru.v-ip.fr/guides/create-html-entities-and-manipulating-dom/modify-css-and-attributes.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.